06 / Typography
Type Scale workshop.
Find the rhythm between your headings and body text. Preview, refine, and take the CSS.
--t-549.6 pxGood type makes room for meaning.
--t-440.2 pxGood type makes room for meaning.
--t-332.5 pxGood type makes room for meaning.
--t-226.3 pxGood type makes room for meaning.
--t-121.3 pxGood type makes room for meaning.
--t-017.3 pxGood type makes room for meaning.
--t--114.0 pxGood type makes room for meaning.
--t--211.4 pxGood type makes room for meaning.
What the chat window cannot finish.
Set the measure first, then the ratio, then read the result at real size. Exports fluid `clamp()` declarations that interpolate against the viewport while the measure stays fixed — the two concerns most fluid type systems conflate.
An assistant will generate a scale. It cannot show it to you at size, in your typeface, against a real measure — and typography is judged by looking, not by reading numbers.
The clamp arithmetic is also fiddly: solving for the slope and intercept between two viewport widths is the sort of thing that is right or wrong, not approximately right.
Working values
- Measure, prose
- 60–75 characters; 68ch is a safe default
- Leading at 60ch
- ≈ 1.5
- Leading at 75ch
- ≈ 1.7
- Minor third
- 1.200 — dense UI, documentation
- Major third
- 1.250 — general purpose
- Perfect fourth
- 1.333 — editorial
- Golden ratio
- 1.618 — display-led, few levels
- px → rem
- Divide by 16 at default root size
These constants are published under CC BY 4.0. Quote them, cite them, put them in your own documentation — attribution to Original Design Studio is the only condition.
The principles behind what this tool tells you.
What ratio should I use?
1.25 unless you have a reason. Denser interfaces want 1.2; editorial layouts can carry 1.333. Ratios above 1.5 produce beautiful specimens and very few usable intermediate sizes.
How do I convert px to rem?
Divide by 16, the default root font size. 24px is 1.5rem. Using rem means the scale respects a user's browser font-size preference, which px does not.
Why clamp() rather than breakpoints?
Clamp interpolates continuously against the viewport, so type is correct at every width rather than only at the widths you happened to test. Set the minimum and maximum and the middle takes care of itself.
Next tool
07 — Bitrate & File Size
Want this run across your whole product?
An audit scores what you have shipped against all ten disciplines — tested with assistive technology and on real hardware — and returns a prioritised plan.