Type Scale Generator
Build a modular type scale from a base size and a ratio, preview it, and copy it as CSS custom properties.
What this tool does
Pick the size your body text should be, choose a ratio, and get a whole set of sizes that belong together. That is all a modular scale is: one base size multiplied by the same ratio for each step up and divided by it for each step down. Using the same ratio everywhere is what makes the sizes read as a family instead of as numbers somebody picked one at a time. Every step is calculated straight from the base rather than from the size before it, so the far ends of the scale stay exact instead of drifting. You can see the whole scale at once in the preview and copy it as CSS custom properties, ready to paste into your stylesheet. Sizes come out in rem by default, divided by whatever root size you actually use rather than an assumed sixteen.
What you can use it for
- Set up heading and body sizes for a new design system.
- Replace a set of ad-hoc font sizes with a consistent scale.
- Compare how a tighter and a wider ratio feel before committing.
- Generate the CSS custom properties for your typography tokens.
How to use it
- Set your base size, usually your body text size.
- Choose a ratio, from a tight minor second to a dramatic golden ratio.
- Set how many steps you need above and below the base.
- Copy the CSS custom properties for your stylesheet.
Everything runs inside your browser. No file is uploaded to any server. See more tools in this field.
Related tools
DesignColor Contrast Checker (WCAG)
Check WCAG color contrast between text and background, with live previews, pass or fail grades and accessible color suggestions. In your browser.
CSS Box Shadow Generator
Build a CSS box-shadow with a live preview: set the offset, blur, spread, color and opacity, then copy the code. Free and in your browser.
Color Converter: HEX, RGB, HSL
Convert colors between HEX, RGB and HSL online. Paste any format and get the others instantly. Free, no upload and in your browser.
CSS Gradient Generator
Build CSS gradients online with a live preview: linear, radial and conic. Copy the code for your background, free and in your browser.
Frequently asked questions
Which ratio should I pick?
Smaller ratios give a gentle scale where sizes sit close together, which suits dense interfaces and long-form text. Larger ones give dramatic jumps that work for landing pages and editorial layouts. A major third is a comfortable default. The honest answer is to try two or three and look at them, which is what the preview is for.
What is the base size?
The size at step zero, which is almost always your body text. Everything else is derived from it, so it is the one number worth deciding deliberately. Sixteen pixels is the browser default and a sensible starting point.
Why does the rem output ask for a root size?
Because rem is relative to the root font size, and plenty of design systems change it from the browser default of sixteen. If yours does, a scale built on the assumption of sixteen would be wrong at every step. Setting it here means the rem values match what your CSS actually does.
Should I use px or rem?
Rem in most cases, because it respects the reader's browser font size setting, which matters for accessibility. Px is there for the situations where you need a fixed size regardless, and for reading the scale in concrete numbers while you design it.