Apple Platform Font Stack
Build a font stack optimised for Apple platforms (macOS, iOS, iPadOS) using San Francisco and its fallbacks.
Detailed Explanation
Apple Platform Font Stack
Apple ships the San Francisco font family across macOS, iOS, iPadOS, watchOS, and tvOS. San Francisco comes in two optical sizes: SF Pro for UI elements and SF Mono for code. On the web, you cannot reference "San Francisco" by name; instead, you use the vendor-prefixed keyword -apple-system.
The Declaration
font-family: -apple-system, BlinkMacSystemFont,
"Helvetica Neue", Helvetica, Arial, sans-serif;
Why Not Just system-ui?
On Apple devices, system-ui correctly resolves to San Francisco in all modern browsers. However, if you also need to support older macOS versions (pre-El Capitan) or older Safari versions, -apple-system followed by BlinkMacSystemFont is more reliable.
Helvetica Neue as Fallback
Before San Francisco was introduced with OS X El Capitan (2015), Apple used Helvetica Neue as the system font. Including it ensures that users on older Macs still see a clean sans-serif typeface.
Font Weights & Optical Sizing
San Francisco supports weights from Ultralight (100) to Black (900) and automatically applies optical sizing based on the point size. At small sizes (below ~20px), the browser selects SF Pro Text for tighter letter-spacing and open counters; at larger sizes, it switches to SF Pro Display with tighter tracking. This happens automatically when you use -apple-system.
Pairing With SF Mono
For code blocks, pair this stack with an Apple-optimised monospace stack:
font-family: "SF Mono", Menlo, Monaco, Consolas, monospace;
Use Case
Best for iOS/macOS-focused web apps, PWAs distributed through the App Store, or marketing sites targeting Apple users where a native look-and-feel is paramount.