Type Scale Generator
The Type Scale Generator calculates a modular typography scale from a base font size and a ratio, from Minor Second (1.067) to the Golden Ratio (1.618), and outputs nine sizes as CSS custom properties.
About this tool
The Type Scale Generator calculates a modular typography scale from a base font size and a ratio, from Minor Second (1.067) to the Golden Ratio (1.618), and outputs nine sizes as CSS custom properties.
How to use it
- Enter a base font size in pixels (16 px is the browser default).
- Choose a scale ratio, such as Major Third (1.25).
- Pick the output unit: rem, px or em.
- Click Copy CSS Variables to use the sizes from --xs to --4xl.
Good to know
- Each step in a modular scale multiplies the previous size by the same ratio.
- The generator produces nine steps: two below the base, the base, and six above it.
- Smaller ratios (1.067–1.2) suit dense interfaces; larger ratios (1.333–1.618) suit editorial pages with big headings.
- rem values are calculated relative to a 16 px root font size.
- Using rem lets text scale with the user’s browser font-size setting.
Runs entirely in your browser — nothing you enter is uploaded or stored.
Frequently asked questions
What is a modular type scale?
It is a set of font sizes where each size is the previous one multiplied by a fixed ratio, which keeps headings and body text visually related.
Which type scale ratio should I use?
Major Third (1.25) and Perfect Fourth (1.333) are popular all-rounders. Use a smaller ratio for apps and dashboards and a larger one for landing pages and blogs.
Should font sizes be in rem or px?
rem is generally recommended because it respects the user’s preferred browser font size, which improves accessibility.
What base font size should I use?
16 px is the standard browser default and a good base for body text; many sites use 16–18 px for comfortable reading.