The reason for the preface is that it shows how deep you may need to go back to support system fonts. Additionally, it helps show that with new system versions, come new fonts, and thus the possibility of needing to update your font stack.
The obvious limitation here is that you have to call that long list of fonts each time you want to apply it to an individual element. Over time, that could become cumbersome and make your code more bloated than it ought to be. Instead, you might consider making a CSS variable for it:
For example, Windows comes with Times New Roman and Courier New. OS X comes with Apple Garamond and Monaco. Prior to version 4.0, Android came with Droid Serif and Droid Mono in addition to the Droid Sans UI font.
This neutral, flexible, sans-serif typeface is the system font for iOS, iPad OS, macOS and tvOS. SF Pro features nine weights, variable optical sizes for optimal legibility, four widths, and includes a rounded variant. SF Pro supports over 150 languages across Latin, Greek, and Cyrillic scripts.
Sharing many features with SF Pro, SF Compact features an efficient, compact design that is optimized for small sizes and narrow columns. SF Compact is the system font for watchOS and includes a rounded variant.
A contemporary interpretation of the Naskh style with a rational and flexible design, this extension of San Francisco is the Arabic system font on Apple platforms. Like San Francisco, SF Arabic features nine weights, variable optical sizes that automatically adjust spacing and contrast based on the point size, and includes a rounded variant.
Gain insight into typographic principles and how they apply to the San Francisco fonts, the result of a deep collaboration between design and engineering teams. This typeface defers to the content it displays to give text unmatched legibility, clarity, and consistency.
None of the current answers including the accepted one will use Apple's San Francisco font on systems that don't have it installed as the system font. Since the question isn't "how do I use the OS X system font on a webpage" the correct solution is to use web fonts:
Adjust font weight, size, and color as needed to emphasize important information and help people visualize hierarchy. Be sure to maintain the relative hierarchy and visual distinction of text elements when people adjust text sizes.
NOTE SF Symbols provides a comprehensive library of symbols that integrate seamlessly with the San Francisco system font, automatically aligning with text in all weights and sizes. Consider using symbols when you need to convey a concept or depict an object, especially within text.
Consider using the built-in text styles. The system-defined text styles give you a convenient and consistent way to convey your information hierarchy through font size and weight. Using text styles with the system fonts also supports Dynamic Type and the larger accessibility type sizes (where available), which let people choose the text size that works for them.
Implement accessibility features for custom fonts. System fonts automatically support Dynamic Type (where available) and respond when people turn on accessibility features, such as Bold Text. If you use a custom font, make sure it implements the same behaviors. For developer guidance, see Applying custom fonts to text.
I'm doing all graphic design in a startup company of some friends, and a major part of our product is developing an app that should run on everything after iPhone 4. So after some researching (I have basically zero UI design experience) I figured we should use the San Francisco font for the app.
I managed to get the font from other sources, installed it, but it doesn't appear in either PS or AI. I also installed it on a different PC with a different Adobe CS version but that didn't work either.
Here are all the fonts you need. BUT, for some reason, at least in my case, if I install the italics I can not choose the regular font in an application.I don't know why and haven't tried anything like renaming or such because I just found all of this.Which is thy I have not installed the italics at the moment. But the rest works just fine.
Unfortunately Apple aren't too concerned with Windows users. They expect everyone who is designing for Mac to use a Mac. And since the San Francisco font has been created with specific features only available for Mac it is only available on Mac and unlikely to be available on Windows any time soon (unless someone decides to hack it, which is a possibility).
The Mac app allows you to support all symbols as an SVG using File -> Export Symbol... . This is a great way to include the symbol in places where you can not use the font itself. However, do keep in mind the license agreements.
At WWDC 2016, Apple unveiled a brand new font which was called San Francisco. The font went on to become the default font in macOS and iOS, replacing Helvetica (which replaced Lucida Sans). On watchOS, a special Compact variant of San Francisco, was used.
Each glyph has a defined size called the em-box. The easiest way to understand this concept is to consider a monospace font. In monospace fonts the em-box width is the same for all of the glyphs. Most typefaces are not monospace, they have proportional em-boxes with optical sidebar values so each glyph occupies the space it needs. These sidebars are part of the built-in spacing metrics for a typeface (tracking and kerning can be applied). The sidebars are shown below for SF UI Display Light.
Verdana and Lucida Grande have very open apertures avoiding becoming blurry at nearly all sizes. The bowl of the e does not curve back into the cross bar. It renders as a sharply defined aperture. These open apertures are one of primary traits of most screen fonts designed to be used at small sized or for low resolution displays. DIN sits some where in the middle between Helvetica and Lucida in terms of open apertures and the angle of the terminals.
Lucida inner shapes are a little more awkward, almost illegible when you just look at the negative space, but it serves a purpose, the text itself is very legible at low resolution. If you want maximum legibility you can use something like Input, a coding font drawn on a 12px grid. It has clumsy, chiseled looking forms when viewed large, but is extremely legible at small sizes on a low resolution display. It does all of this while maintaining very pleasing grey tones.
In practice, the top cross bars on letters like the capital E, F and B have the same pixel density at the top as numbers like the 5 and 7. helping maintain a consistent grey tone across the font. If we compare DIN and Helvetica with both letters and numbers you can see what I mean.
Stylistic fonts exist, which are mainly present in the iOS 16 Lock Screen, Apple Cash, watchOS Watch Faces, and several promotional materials. These include chiseled, stenciled, semi-rounded, dotted, prisma, railed, and slab-serif versions.
UI font for macOS, iOS, iPadOS, and tvOS. In 2017, a revised version, SF Pro was introduced, supporting an expanded list of weights, optical sizes, glyphs and languages. SF Pro Rounded (codename SFUIRounded) was introduced in 2018.
SF Pro is a variable font that also has variable widths in conjunction with weights, optical sizes, and grades. One of them is a print-optimized variant, SF Hello exists, which is restricted to Apple employees and permitted contractors and vendors, and is therefore unavailable for public use. This results in three fonts derived from SF Pro as shown below;
Initial font introduced with the Apple Watch and watchOS, but was later rebranded as SF Compact with the introduction of SF UI at WWDC 2015. 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. SP Compact Rounded was introduced in 2016.
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. It was officially released under the name New York on the Apple Developer site on June 3, 2019.
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.
Apple introduced the OpenType Font Variations feature of their SF fonts in WWDC20. It is included as a TrueType Font in the installer file on the Developer website. On WWDC22, variable width option is introduced to the font family.
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. The symbol properties are not unified across variants. Different Unicode arrangement for some symbols result in different symbols when switching between variants, and some symbols have noticeably fewer details in some variants.version 16.0d18e1
Method 1------------1. In Adobe XD, insert some random text using a San Francisco font.2. Switch to the SF Symbols app, select a symbol by clicking it and then copy the symbol (Command-C).3. Switch back to Adobe XD, select and highlight the text you previously created and then paste the symbol (Command-V).
Method 2-------------1. In the SF Symbols app, select a symbol by clicking it and then copy the symbol (Command-C).2. Switch to Adobe XD and paste the symbol (Command-V).3. Change the symbol text from Area Text to Point Text.4. Change the font from Helvetica Neue to a San Francisco font. 2b1af7f3a8