San Francisco (sans-serif typeface)

From Wikipedia, the free encyclopedia
For the "ransom note" typeface, see San Francisco (decorative typeface).

San Francisco
San Francisco Display SP.svg
CategorySans-serif
ClassificationNeo-grotesque
FoundryApple Inc.
Date releasedNovember 18, 2014
LicenseProprietary
VariationsSF Compact
SF Pro
SF Mono
SF Hello
SF Condensed
SF Cash
SF Shields
SF Camera
Also known asSF
Websitehttps://developer.apple.com/fonts/
Latest release version17.0d9e1

San Francisco is a neo-grotesque typeface made by Apple Inc. It was first released to developers on November 18, 2014.[1][2] It is the first new typeface designed at Apple in nearly twenty years and has been inspired by Helvetica and DIN.[1]

The macOS Catalina font Galvji is similar to the San Francisco variant SF Pro Text but has lower leading and bigger spacing.

Variants[]

San Francisco typeface was first introduced on watchOS only. The next year at WWDC, Apple released the watchOS font as SF Compact and at the same time introduced SF UI (generally called SF) for OS X El Capitan and iOS 9. In macOS High Sierra and iOS 11, SF UI was succeeded by SF Pro, which supports an expanded list of glyphs and languages.[3] Note: SF has the codename SFNS in macOS and SFUI in iOS, regardless of the official name.

Some variants have two optical sizes: "display" for large and "text" for small text. Compared to display, the letters in text have larger apertures and more generous letter-spacing. The operating system automatically chooses the display optical size for sizes of at least 20 points, and the text optical size otherwise.[4]

Primary fonts[]

SF Compact[]

UI font for watchOS, Camera and Photos (EXIF and editing only). Different from SF Pro, its characters' round curves are flatter, allowing the letters to be laid out with more space between them, thereby making the text more legible at small sizes, which Apple Watch small screen demands.[4] A rounded variant also exists and is used on iOS 10 and macOS Sierra onward as the font for the new contact placeholder icons introduced for both OS(es). Prior to iOS 15, iPadOS 15, & macOS Monterey, it was used in Apple Maps for maps labeling in those respective versions, replacing Avenir Next.

  • SF Compact Text comes with 9 weights with their italics. Initially has 6 weights only when introduced.
  • SF Compact Display comes with 9 weights with their italics.
  • SF Compact Rounded comes with 9 weights. It has the same figure as the "display" version but with rounded corners.

SF Pro[]

UI font for macOS, iOS, iPadOS, and tvOS. On January 25, 2019, SF Pro Rounded (codename SFUIRounded) was introduced in the Apple Pay Cash section of the Wallet app in iOS 12.2[5] and was officially released on the Apple Developer website on June 3, 2019. In iOS, iPadOS 15, & macOS Monterey, Apple Maps starts used SF Pro Text for maps labeling.

  • SF Pro Text comes with 9 weights with their italics. Initially has 6 weights only when introduced.
  • SF Pro Display comes with 9 weights with their italics.
  • SF Pro Rounded comes with 9 weights. It has the same figure as the "display" version but with rounded corners.

These fonts in different languages can be found on the Apple website in their corresponding region:

  • SF Pro AR is Arabic font.[6] SF Pro JP is Japanese font. SF Pro KR is Korean font. SF Pro TH is Thai font.
  • SF Pro SC, SF Pro TC and SF Pro HK are Chinese fonts, but they are actually PingFang family.

Secondary fonts[]

SF Mono[]

A monospaced variant. It was introduced at WWDC 2016.[7] UI font for the Terminal, Console (only regular weight), and Xcode applications.[8][9] It was officially released on the Apple Developer website in August 2019.

  • SF Mono comes with 6 weights with their italics.

SF Hello[]

The SF Hello variant was first introduced in 2016. It is restricted to Apple employees and permitted contractors and vendors, and is therefore unavailable for public use.[10][11] This variant appears to be an intermediate optical size between SF Pro Text and SF Pro Display; however, some characters are tweaked, and the letter-spacing is adjusted specially for printing rather than displaying on the screen.

SF Condensed[]

