SF Pro Font Alternatives

About SF Pro

Designer

Apple

Released

2015

License

Apple platforms only

Character

A neutral grotesque tuned for screens, with optical sizes for text and display.

The story of SF Pro

Compare at a glance

Where SF Pro-style type works best

How to choose between them

• Inter if you need web apps and UI. The most common SF Pro alternative: similar proportions, tall x-height and screen-first design.
• Geist if you need developer tools and SaaS. A modern, precise grotesque made for developer tools, with SF-like neutrality.
• Roboto if you need cross-platform apps. Android's system font; using it next to SF Pro keeps both platforms native-feeling.
• Manrope if you need fintech and product sites. A semi-condensed grotesque with crisp, modern details.
• Onest if you need body text. A clean grotesque with friendly details and great readability.
• DM Sans if you need marketing sites. Low-contrast geometric sans with a compact, tidy feel.

Tested font pairings

Add it to your site

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">

.heading {
  font-family: "Inter", sans-serif;
}

Pairing and tips

Each font at a glance

• Inter is a sans serif best for web apps and ui. Fallback stack: "Inter", sans-serif. Pair it with a neutral sans for body text.
• Geist is a sans serif best for developer tools and saas. Fallback stack: "Geist", sans-serif. Pair it with a neutral sans for body text.
• Roboto is a sans serif best for cross-platform apps. Fallback stack: "Roboto", sans-serif. Pair it with a neutral sans for body text.
• Manrope is a sans serif best for fintech and product sites. Fallback stack: "Manrope", sans-serif. It pairs well with Inter.
• Onest is a sans serif best for body text. Fallback stack: "Onest", sans-serif. Pair it with a neutral sans for body text.
• DM Sans is a sans serif best for marketing sites. Fallback stack: "DM Sans", sans-serif. Pair it with a neutral sans for body text.

Readability and accessibility

Colors and layouts that suit this style

Common mistakes

• Using the same tracking at every size; display sizes need tighter letter-spacing than text sizes.
• Shipping SF Pro files on a website, which breaks Apple's license.
• Forgetting a fallback stack, so Windows and Android users see an unexpected default font.

Recommended sizes

• Sans serif faces (Inter, Geist, Roboto, Manrope, Onest, DM Sans): readable from about 14px for interface text, 16 to 18px for long reading, and any larger size for headings.

Licensing and commercial use

Loading fonts without slowing your site

• Load only the weights and styles you actually use. Each extra weight is another file to download.
• Use font-display: swap (included in the Google Fonts link above) so text shows immediately in a fallback font and swaps when the web font arrives.
• Add preconnect hints for fonts.googleapis.com and fonts.gstatic.com, or self-host the files on your own domain for the fastest, most private loading.
• Prefer variable fonts when available: one file can cover every weight.
• Define a sensible fallback stack, such as "Inter", sans-serif, so the layout looks right even before the font loads.

Sources and further reading

• Wikipedia: SF Pro · History and design of the original SF Pro typeface.
• Google Fonts · Every font on this page is available here for free.
• SIL Open Font License FAQ · What the most common Google Fonts license allows.
• Google Fonts FAQ · Licensing and commercial use of Google Fonts.
• MDN: font-family · How font stacks and fallbacks work.

More font guides

Questions people ask