San Francisco

About San Francisco

San Francisco is Apple's proprietary system typeface, introduced in 2014 and designed entirely in-house by Apple's typography team. It was created to replace Helvetica Neue as the primary system font across Apple's ecosystem, debuting first on the Apple Watch before rolling out to macOS, iOS, iPadOS, tvOS, and watchOS. The driving goal was simple but demanding: a typeface that performs beautifully at every size, on every screen, across every device Apple makes.

What sets San Francisco apart from its predecessor is its deliberate engineering for digital environments. It features a tall x-height, which dramatically improves legibility at small sizes — a critical requirement for the Apple Watch's tiny display. The letterforms use open apertures and generous spacing to keep text readable even at display densities ranging from low-resolution screens to ultra-sharp Retina and Super Retina XDR panels. Its stroke contrast is intentionally low, giving it a clean, even texture that avoids the optical noise that high-contrast typefaces can produce on backlit screens.

San Francisco also introduces an intelligent optical sizing system. The font automatically switches between two subfamilies — SF Text (optimized for sizes below 20pt) and SF Display (optimized for larger sizes) — depending on the rendering context. This level of typographic refinement is rarely baked directly into a system font and reflects Apple's obsessive attention to detail.

Beyond the technical specifications, San Francisco carries a neutral, modern personality. It avoids the sterile coldness of pure geometric sans-serifs while steering clear of the humanist warmth that might undermine its professional credibility. This balance makes it suitable for an enormous range of applications: from the settings menu of an iPhone to the headlines of Apple's marketing materials. Its versatility is precisely why designers working within Apple's ecosystem — and many outside it — find it so compelling.

San Francisco is widely recognized in the technology industry, consumer electronics sector, and digital product design. If you have used an Apple device in the last decade, you have read San Francisco thousands of times without necessarily knowing its name.

Best Free Alternatives to San Francisco

Because San Francisco is proprietary and restricted to Apple's platforms, designers working outside that ecosystem need high-quality alternatives. The good news is that the open-source and free font landscape has matured significantly, and several typefaces match San Francisco's clarity, neutrality, and screen performance with remarkable fidelity.

Inter

Inter is the closest freely available alternative to San Francisco, with a similarity rating of approximately 90%. Designed by Rasmus Andersson and released as an open-source project, Inter was built from the ground up for computer screens — which is exactly why it mirrors San Francisco's intent so closely. It shares the same tall x-height, open apertures, and low stroke contrast that make San Francisco so readable at small sizes. Inter even includes contextual alternates and OpenType features that make it particularly well-suited for UI design, data tables, and long-form reading on screens. If you are building a web application, a SaaS product, or any interface that needs to feel modern and polished without relying on Apple's proprietary font, Inter is the natural first choice.

Source Sans 3

Adobe's Source Sans 3 (the updated version of Source Sans Pro) achieves roughly 85% similarity to San Francisco. Designed by Paul D. Hunt, Source Sans was explicitly created for user interfaces and digital environments, making its design philosophy almost identical to Apple's. It is slightly more humanist in its letterforms than San Francisco — you will notice warmer curves in letters like the lowercase 'a' and 'g' — but it shares the same functional clarity and excellent rendering quality. Source Sans 3 is an excellent choice for editorial platforms, documentation sites, and any project where legibility under extended reading conditions is the top priority.

Roboto

Roboto, developed by Christian Robertson for Google and used as Android's system font, lands at around 80% similarity to San Francisco. While Roboto has a slightly more geometric construction and a touch more character in certain letterforms, its overall neutrality and adaptability are very comparable. It has been battle-tested across billions of devices and an enormous variety of screen conditions, which speaks to its technical quality. Roboto works exceptionally well in cross-platform projects where you want a reliable, universally recognized sans-serif without licensing concerns.

IBM Plex Sans

IBM Plex Sans, designed by Mike Abbink at Bold Monday for IBM, also sits at approximately 80% similarity. It is a more distinctive typeface than the others on this list — you can sense the institutional personality of a large technology company in its letterforms — but it shares San Francisco's legibility, strong weight range, and suitability for both UI and print contexts. IBM Plex Sans is particularly well-suited for enterprise software, developer tools, and technical documentation, where a slightly more structured, authoritative tone is an asset rather than a drawback.

DM Sans

DM Sans, designed by Colophon Foundry for Google, reaches a similarity of around 75% to San Francisco. It is a contemporary geometric sans-serif with a friendly yet professional character. While it is slightly less neutral than San Francisco — its curves carry a bit more personality — it strikes an excellent balance between readability and visual warmth. DM Sans is a great pick for startups, lifestyle brands, and digital products that want the clean functionality of San Francisco but with a slightly more approachable and modern edge.

How to Use Inter in CSS

Inter is available for free through Google Fonts, making it easy to integrate into any web project. To load it via a stylesheet import, add the following line at the top of your CSS file:

Once imported, apply Inter to your project using the font-family property with a sensible fallback stack. This ensures your layout remains stable and readable even if the font fails to load:

Notice the inclusion of display=swap in the import URL. This instructs the browser to use a fallback font immediately while Inter loads in the background, then swap it in once available. This is a best practice for Core Web Vitals performance, preventing invisible text during font loading and keeping your Largest Contentful Paint scores healthy. For even better performance in production environments, consider self-hosting Inter using the fontsource npm package, which eliminates the external network request entirely.

Frequently Asked Questions

Is San Francisco free to use?

No. San Francisco is a proprietary typeface owned by Apple Inc. It is available for use only within Apple's own operating systems and developer tools, and only for the purpose of creating applications that run on Apple platforms. You cannot legally download San Francisco and use it in web projects, print materials, or products outside of Apple's ecosystem. Apple's developer license explicitly prohibits redistributing or using the font outside of sanctioned contexts.

What is the closest free alternative to San Francisco?

Inter is widely regarded as the closest freely available alternative to San Francisco. With a design philosophy centered on screen legibility, a tall x-height, and a neutral modern aesthetic, Inter mirrors San Francisco's core strengths with approximately 90% similarity. It is open-source, actively maintained, and available via Google Fonts and npm, making it accessible for virtually any project type.

Can I use Inter commercially?

Yes, absolutely. Inter is released under the SIL Open Font License (OFL) 1.1, which permits free use in both personal and commercial projects. You can embed it in websites, applications, printed materials, and products without paying any licensing fees. The only restriction, common to all OFL fonts, is that you cannot sell Inter itself as a standalone font product.

Why doesn't San Francisco work in web browsers?

San Francisco is a system font, meaning it is installed on Apple devices but is not available as a web font for general use. While you can reference it using the CSS value -apple-system or ui-sans-serif in your font stack — which will render San Francisco on Apple devices — visitors using Windows, Android, or Linux will see a different fallback font instead. This is why many designers pair a -apple-system reference with a close alternative like Inter, ensuring a consistent and high-quality typographic experience across all platforms and operating systems.