A condensed variant of SF Pro. UI font for Apple News since iOS 10 and Apple Stocks since iOS 12 and macOS Mojave. There is also a version called 'SF Condensed Photos, which only shows up as the title of featured albums in the Photos app and widget as of iOS 13 & 14, respectively. SF Condensed Photos has a tighter width and spacing, and smaller aperture than "SF Shields Condensed-Bold", especially the letter "c" has less gap at its end than any other variant.

  • SF Condensed Text has 6 weights.
  • SF Condensed Display has 9 weights.

App-specific fonts[]

SF Cash[]

UI Font for Apple Cash and Apple Card. It includes a chiseled-style SVG Color font titled "SF Cash Chiseled", a plain version titled "SF Cash Plain", and "SF Cash Text Condensed Semibold" which appears more condensed than "SF Condensed Text Semibold".

SF Shields[]

SF Shields first appeared in iOS 12 and macOS Mojave's, and is hidden in the GeoServices cache folder for Apple Maps data. As such, it is used as the UI font for traffic signs in the Maps app, replacing Helvetica Neue. The "SF Shields Semicondensed-Bold" is narrower than SF Condensed Display-Bold, the "SF Shields Condensed-Bold" is narrower than "SF Shields Semicondensed-Bold", the "SF Display Shields Compressed-Bold" has the most narrow style. All three are used for traffic signs with one, two, and three or more glyphs, respictively

Since iOS and iPadOS 15, the font is used for second-level or lower administrative divisions, replacing Compact Text.

SF Camera[]

SF Camera was introduced on September 10, 2019, at Apple's keynote; Phil Schiller mentioned it while summarizing the camera updates on iPhone 11 Pro. Different from SF Pro, this variant has a boxier design which gives an industrial and professional look. Its figure and tracking are similar to SF Compact Text. UI font for Camera and Photos (EXIF and editing only) since iOS 13 and macOS Big Sur. It is also used on the Preview icon since Big Sur.

Other fonts[]

SF Serif (New York)[]

A serif variant. It was introduced as SF Serif (codename Serif UI) at WWDC 2018 as the UI font for the redesigned Apple Books app for IOS 12.[12] It was officially released under the name, New York on the Apple Developer site on June 3, 2019.[8] It is also used as a font for Photo Memories and Apple News+, as well as the Dictionary & Font Book icons since Big Sur.

  • New York Small comes with 6 weights with their italics.
  • New York Medium comes with 6 weights with their italics.
  • New York Large comes with 6 weights with their italics.
  • New York Extra Large comes with 6 weights with their italics.

The font includes OpenType features for lining and old-style figures in both proportional and tabular widths. Despite Apple having a font with the same name with the bitmap format for the original Macintosh (and later converted to TrueType format), it is unrelated to this design.

Variable Font[]

Apple introduced OpenType Font Variations feature of their SF Font(s) in WWDC 2020.[13] It is included as a TrueType Font in the installer file on the Developer website.

  • SF Pro, SF Pro Italic, SF Compact feature variable weights and variable optical sizes of between "text" and "display".
  • SF Compact Italic features variable weights and has "text" optical size only.
  • New York and New York Italic feature variable weights and variable optical sizes between "small" and "extra large".
  • SF Arabic features variable weights and variable optical sizes.

SF Symbols[]

SF Symbols can refer to symbols and icons used in the Apple operating systems. To fit Apple's objectives of 'easy to use and 'core functionality, these symbols are designed using Apple's visual language and unified design elements. They also used the squircle instead of standard rounded corners for a comfortable look, similar to what Apple used in all their designs. By using unified symbols, users can experience the easiness and intuitiveness when interacting between Apple's devices, services, and apps.

Apple's symbols are included as glyphs in the font file of SF Pro, SF Pro Rounded, SF Compact, and SF Compact Rounded (also in their variable font file). Each symbol is available in 3 sizes. These symbols change their thickness and negative space according to chosen weight, they even utilized with the Opentype Variation feature. Using the SF Symbols app can access more features such as refined alignment, multicolor, and localization of symbols. [14] The symbols properties seems not unified across variants, such as different Unicode arrangement for few symbols resulting different symbols when switching between variants, and also some symbols has noticeable very little details difference in some variants.version 16.0d18e1

