Type Scale Generator
A type scale generator that measures your font instead of guessing. Load a typeface, say where people will read it, and it works out body size, line height, tracking and line length from the font's real x-height and character widths. For designers and front-end developers building a type system.
| Step | Size | Fluid | Line height | Tracking | Caps | Measure | x-height |
|---|
Spacing, locked to one body line
| Token | Pixels | Rem | Rhythm | Use |
|---|
What it produced
How to use
- Upload a font file, load one from Google Fonts, or start from a stack you already ship.
- Pick the purpose and the reading distance: phone, laptop, monitor or a screen across the room.
- Set the ratio and how many steps you need above and below the body size.
- Check the specimen, the scale table and the metrics. Switch to Paper to see it on a light ground.
- Copy the CSS, Tailwind, JSON or DESIGN.md, or download the files.
Questions
Why measure the font instead of using a fixed ratio?
Two fonts set at 16px can look very different in size because their x-heights differ. Measuring the x-height and the average character width lets the tool choose a body size and a line length that read the same from one typeface to the next.
Is my font uploaded anywhere?
No. The file is read in your browser and never leaves your computer.
What can I export?
CSS custom properties, a Tailwind v4 theme, JSON design tokens, a DESIGN.md summary and a cap-trim stylesheet.
Is it free?
Yes. If it saves you time, you can support it with a donation.