The SF Pro font stack in CSS, and why not to self-host it
On Apple devices the system font stack renders San Francisco with no download. The CSS line, the ui- keywords for rounded and mono, and why not to bundle SF.
The quickest way to make an app or site feel native on a Mac is its font. Apple's San Francisco is already on every Apple device, and the system font stack asks the browser to use it, with no download and no licence question.
The stack
body {
font-family: -apple-system, BlinkMacSystemFont, system-ui,
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
code, .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.rounded { font-family: ui-rounded, -apple-system, system-ui, sans-serif; }On a Mac or iPhone this gives SF Pro, SF Mono and SF Pro Rounded. On Windows it gives Segoe UI; on Android, Roboto. Each platform's users see their own system's font, which is what native apps do.
Why not self-host SF
Apple publishes the SF fonts for designing and developing for its platforms, under a licence that limits how they may be used. Bundling the files into a website for everyone to download goes beyond that as commonly understood. The system stack gets you SF on Apple devices without shipping it.
Sizes that feel native
| Use | Mac app size |
|---|---|
| Body and controls | 13px |
| Secondary text, sidebar headers | 11px |
| Window title, section heading | 15 to 17px semibold |
San Francisco adjusts its spacing for size on Apple platforms, so small text stays readable without your own letter-spacing. Leave letter-spacing at normal for interface text.
On a marketing site
The same stack works for an Apple-style landing page: large bold headlines in SF, generous space. See an Apple-style landing page. For an app window, pair it with desktop sizes as in a native macOS look.
macOS Native Dark UI needs no fonts installed: its token file uses the system stack, which renders SF Pro on a Mac, for both the dense app window and the Apple-style site.
Questions
How do I use SF Pro on a website?
Use the system font stack, starting with -apple-system or system-ui. On Apple devices it renders San Francisco from the system; elsewhere it falls back to the local system font.
Can I self-host SF Pro as a web font?
Apple's licence for its SF fonts restricts where they can be used, and serving them to the public from your site is not among the permitted uses as commonly read. The system stack avoids the question.
What do ui-monospace and ui-rounded do?
They are CSS generic families for the system's monospace and rounded faces. On Apple platforms they give SF Mono and SF Pro Rounded; other systems fall back to the next font you list.