Build a type scale and see it on a real layout
Set heading and body sizes independently and get a full h1-h6, lead, body and small ramp - shown as a size ladder and inside a live Blog/Editorial layout.
Slow, deliberate craft is quietly becoming the loudest trend in the room
A conversation about restraint, texture, and why the best layouts are the ones you stop noticing.
“Good structure is invisible until you take it away.”
What a type scale is and why it matters
A type scale is a set of font sizes that grow by a fixed ratio, so every level of a page - headline, subhead, body, caption - relates to the others by design instead of by guesswork. Sizes picked one by one tend to drift into near-duplicates that blur the hierarchy; a scale keeps the steps distinct and the rhythm consistent.
This tool builds the scale from two independent anchors, heading and body, each with its own size, ratio, weight and line height, and shows the result twice: as a plain ladder with rem, px and pt values, and inside a live Blog/Editorial page that uses the same heading and body fonts you picked in the font panel.
Want to see your colors on full page layouts? Open Explore Want to test your palette on buttons, forms and alerts? Open Elements Want the full guide to ratios and sizes? Read the type scale guideFrequently asked questions
What is a type scale?
A sequence of font sizes generated from a base size and a fixed ratio, used for headings, body text and small text so the hierarchy of a page feels consistent.
How do the heading and body settings work?
Heading and body each have their own font size, scale ratio, weight and line height, so a large display heading can sit above modest body text without one setting dragging the other along.
Which sizes does it generate?
The ladder lists h1 to h6, then body large, body small, label and caption, each with rem, px and pt values you can carry into your CSS.
Can I try the scale with my own text?
Yes. The ladder has a test-sentence field - type your own headline or sentence and every level of the scale re-renders with it.
Where do the fonts come from?
The heading and body fonts are the same ones you pick in the font panel at the bottom of the tool, so changing a font there updates the scale preview immediately.
Which layouts can I preview the scale in?
An Editorial layout or a Blog Platform layout. The Editorial preview always reacts to your scale settings, while the Blog Platform preview reacts to them with Pro.