tool · one of 51 Pro scale export
Type scale
What font sizes should my headings be, on every screen?
A type scale picked for a laptop is either shouting on a phone or whispering on a wide screen. This takes a base size and a ratio for a small screen and another pair for a large one, and interpolates every step between them with clamp(), so the headings grow with the viewport and stay in proportion. Each step gets a line height that tightens as it grows, and the specimen resizes with a viewport slider so the in-between widths are seen too.
Reach it Press ⌘ + K on any tab and type type scale. Ctrl + K on Windows and Linux
in the panel · this one is Pro
What this actually is
a fluid modular type scale with a live specimen and exportSetting up the type of a new site or design system, replacing a list of font sizes somebody picked one at a time, or moving a scale into Tailwind v4's theme. The eight ratios are the musical intervals type scales are conventionally built on.
Asked about this tool
3 of themWhy two ratios rather than one?
A small screen cannot carry the same contrast between body and heading that a wide one can. A gentler ratio on a phone and a bolder one on a desktop keeps the hierarchy without a 64px heading on a 375px screen.
Does clamp() respect a reader's font-size setting?
The sizes are written in rem with a viewport term in the middle, so a reader who raises the browser's default text size still gets larger text at every width.
Can I see my own words in it?
Yes. Type into the sample text field and the specimen uses it for every step, in sans, serif or mono.
how to use type scale
- Open Type scale and set a base size and ratio for small and large screens.
- Pick the typeface and type your own sample text into the specimen.
- Drag the preview viewport to see every step between the two widths.
- Export it as CSS custom properties, a Tailwind v4 theme or JSON.
96 of these · no host permissions · three free audits