How to use the Type Scale Generator
- Choose fixed or fluid. Fixed sizes gives one size per step. Fluid (clamp) gives each step a small-screen and a large-screen size and lets the browser glide between them.
- Set the base and the ratio. The base is your body text, usually 16 px. Pick a Ratio from the list (each is named after a musical interval) or choose Custom… and type your own. In fluid mode, set a base size and a ratio for both the small and the large viewport.
- Decide how many steps. Steps up are headings and display sizes; Steps down are captions and fine print. The specimen shows every step with its size in px and rem and a suggested line height.
- Fit it to your project. Choose rem or px output, step names (
--step-1) or T-shirt names (--text-lg), and tick Snap line heights to a 4 px grid if your layout uses one. Try the scale in Inter, Fraunces or Space Grotesk, and type your longest real heading into Preview text. - Export. Export as CSS custom properties, CSS with utility classes, SCSS variables, a Tailwind
fontSizeblock or design-token JSON. Copy code, Download .css (the button’s label follows the format you chose), or Share scale to keep every setting in a link.
Why sizes from a ratio look calmer
Pick heading sizes one at a time and you end up with 17, 22, 26, 30 and 41 px: each fine alone, unrelated as a set. Multiply by the same ratio at every step and each size relates to its neighbors the way notes in a chord do. That analogy is where the names come from: a perfect fourth is 4:3, a perfect fifth 3:2, an octave 2:1. The idea was popularized on the web by Tim Brown’s modular scale.
The ratio decides the character of the whole page. Small ratios such as the minor second (1.067) or major second (1.125) give quiet, closely spaced sizes that suit dense interfaces, dashboards and long documents. The major third (1.25) and perfect fourth (1.333) are the workhorses for portfolios, blogs and shops. The perfect fifth and the golden ratio produce dramatic jumps that belong on posters, landing pages and editorial spreads with plenty of room.
Five steps up from a 16 px base shows the difference clearly:
| Ratio | −1 | +1 | +2 | +3 | +4 | +5 |
|---|---|---|---|---|---|---|
| Minor second, 1.067 | 15 | 17.07 | 18.2 | 19.42 | 20.71 | 22.09 |
| Major second, 1.125 | 14.22 | 18 | 20.25 | 22.78 | 25.63 | 28.83 |
| Minor third, 1.2 | 13.33 | 19.2 | 23.04 | 27.65 | 33.18 | 39.81 |
| Major third, 1.25 | 12.8 | 20 | 25 | 31.25 | 39.06 | 48.83 |
| Perfect fourth, 1.333 | 12 | 21.33 | 28.44 | 37.93 | 50.57 | 67.42 |
| Perfect fifth, 1.5 | 10.67 | 24 | 36 | 54 | 81 | 121.5 |
| Golden ratio, 1.618 | 9.89 | 25.89 | 41.89 | 67.78 | 109.67 | 177.44 |
A 177 px headline is magnificent on a gallery poster and absurd on a phone, and that tension is exactly what fluid mode resolves.
How the fluid clamp() values are worked out
Each step gets two sizes: one at your smallest viewport and one at your largest. Between them the size grows in a straight line, which CSS expresses as clamp(minimum, intercept + slope × viewport, maximum).
Take the defaults: a 16 px base on a 360 px screen growing to 19 px at 1280 px. The slope is 3 px over 920 px of width, 0.00326 px per pixel of viewport, which is 0.3261vw. Projected back to a zero-width screen, the line starts at 16 − 0.00326 × 360 = 14.83 px, or 0.9266rem. So the base step becomes clamp(1rem, 0.9266rem + 0.3261vw, 1.1875rem), and on an 820 px tablet it renders at 17.5 px.
Every other step does the same with its own pair of sizes. Because the defaults use a minor third (1.2) on small screens and a perfect fourth (1.333) on large ones, the headings grow faster than the body text: step 5 runs from 39.81 px to 80.07 px. Drag Preview at viewport width to watch the whole scale move.
Keeping a rem term in the middle value matters for accessibility. A size set only in vw ignores the reader’s browser font-size setting. A rule of thumb from accessibility testing is to keep each step’s maximum at or below 2.5 times its minimum, so browser zoom can still double the text.
Line heights that follow the size
Big type needs proportionally less leading than body text. The suggestions use 1 + 0.5 × √(16 ÷ size), clamped between 1.1 and 1.7: 1.5 for 16 px body text, 1.29 for a 48.83 px heading and 1.2 at 96 px. With Snap line heights to a 4 px grid on, each line height is rounded up to the next multiple of 4 px instead: 20 px text gets a 32 px line (1.6) and 25 px text a 36 px line (1.44).
Tips from practice
Test the longest heading, not the prettiest. Type the real worst case into Preview text: a product name, a long exhibition title. If the top step breaks into three lines on a phone, lower the small-screen ratio rather than the base.
Use fewer steps than you generate. Most sites need body, one or two step-downs and three or four headings. Unused steps in your CSS cost nothing, but unused sizes in a design invite inconsistency.
Don’t let fine print fall below 12 px. Two steps down on a large ratio gets small fast: at 1.5 it’s 7.11 px. Captions and legal text still need to be read.
Choose fonts and scale together. Fonts with a large x-height look bigger at the same pixel size, so a scale tuned for one family can feel off in another. Settle the families in the Font Pairing Generator, then come back and adjust the ratio.