These symbols are available for developers to use in their apps on Apple platforms only. Developers are allowed to customize it to desired styles and colors, but certain symbols may not be modified and may only be used to refer to its respective Apple services or devices as listed in the license description.

Usage[]

Since its introduction, San Francisco has gradually replaced most of Apple's other typefaces on their software and hardware products and for overall branding[15] and has replaced Lucida Grande and Helvetica Neue as the system typeface of macOS and iOS since OS X El Capitan and iOS 9.[16][8][17] Apple uses it on its website and for its product wordmarks, where it replaced Myriad Pro. It is also used on the keyboard of the 2015 MacBook and on the 2016 MacBook Pro, replacing VAG Rounded.[18] It is also used as Apple's corporate typeface.[19]

Apple restricts the usage of the typeface by others. It is licensed to registered third-party developers only for the design and development of applications for Apple's platforms.[8] Only SF Pro, SF Compact, SF Mono, SF Arabic, and New York variants are available for download on Developer website and they are the only SF variants allowed to be used by developers.

The San Francisco Chronicle described the font as having nothing to do with the city and just being "Helvetica on a low-carb diet".[20]

References[]

  1. ^ Jump up to: a b Brownlee, John (November 19, 2014). "Apple Releases Its Most Important Typeface in 20 Years". Fast Company. Retrieved June 13, 2015.
  2. ^ Williams, Owen (November 18, 2014). "Meet Apple's new font, designed for its smartwatch". The Next Web. Retrieved June 13, 2015.
  3. ^ "iOS 11 silently introduces SF Pro with almost 1000 new glyphs and support for more languages". Designer News. Retrieved April 21, 2019.
  4. ^ Jump up to: a b Cavedoni, Antonio (June 12, 2015). "Introducing the New System Fonts". WWDC 2015. Apple Inc.
  5. ^ Rambo, Guilherme (January 25, 2019). "New font on iOS 12.2: SFUIRoundedpic.twitter.com/chCQassrL5". @_inside. Retrieved April 21, 2019.
  6. ^ @NobtakaJP (June 8, 2021). "「SF Arabic beta」 新しいアラビックフォントが追加されました。 あまり使う機会がないかも知れないですが #WWDC21" (Tweet) (in Japanese) – via Twitter.
  7. ^ Getting Apple's SF Mono Font in Mac OS, retrieved January 3, 2019
  8. ^ Jump up to: a b c d "Fonts". Apple Developer. Apple Inc. Retrieved June 13, 2015.
  9. ^ Nowell, Peter. "Apple Reveals San Francisco Monospaced Font".
  10. ^ San-Francisco-family/README.md at master · windyboy1704/San-Francisco-family, retrieved May 30, 2019
  11. ^ Apple Identity Guidelines (PDF), retrieved January 2, 2019
  12. ^ "Apple Books: What's new in iOS 12". iMore. Retrieved July 10, 2018.
  13. ^ "The details of UI typography - WWDC 2020 - Videos". Apple Developer. Retrieved June 5, 2021.
  14. ^ "SF Symbols 2 - WWDC 2020 - Videos". Apple Developer. Retrieved June 5, 2021.
  15. ^ Apple (2015). "Visual Design - Apple TV Human Interface Guidelines - Apple Developer". Retrieved on 2015-10-04 from https://developer.apple.com/tvos/human-interface-guidelines/visual-design/.
  16. ^ "Typography". Apple Watch Human Interface Guidelines. Apple Inc. Archived from the original on June 15, 2015. Retrieved June 13, 2015.
  17. ^ Stinson, Liz (June 9, 2015). "Why Apple Abandoned the World's Most Beloved Typeface". Wired. Retrieved June 13, 2015.
  18. ^ Wright, Mic (March 9, 2015). "The new MacBook shows San Francisco is more than just the Apple Watch font". The Next Web. Retrieved May 29, 2015.
  19. ^ "Apple Adopts San Francisco Typeface for Apple.com Website". Retrieved April 21, 2018.
  20. ^ Hartlaub, Peter (April 19, 2021). "San Francisco finally has its own font. And the inspiration was truly historic". San Francisco Chronicle. Retrieved April 19, 2021.

External links[]

Retrieved from ""