Type scale calculator
Set text and heading sizes with a consistent ratio instead of guesswork. Preview the scale with your own text and copy it as px, rem or fluid clamp() values that grow with the screen.
Free · No sign-up · Runs in your browser
Your files are never uploaded; everything runs in your browser.
How to use
- Enter the base font size (usually 16 px).
- Pick a ratio; the larger the ratio, the bigger the jump between headings.
- Try the scale by changing the preview text and typeface.
- Copy the values as CSS variables; turn on fluid mode if you like.
Highlights
- 9 preset ratios from minor second to golden ratio, plus a custom ratio.
- px and rem output.
- Fluid clamp() values that grow from mobile to desktop.
- Live preview with your own text.
Frequently asked questions
What is a type scale?
A type scale is a series of sizes made by multiplying a base font size by a fixed ratio. For example, a 16 px base and a 1.25 ratio give 16, 20, 25, 31.25… This gives a page a consistent hierarchy.
Which ratio should I choose?
Small ratios such as 1.125-1.2 suit dense interfaces and mobile; large ratios such as 1.333-1.618 suit editorial pages, posters and presentations.
What is fluid typography?
In fluid typography the font size grows smoothly with the screen width. CSS clamp() produces a size proportional to the viewport between a minimum and a maximum, without separate media queries.
Why use rem instead of px?
rem is based on the font size the user sets in the browser. When users with low vision enlarge text, sizes defined in rem scale up proportionally.
Need a professional design?
Get in touch for social media design, advertising visuals, posters, logos and brand identity projects.