Type scale generator
A modular type scale from a base size and ratio, as CSS variables.
FreeRuns in your browserNo signupUpdated 2026-10-29
Smaller ratios suit dense interfaces; 1.25 and above suit marketing pages with big headings.
Scale
:root {
--text-ratio: 1.25;
--text-xs: 0.64rem; /* 10.24px */
--text-sm: 0.8rem; /* 12.80px */
--text-base: 1rem; /* 16.00px */
--text-lg: 1.25rem; /* 20.00px */
--text-xl: 1.563rem; /* 25.00px */
--text-2xl: 1.953rem; /* 31.25px */
--text-3xl: 2.441rem; /* 39.06px */
--text-4xl: 3.052rem; /* 48.83px */
}About this tool
How it works and how to read the result.
Need this done for you?
Website design & development
Company websites designed and built to win trust and enquiries.
See the serviceWhat it does
A type scale generator gives you a set of font sizes that relate to each other by a fixed ratio, so headings and body text look like they belong together. Choose a base size and one of the classic ratios, such as a major third or a perfect fourth, and the scale is built up and down from the base. Each step is previewed with your own sample text and written out as CSS custom properties in rem.
How to use it
- Enter your body text size as the base, usually 16 or 18px.
- Pick a ratio from the list, or type your own in the custom ratio field.
- Set how many steps you want above and below the base.
- Type a real heading from your site into the sample box to see it at every size.
- Copy the CSS variables into your stylesheet or Tailwind theme.
How to read the result
With a 16px base and a major third ratio of 1.25, each step is the one below multiplied by 1.25. Going up: 20px, 25px, 31.3px, 39.1px and 48.8px. Going down: 12.8px and 10.2px. The CSS names them --text-lg to --text-4xl above the base and --text-sm and --text-xs below it, with values in rem, so --text-xl is 1.563rem.
In practice you would use base for body copy, sm for captions, lg or xl for subheadings, and 2xl to 4xl for page and section titles. The 10.2px step is too small for anything people need to read; keep it for legal small print, if you use it at all.
A smaller ratio such as 1.125 puts the steps closer together, which suits dashboards and apps with many levels of information. A larger one such as 1.5 jumps quickly and suits marketing pages with one big headline. If the top steps look huge on phones, make them fluid with clamp() rather than shrinking the ratio for everything.
Turn the top steps into fluid sizes with the fluid typography calculator. For a complete design system, see our website design and development service.
Questions
Frequently asked.
What is a modular type scale?
A set of font sizes where each size is the one below multiplied by the same number. The fixed ratio gives the sizes a consistent rhythm, the way musical intervals do, which is where names like major third and perfect fourth come from. It saves you picking every heading size by eye.
Which ratio should I choose?
For content sites with a few heading levels, 1.2 to 1.333 is a safe range. Dense interfaces with many levels look better at 1.125 or 1.067, where the steps are closer. Display-heavy landing pages can go to 1.5 or the golden ratio, but the top steps get very large quickly.
Your next move
Like what you see? Tell us about it.
A process that takes too long, a website that undersells you, or an idea ready to take shape. Tell us where you are and we will suggest a useful next step.
India · Working with clients worldwide