Type Scale Generator
Build a modular type scale from a base size and ratio — free, with a live preview and CSS-variable, rem and Tailwind output. 100% in your browser.
100% private — runs entirely in your browser. Nothing you enter is uploaded or logged.
A modular scale multiplies (or divides) a base size by a consistent ratio for harmonious type. rem values assume a 16px root. Generated locally — nothing is uploaded.
How to use the Type Scale Generator
- Set your base font-size and scale ratio.
- Choose how many steps up and down.
- Preview the sizes live.
- Copy the CSS variables, rem list or Tailwind config.
What you can use it for
- Create a harmonious type scale for a site
- Export font sizes as CSS custom properties
- Build a Tailwind fontSize config
- Experiment with modular-scale ratios
More free tools
Styling a website?
Generate shadows, gradients, layouts and effects with our free CSS tools — copy the code and go.
Frequently asked questions
What is a modular type scale?
A set of font sizes created by repeatedly multiplying a base size by a fixed ratio (like 1.25), giving harmonious, consistent typography.
What ratio should I use?
1.2 (minor third) and 1.25 (major third) are safe for body-led sites; larger ratios like 1.5 or the golden ratio (1.618) suit bold, display-heavy designs.
How do I export the scale to CSS?
Copy the CSS-variables output and paste it into your stylesheet — or use the Tailwind config output for a Tailwind project.
Why are the sizes in rem?
rem values scale with the user's browser font-size for accessibility; the tool shows both rem and px (rem assumes a 16px root).
How many steps should a scale have?
Enough to cover body, headings and small print — commonly a few steps up and one or two down from the base.