Type Scale Generator
Pick a base size and a ratio and get a ladder of sizes, each one a fixed step bigger than the last. Copy them as rem values in CSS variables.
Worked examples
Major third from a 16px base
Base 16px, ratio 1.25, one step down and three up
12.8, 16, 20, 25 and 31.25 pixels, or 0.8, 1, 1.25, 1.5625 and 1.9531 rem
Each size is the previous one multiplied by 1.25.
About Type Scale Generator
A type scale is a set of font sizes that grow by the same ratio from one step to the next. Because the sizes are related, headings, subheadings and body text look as though they belong together. The idea comes from musical intervals, and the ratios still carry their musical names, such as major third and perfect fifth.
Enter a base size, choose a ratio and say how many steps you need above and below the base. The table shows each size in pixels and rem with a line of sample text at that size, and the CSS variables are ready to copy. A custom ratio is available if none of the standard ones suits you.
How to use Type Scale Generator
- Enter the base size, usually the body text size.
- Choose a ratio, or type your own.
- Set how many steps up and down you need.
- Copy the CSS variables.
Common uses
- Setting heading sizes for a new site or design system
- Checking that sizes in a design are related
- Creating a scale for documentation or print-style layouts
- Comparing how different ratios feel on the same text
Frequently asked questions
What ratio should I choose?
Small ratios such as 1.125 and 1.2 give tight scales for dense interfaces. A major third at 1.25 suits most sites. Large ratios such as 1.5 and 1.618 give dramatic headings and suit posters and landing pages.
How are the smaller sizes found?
By dividing the base by the ratio once for each step down, so the base of 16 with a ratio of 1.25 gives 12.8 one step down.
What is the root size for rem?
It is the font size that 1rem stands for, normally 16 pixels in browsers. Each rem value is the pixel size divided by it.
Will the largest sizes fit on a phone?
Not always. Big steps grow quickly, so on small screens use a fluid size with clamp, or choose a smaller ratio for narrow windows.