Typography
The system font and apple.com's type scale. Every size carries its own line height, tracking and weight.
Typefaces
The system font. SF Pro on Apple devices, Helvetica elsewhere. No web fonts to load.
font-sans-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif
Body text.
font-heading-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif
Headings. Prefers the Display cut.
font-monoui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace
Code.
Type scale
From the home page hero down to fine print. Utilities set size, line height, tracking and weight together.
Sell the work, not the hours.
text-hero80px / 1.05 / -0.015em / 600
Home page hero.
Sell the work, not the hours.
text-display64px / 1.0625 / -0.009em / 600
Hero on medium screens, case study titles.
Sell the work, not the hours.
text-headline56px / 1.07 / -0.005em / 600
Section headlines.
Sell the work, not the hours.
text-title-148px / 1.08 / -0.003em / 600
Sell the work, not the hours.
text-title-240px / 1.1 / 0em / 600
Sell the work, not the hours.
text-title-332px / 1.125 / 0.004em / 600
Sell the work, not the hours.
text-title-428px / 1.14 / 0.007em / 600
Sell the work, not the hours.
text-title-524px / 1.17 / 0.009em / 600
Card titles.
Sell the work, not the hours.
text-intro21px / 1.381 / 0.011em / 400
Lead paragraphs under headlines.
Sell the work, not the hours.
text-body17px / 1.47 / -0.022em / 400
Default text.
Sell the work, not the hours.
text-callout14px / 1.43 / -0.016em / 400
Small UI text: chips, captions, buttons in dense places.
Sell the work, not the hours.
text-footnote12px / 1.33 / -0.01em / 400
Fine print and reassurance lines.
font-regular400
font-semibold600