Type Scale Generator
Builds a modular type and spacing scale from a base size and ratio, exported as CSS or tokens.
Builds a modular type scale from a base size and a ratio, and shows each step at its real size with the numbers that matter beside it: rem, line height, tracking and — the one that decides whether a size is usable for prose — how many characters fit on a line at your column width. It derives a spacing scale from the same ratio, snapped to a 4px grid.
Scale
Ratio: 1.25
Spacing from the same ratio
- space-14px
- space-24px
- space-38px
- space-48px
- space-58px
- space-612px
- space-716px
- space-820px
Snapped to a 4px grid — the grid nearly every design system already has, and a 13px gap next to a 12px one is noise.
Preview
The quick brown fox jumps over the lazy dog · 다람쥐 헌 쳇바퀴에 타고파
The quick brown fox jumps over the lazy dog · 다람쥐 헌 쳇바퀴에 타고파
The quick brown fox jumps over the lazy dog · 다람쥐 헌 쳇바퀴에 타고파
The quick brown fox jumps over the lazy dog · 다람쥐 헌 쳇바퀴에 타고파
The quick brown fox jumps over the lazy dog · 다람쥐 헌 쳇바퀴에 타고파
The quick brown fox jumps over the lazy dog · 다람쥐 헌 쳇바퀴에 타고파
The quick brown fox jumps over the lazy dog · 다람쥐 헌 쳇바퀴에 타고파
The quick brown fox jumps over the lazy dog · 다람쥐 헌 쳇바퀴에 타고파
The quick brown fox jumps over the lazy dog · 다람쥐 헌 쳇바퀴에 타고파
Green marks 45–75 characters per line — Bringhurst’s range for Latin text, which Hangul, being word-spaced, is nearer to than to full-width CJK.
Export
Want any one of these sizes to scale with the viewport instead of stepping? The fluid size calculator turns two of them into a single clamp().
How to use it
Set the base size
The body text size, almost always 16px. Everything else is this multiplied or divided by the ratio, so getting it right first saves re-picking the ratio later.
Choose the ratio — this is the decision
A major second (1.125) is the safe interface default: eight steps still land in a sensible range. A perfect fourth (1.333) is editorial — three steps up from 16px is already 38px. The golden ratio is famous and too steep for interface text. Each preset says what it is for; pick by the range you need, not by the name.
Decide how many steps, and whether to round
Steps down are for captions and labels; steps up for headings. Exact keeps the geometry and gives you fractional pixels; 1px or 2px rounding gives numbers a person can hold in their head and breaks the ratio slightly. Rounding is the usual choice, and the exact value is still shown beside each rounded one.
Set the column width and read the character counts
Type the width of the column this text actually sits in. The rightmost figure on each row is characters per line at that width, and it turns green between 45 and 75 — the range with real evidence behind it for running prose. A size that reads fine in isolation and gives 110 characters per line is the wrong size for body text.
Export the tokens
CSS variables, a Tailwind theme block, SCSS or JSON. The spacing scale goes out with it, so one paste covers both.
Common questions
Is the preview showing my actual font?
No — it renders in this page’s font. The sizes, line heights and tracking are real, but a different typeface has a different x-height, and x-height is what actually decides how large 16px looks. Treat the preview as a check on proportion, and confirm the base size in your own product.
Should I use the whole scale?
No, and generating eleven steps is not a reason to use eleven. Most interfaces need four or five sizes. The extra steps exist so you can see where the ratio goes, and so a rarely-needed size has a defined value rather than being invented on the spot.
Where do the line heights and tracking come from?
From a rule, not from your typeface: line height falls as the size grows, tracking tightens on the large steps and loosens slightly on the small ones. It is the conventional starting point and it is right often enough to be useful, but a condensed face or a Korean face with tall syllable blocks will want different numbers. Adjust after you look.
Why is the spacing scale snapped to 4px when the type scale is not?
Because the eye reads them differently. A 17px heading next to an 18px one is a hierarchy; a 13px gap next to a 12px one is noise, and it is the kind of noise that survives review and then gets copied. Nearly every design system already has a 4px grid, so the spacing scale meets it there.
Feed it from
Fluid Size Calculator
Computes a clamp() expression that scales a size smoothly between two viewport widths.
Font Pairing
Suggests heading and body font pairs from system font stacks, previewed with your own Korean and English text, and hands you the CSS.
Colour Picker
Picks a colour on an OKLCH field, with a screen eyedropper or from an uploaded image, and copies it in any notation.
Colour Format Converter
Converts a colour between HEX, RGB, HSL, HWB, LAB, LCH and OKLCH and names the nearest known colour.
Next
These accept what this tool produces, so the result can go straight in.
Fluid Size Calculator
Computes a clamp() expression that scales a size smoothly between two viewport widths.
CSS Token Extractor
Pulls colours, spacings, radii and fonts out of a stylesheet and proposes a custom-property set.
Font Pairing
Suggests heading and body font pairs from system font stacks, previewed with your own Korean and English text, and hands you the CSS.
Colour Format Converter
Converts a colour between HEX, RGB, HSL, HWB, LAB, LCH and OKLCH and names the nearest known colour.
Colour Picker
Picks a colour on an OKLCH field, with a screen eyedropper or from an uploaded image, and copies it in any notation.
Contrast Checker
Scores a foreground and background pair against WCAG 2 and APCA and suggests the nearest passing colour.