ColorKitFree typography scale generator
A modular type scale you can actually look at
Pick a base size and one of ten intervals — minor second 1.067 through octave 2.000 — and this free generator lays out every step as live text at its true size, with the rem and px figures beside it. It needs no account and runs entirely in the browser, so you can iterate on a plane. The output is a ready-to-paste block of custom properties named --step--2 through --step-8, and switching on fluid mode turns each one into a clamp() that eases between your ratio at 1280px and a gentler ratio at 360px.
- 100% free
- No signup
- 10 ratios
- 13 steps max
- clamp() output
5
2
Press Ctrl+V anywhere on the page to drop in a base size, or any line of text to use as the specimen — no need to click the field first.
8 sizes · ratio 1.25 · 4.8× from smallest to largest
:root {
--step--2: 0.64rem;
--step--1: 0.8rem;
--step-0: 1rem;
--step-1: 1.25rem;
--step-2: 1.563rem;
--step-3: 1.953rem;
--step-4: 2.441rem;
--step-5: 3.052rem;
}Sizes are emitted in rem against a 16px root, so a reader who has set a larger default gets the whole scale enlarged rather than only the paragraphs.
How to build a type scale that survives contact with a phone
Three moves: set the base, look at the steps as text, then copy the custom properties.
Set the base and pick an interval
The base is the size your body copy will actually be — 16px is the browser default and a sensible starting point, 18px reads better on a long-form page. The ratio menu holds ten intervals borrowed from musical harmony, and the number beside each name is the multiplier used between neighboring steps. Anything from 1.01 to 3 can be typed in as a custom ratio if you are matching an existing design.
Judge the steps as text, not as figures
Each row renders your specimen line at that step's real size, so the question the tool answers is not what the numbers are but whether the hierarchy is visible. Replace the specimen with a heading you are actually going to ship — a five-word product name behaves nothing like a pangram. Drag the two range controls to add steps above and below until the largest and smallest sizes both have a job.
Take the custom properties, fluid if you need them
Copying writes out a :root declaration per step, named --step--4 through --step-8 according to how many steps you asked for, with rem values measured against a 16px root. Tick Fluid clamp() output and each step becomes a clamp() that interpolates between the ratio you chose and a gentler one at 360px, so a hero that works on a laptop does not blow out on a phone. Every clamp keeps a rem term in the middle argument, which is what lets browser zoom still do something.
Technical specifications
| Ratios built in | 10 named intervals from minor second 1.067 to octave 2.000, plus any custom ratio between 1.01 and 3 |
|---|---|
| Steps | Up to 8 above and 4 below the base — 13 sizes at full extension |
| Base size | 1 to 48 px. Larger values are clamped, because a base above 48px is a display size and belongs in the top of a scale rather than the middle |
| Output units | rem to 3 decimals with the px equivalent alongside, always against a 16px root; other roots are the px-to-rem tool's job |
| Property names | --step--4 through --step-8. Negative steps carry a double dash, which is a valid custom-property name and keeps the sort order honest |
| Fluid mode | clamp() interpolated between viewports of 360px and 1280px, with a rem term always present in the middle argument so text still responds to browser zoom |
| Specimen rendering | Live text in the page's own font stack at the real size, capped at 96px on screen so a step-8 heading does not push the layout sideways |
| Account needed | None. The generator is free, runs offline once loaded, and stores no scale |
Frequently asked questions
Which ratio should I choose?
Match the ratio to how many distinct sizes the interface actually needs. A dense product UI with six or seven levels wants 1.2 or 1.25, where the fourth step from 16px is 33.18px and still fits a table header; a marketing page with three levels can afford 1.414 or 1.5, where the same fourth step reaches 81px and earns the space. Choosing a big ratio and then not using the top of it is the common mistake — you end up with a scale whose middle is empty.
Why are the sizes given in rem rather than px?
Because a rem is relative to the root font size, which the reader controls. Roughly 3% of users change the browser default away from 16px, and a stylesheet written in px ignores them entirely; the same stylesheet in rem scales the whole scale together the moment the root moves. The px figure is printed beside each rem value here so you can still check a size against a design file, and the px to rem converter covers the arithmetic in the other direction.
My biggest heading overflows on a phone. What is the fix?
Use two ratios rather than one size — that is what the fluid output does. A scale is generated twice, once at your chosen ratio for 1280px and once at a gentler one for 360px, and each step is emitted as a clamp() that interpolates between them. Setting a single smaller size in a media query works too, but you then own a breakpoint for every step, and the clamp version stays smooth in the 400px of viewport where a media query is at its worst.
Do I have to use every step the scale produces?
No — a scale is a menu of permitted sizes, not a list of required ones. Most shipped interfaces use six or seven of the thirteen this tool can generate, and the value of the scale is that the sizes nobody used are also the sizes nobody can invent later. Keeping the unused steps in the :root block costs nothing: an unreferenced custom property does not render anything.
Where do the interval names come from?
From musical intervals, and the numbers are the real frequency ratios rather than a metaphor: a perfect fifth is 3:2, a perfect fourth 4:3, an octave 2:1. Robert Bringhurst set out the idea in The Elements of Typographic Style, and it spread through web design after Tim Brown's modular-scale work around 2011. The vocabulary is worth keeping because it makes the choice discussable — 'a fourth' communicates more than '1.333' in a design review.
Should I round 39.0625px to 39px?
Round it for the design file, not for the stylesheet. Browsers lay out on fractional pixels and then snap glyph rasterization to the device grid themselves, so shipping 2.441rem costs nothing and keeps the ratio exact all the way up the scale. Rounding each step to a whole pixel and then generating the next one from the rounded figure is what turns a 1.25 scale into an approximately-1.24 scale by step six.
About modular scales in type
A modular scale is a small set of sizes generated by repeatedly multiplying one base by one ratio, and its real benefit is subtraction rather than mathematics. A design system with 13 permitted sizes cannot accumulate the 40 slightly-different sizes that a codebase grows when every component picks its own; the constraint is the feature, exactly as a settled color palette is worth more than the freedom to pick any hex. The idea reached web work through Robert Bringhurst, who borrowed the harmonic intervals, and the ratios still carry their musical names.
What most generators get wrong is presenting the result as a column of numbers. Numbers hide the failure that matters: at a ratio of 1.067 the third and fourth steps from a 16px base are 19.44px and 20.74px, 1.3px apart, and no reader will ever perceive one as more important than the other. You cannot see that in a table and you cannot miss it when the two lines are rendered above each other, which is why every step here is set in live text with your own specimen in it. The same goes for the top of an aggressive scale — the 1.618 case is worth trying against a real heading, and the golden ratio calculator is the place to go when the same proportion has to govern columns and images too.
A scale is also only one of the three numbers a piece of type needs. The step tells you how big the text is; the leading has to come down as the step goes up, and tracking has to come down with it. Treating the scale as finished when the sizes are chosen is how a 48px heading ends up with body-copy leading and looks like a mistake nobody can name. If you are converting an existing set of sizes rather than generating a new one, the font size converter moves a single value between px, pt, em, rem and the CSS keywords, and px to rem handles a root size that is not 16px.
Where your scale is generated
Every number on this page is worked out by JavaScript running in the tab you are reading it in. Nothing you type, paste or open is uploaded, logged or kept, which is also why the tools carry on working after you disconnect from the network.