San Francisco: the iOS system font

Apple’s interface font is called San Francisco. It replaced Helvetica Neue as the iPhone and iPad system font in iOS 9 and has grown into a whole superfamily. This guide explains the members of that family and — more importantly — how to use them in apps and on the web without hard-coding font names.

The San Francisco family

Optical sizes: Text vs Display

SF Pro adapts to the size it is set at. Below 20 points the system uses the Text cut, with slightly wider spacing and larger apertures for legibility. At 20 points and above it uses Display, which is tighter and more refined. When you request the system font through Apple’s APIs this happens automatically — one more reason never to reference SF by its file name.

Using the system font in SwiftUI

Prefer semantic text styles. They pick the right size, weight and leading, and they respond to Dynamic Type for free.

Text("Headline").font(.headline)
Text("Body copy").font(.body)
// Pick a design: .default, .serif (New York), .rounded or .monospaced
Text("Rounded title")
    .font(.system(.largeTitle, design: .rounded, weight: .bold))
Text("let x = 42")
    .font(.system(.body, design: .monospaced))

Using the system font in UIKit

// Dynamic Type text style (recommended)
label.font = UIFont.preferredFont(forTextStyle: .body)
label.adjustsFontForContentSizeCategory = true
// Fixed size with a weight
label.font = .systemFont(ofSize: 17, weight: .semibold)
// Monospaced digits for timers and tables
label.font = .monospacedDigitSystemFont(ofSize: 17, weight: .regular)
// New York (serif) or SF Rounded via a font descriptor
let body = UIFont.preferredFont(forTextStyle: .body)
if let serif = body.fontDescriptor.withDesign(.serif) {
    label.font = UIFont(descriptor: serif, size: 0)
}

Default Dynamic Type sizes

At the default (Large) content size, the iOS text styles map to the following point sizes. Users can scale all of them up or down in Settings.

Using San Francisco on the web

Websites can’t embed the SF font files, but Safari exposes the system fonts through CSS keywords. On Apple devices these resolve to SF Pro, New York, SF Pro Rounded and SF Mono; elsewhere the browser substitutes its own system font.

body       { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.serif     { font-family: ui-serif, Georgia, serif; }
.rounded   { font-family: ui-rounded, system-ui, sans-serif; }
code, pre  { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

Licensing

Apple offers the SF and New York font files for download to its developer community so designers can build accurate mockups. The licence is tied to designing and developing for Apple platforms, so read it before using the fonts in print, branding or on other platforms. In shipping apps you never need the files: the system already has them.

Before San Francisco

The original iPhone used Helvetica for its interface, later releases moved to Helvetica Neue, and iOS 9 introduced San Francisco. Browse the full list of built-in iOS fonts to see every family that shipped alongside them.

Frequently asked questions