Type Scale Generator
Generate a modular type scale from a base size and ratio.
A ratio gives you a reason for every size
A modular scale multiplies a base size by a fixed ratio repeatedly, producing sizes that relate to each other mathematically instead of being chosen ad hoc. The practical benefit is not mystical harmony — it is that you stop inventing a new font size every time a component needs one. Six or seven steps from a single ratio covers almost any interface, and the constraint itself is what creates visual consistency.
Common ratios run from 1.125 (major second) through 1.25 (major third) to 1.5 and 1.618. Smaller ratios suit dense, information-heavy interfaces where many levels must fit close together; larger ratios suit editorial layouts with few levels and strong contrast between them.
Big ratios break down on small screens
A 1.618 scale that looks striking on a desktop hero produces an unusable 60px heading on a 360px-wide phone. The usual fix is to reduce the ratio at smaller breakpoints, or to use CSS clamp() with a viewport-relative middle term so sizes interpolate smoothly. Either way the base size should generally stay put — 16px is the browser default and the size most reading research supports for body copy — while the upper steps compress.
Line height and measure move with size
A scale of font sizes alone is half a system. Line height should decrease as size increases: body text at 1.5 to 1.6 is comfortable, while a large heading at the same multiplier looks unacceptably loose and usually wants 1.1 to 1.25. Line length matters just as much — 45 to 75 characters per line is the well-established comfortable range, and a scale applied without constraining measure produces headings and paragraphs that run the full width of a wide screen and become hard to track from line end to next line start.
Rounding is worth attention too. Raw scale output produces values like 25.63px; rounding to whole pixels or to a 4px grid aligns type with your spacing system and avoids subpixel inconsistency.
How to use it
- Set a base size — 16px is a sound default for body text.
- Choose a ratio: smaller for dense UI, larger for editorial layouts.
- Round the output to whole pixels or your spacing grid before shipping it.
- Pair each size with a line height and cap your text container at about 70 characters.
Questions worth asking
Which ratio should I pick?
Around 1.2 to 1.25 works well for dense application interfaces where many levels sit close together. Larger ratios such as 1.5 or 1.618 suit editorial pages with few levels and dramatic contrast between them.
Should I use the same scale on mobile?
Usually not at the top end. A large ratio produces headings far too big for a narrow screen, so either reduce the ratio at smaller breakpoints or use clamp() to interpolate between a mobile and desktop size.
Should I use px or rem?
rem for anything the user might need to scale — it respects the browser font-size setting, which some users rely on. Fixing type in px overrides that preference and is an accessibility problem.
What line height goes with each size?
Line height should fall as size rises. Body text is comfortable around 1.5–1.6, while large headings usually want 1.1–1.25. Applying one multiplier across the whole scale makes headings look loose.
Disclaimer: Generated colours, scales, and CSS are a starting point for your own design system. Always verify contrast, rendering, and behaviour on real devices — passing an automated check is not the same as meeting your accessibility obligations.