'%20stroke='%23E0E0E0'%20stroke-width='2'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_2682_149131'%20x1='7'%20y1='4'%20x2='23.0784'%20y2='26.6541'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%233A3AEA'/%3e%3cstop%20offset='0.592633'%20stop-color='%23DF13F9'/%3e%3cstop%20offset='0.763157'%20stop-color='%23F0558E'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e)
Type scale
A type scale isn’t a list of hand-picked sizes — it’s a formula. A base size and two ratios, stepped up and down, generate every size in the system: a text ratio for labels, body and titles, a display ratio for headlines and display. Change one and the whole ladder re-derives together.
Base size
The anchor — usually body text. Every other size is derived from it, per breakpoint.
Two ratios
The text ratio steps from the base to title large; the display ratio continues from there through headline and display. One ratio steep enough for headlines would shrink labels below legibility.
Bounds
No style goes below 11px, body medium stays at least 14px on phones and 16px on laptops, and display large stops at each device’s maximum.
size(step) = size(2) × displaystep − 2, above itCurrent example: 16 × 1.250² = 25px for title large, and × 1.2505 = 76px for display large.
Choosing the ratios
A small ratio keeps sizes close together — good for dense interfaces with many text levels. A large ratio spreads them apart for dramatic, editorial contrast. The text ratio stays between 1.067 and 1.25 so labels stay legible; the display ratio may go up to 1.5 for headlines that leap.
1.067Highly dense UIs with many text levels — data-heavy dashboards, admin tools · Text and display1.125Dense product interfaces — SaaS apps, complex forms, analytics · Text and display1.200General product UIs — most apps with moderate content density · Text and display1.250Balanced interfaces with clear hierarchy — content apps, mobile · Text and display1.333Content-first layouts — blogs, documentation, editorial · Display1.414Marketing and landing pages with strong visual contrast · Display1.500Expressive layouts — brand sites, portfolios · Display1.618High-contrast visual statements — hero-heavy landing pages, luxury brands · Neither16px base · text 1.250 · display 1.250
step 776pxdisplay Lstep 661pxdisplay Mstep 549pxdisplay Sstep 439pxheadline Lstep 331pxheadline Mstep 225pxheadline S · title Lstep 120pxtitle M · body Lbase16pxtitle S · body M · label Lstep -113pxbody S · label Mstep -211pxlabel STwo ratios, many base sizes
Responsive typography adds a single move: keep the ratios and set the base size per screen, so the whole scale grows or shrinks together while hierarchy stays intact. Devices are held at different distances and offer different column widths; the base should reflect how each is actually used. Each device also caps display large; where the display ratio would pass the cap, that device uses the largest display ratio that reaches it.
Kept across every breakpoint, so the jump from Body to Headline to Display stays proportional — until display large reaches a device’s cap.
A smaller phone base pulls the whole scale down; a larger desktop base pushes it up.
Worked example: Display L sits five display steps above title large. Laptop: 25px × 1.2505 = 76px. Mobile: 22px × 1.2115 = 57px, with the display ratio reduced to reach the 57px cap.