In the world of typography, the most successful typefaces are often the ones users never notice. Apple’s SF Pro-Regular (part of the San Francisco family) is the quintessential example. It is the default system font on every iPhone, iPad, Mac, and Apple Watch running modern OS versions. Its job is not to dazzle, but to disappear—to deliver information with absolute clarity, neutrality, and legibility across a dizzying array of screen sizes and resolutions.
SF Pro-Regular is spaced looser than traditional print fonts. This is deliberate: sf pro-regular font
However, this wide spacing makes SF Pro-Regular a poor choice for print or editorial design where dense, elegant setting is desired. It looks awkward in narrow columns or on paper.
SF Pro (San Francisco) is Apple’s system typeface used across iOS, macOS, watchOS, and tvOS. The Regular weight is the backbone of the family: neutral, highly legible, and designed to work well at both UI text sizes and larger display uses. This post explains what makes SF Pro Regular useful, how to use it effectively, and practical tips for typography in digital products. In the world of typography, the most successful
Apple apps use 11 distinct text styles: Large Title, Title 1, Title 2, Headline, Body, Callout, Subhead, Footnote, Caption 1, Caption 2. For a "Body" text (default Regular weight), use 17pt with a leading (line height) of 22pt.
You can evoke the look of SF Pro-Regular on any website without downloading fonts, using the native system-ui stack. However, this wide spacing makes SF Pro-Regular a
body
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-weight: 400; /* Maps to SF Pro-Regular on Apple devices */
font-style: normal;
On an iPhone or Mac, this CSS renders exactly the same glyphs as SF Pro-Regular. On Windows, it falls back to Segoe UI; on Android, to Roboto. This is the gold standard for responsive typography.