Meet the expanded San Francisco font family

Written by Cihat Gündüz

Description: Discover the latest additions to San Francisco – the system font for Apple platforms – and find out how they can provide more control and versatility when designing interfaces. In addition to weights and optical sizes, San Francisco now supports three new width styles: Condensed, Compressed, and Expanded. We’ll also take you through the linguistic expansion of San Francisco and learn more about the feature-rich Arabic system font families: SF Arabic and SF Arabic Rounded.

Meet the family

  • Currently supported
    • SF Pro (default on iOS / macOS)
    • SF Pro Rounded (default on iOS / macOS)
    • SF Compact (default on watchOS)
    • SF Compact Rounded (default on watchOS)
    • SF Mono (for Xcode)
  • Current weights
    • Ultralight to Black
  • Optical sizes (e.g. 96pt, 70pt, 48pt, 28pt, 12pt)
  • Today's focus: “SF Pro”
    • Apple expanded the style in Photos, News and Maps apps

Explore the new widths

  • To weight and optical size, width is now added:
    • Condensed
    • Compressed
    • Expanded
  • Full overview of all styles:
    • Styles towards center have more neutral voice
    • Outside ones more expressive and stronger voice
    • Choosing & pairing fonts:
      • All styles provide same language support
      • Vertical proportions are always the same for all
      • Stem thickness stays relatively the same
      • Regular: Is best to read, default to this
      • Condensed: Comfortable width, but fit more text
      • Compressed: Very densed proportions, nice as a display style
      • Expanded: Use on smaller labels and secondary content
      • Either you can save space, or use larger size with same space
      • Don’t use “Compressed” for long texts due to bad legibility
    • Example combinations:
      • Photos app combines Compressed Semibold for Title, Expanded Bold for Subtitle
      • A world of possible combinations:
    • News app uses Condensed or Compressed for title to fit more in, giving the title personality
    • Expanded used for author
    • Maps app uses expanded for long mountains to fill greater space, for example
    • Recap:
      • Space efficiency
      • Reinforce hierarchies
      • Expressive display styles
      • Latin, Greek, and Cyrillic supported

    Welcome SF Arabic

    • Extending the linguistic coverage of San Francisco, started last year
    • SF Arabic introduced last year, features full gamut of weights
      • Optical sizes are tailored for Arabic, fine-tuned for legibility
      • Many extras like vocals and Quranic notations added
      • New this year: SF Arabic Rounded
      • Fonts are available for download on Apple Developer Website

      Missing anything? Corrections? Contributions are welcome 😃

      Related

      Written by

      Cihat Gündüz

      Cihat Gündüz

      📱Indie iOS Developer, 🎬Content Creator for 👨🏻‍💻Developers. 👾Twitch-Streamer & ▶️YouTuber.