Type Scales: Math Applied to Typography

A type scale is a set of font sizes related by a fixed ratio. Pick a base (commonly 16px), pick a ratio (commonly 1.25), and each step multiplies: 16 → 20 → 25 → 31.25 → 39.06 → 48.83. The result is a hierarchy that feels intentional rather than arbitrary, because the same ratios that produce harmonious musical intervals also produce harmonious typographic ones.

This tool generates a scale, previews it on sample text, and exports the values as CSS variables or a Tailwind config, so you skip the calculator step.

The Ratios

The names come from music theory (interval ratios), but the math works for any scaled set.

Why these specific ratios feel good

They're whole-number ratios of small integers (1.5 = 3:2, 1.333 = 4:3, 1.25 = 5:4) or famous irrationals (φ, √2). Human perception evolved to prefer them, most music, classical architecture, and visual art uses them. Typography follows.

Building a Scale

Pick:

1. Base size: usually 16px (1rem) for web. 18px for content-heavy sites. 14px for dense data tables.
2. Ratio: 1.25 default; 1.333 for content; 1.5+ for editorial.
3. Steps: how many sizes you need above and below base.

Example: 1.25 ratio, base 16px

Round or keep fractional?

Rounding to whole pixels: helps with crisp rendering at common sizes, but loses the precise mathematical relationship. Modern browsers handle fractional values well (especially at high-DPI). Recommend: round to 2 decimals in rem (avoid 6-decimal noise) but don't force whole pixels.

Naming

T-shirt names are flexible (Tailwind convention). Semantic names tie to content structure (Material Design). Pick one and stick with it.

Export Formats

CSS custom properties

Tailwind config

Sass variables

Line Heights

Line heights vary inversely with font size:

Larger text fills more horizontal space; doesn't need as much vertical breathing room. Small text is harder to read; needs more.

Setting both

Unitless vs numeric line-height

line-height: 1.5 (unitless) multiplies by element's font-size, scales correctly. line-height: 24px is absolute, doesn't scale. Use unitless.

Letter Spacing

Inverse of line-height: larger sizes can have tighter spacing; smaller sizes wider.

CSS custom properties

Fluid Typography with `clamp()`

Static type scales break on mobile (h1 too large) or desktop (h1 too small). clamp() solves it:

clamp(min, preferred, max), interpolates smoothly between min and max based on viewport width.

Generator formula

For a min size Min at viewport Vmin and max size Max at viewport Vmax:

There are calculators (utopia.fyi) for this; manual math gets tedious.

Why fluid type wins

• No media queries.
• No hard breakpoints in size (smooth interpolation).
• Mobile-first works automatically.
• Less code overall.

Trade: harder to read the CSS; designers must specify min/max instead of "20px at this breakpoint."

Common Mistakes

Using `px` for body text

Px overrides user accessibility settings. Some users set 20px default for readability; px-defined sites ignore them.

Too many sizes

A scale with 12+ sizes invites inconsistency. Pick 5–8. If you need more for a one-off, set inline rather than adding to the system.

Inconsistent ratios

Don't mix ratios within one scale. If using 1.25, don't add an arbitrary "this should be 23px", it breaks the mathematical relationship.

Display sizes too dramatic on mobile

A 1.5 ratio at base 16px gives h1 = ~80px. On mobile, that's screen-filling. Use fluid type or a separate mobile scale.

Forgetting line-height adjustment

Same line-height for body and display = display feels cramped (line-height too tight) or body too airy (line-height too loose). Vary inversely.

Letter-spacing for ALL CAPS body text

Body text in ALL CAPS at default letter-spacing reads as one blur. Always add tracking (letter-spacing: 0.05em) to all-caps to make individual letters distinguishable.

Practical Setup

CSS Variables file

Tailwind theme

Tailwind's font-size utility takes [size, { lineHeight }] tuples, pairs size with appropriate leading.

Material Design type scale (reference)

Material's 2014–2018 spec used 13 styles:

Headline 1-6, Subtitle 1-2, Body 1-2, Button, Caption, Overline.

More granular than most apps need, but solid as a reference for what professional type systems include.

Privacy

The generator is local math: base * ratio^step for each step, rendered as CSS / Tailwind / Sass text. Open DevTools Network during use: zero outbound requests. Type scale parameters aren't sensitive content, but the principle of "work locally unless you ask to upload" applies, there's no reason to send these values to a server. The tool runs in your browser.