How to use the type scale generator
- Enter the base size in pixels. Sixteen is the size browsers use for body text unless a page changes it.
- Pick a ratio, from a minor second (1.067) to the golden ratio (1.618), or enter your own.
- Set how many sizes you want above and below the base. Open More options if your root font size is not 16 px.
- Read the table of sizes in pixels and rem, with a name for each step, then copy it or download the CSV.
Formula
Size at step n = base x ratio^n
Rem = size in pixels / root font size
Steps above the base use n = 1, 2, 3 ...; steps below use n = -1, -2 ...
Each size is a fixed multiple of the one before it, which is why the result is called a modular scale. Sizes are rounded to two decimals in pixels and three in rem, and are computed from the base each time, not from the rounded size before it.
16 px at a ratio of 1.25 (a major third)
The scale from two steps down to six steps up is 10.24, 12.8, 16, 20, 25, 31.25, 39.06, 48.83 and 61.04 px, which is 0.64, 0.8, 1, 1.25, 1.563, 1.953, 2.441, 3.052 and 3.815 rem. Each size is 1.25 times the last.
A ratio of 1.5 on an 18 px base with an 18 px root gives 27 px (1.5 rem) one step up. The golden ratio, 1.618, from a 16 px base reaches 67.77 px by the third step, and a custom ratio of 1.3 reaches 27.04 px by the second.
Why use a scale at all
Choosing each font size by eye leads to many sizes that are almost, but not quite, the same. A modular scale limits you to a few related sizes whose steps feel even to the eye, in the same way a musical scale limits notes. A small ratio such as 1.125 or 1.2 makes subtle steps that suit dense interfaces, while a large one such as 1.5 or the golden ratio makes dramatic headings that suit a poster or a landing page.
To convert between pixels, rem, em and points, the CSS Unit Converter does the arithmetic. For color choices that go with your type, the Color Palette Generator builds matching palettes.
Check the result on a real page
Large ratios grow quickly. A ratio of 1.618 with six steps above a 16 px base reaches about 287 px, which is too big for a phone. Round the sizes you like, cap the largest headings with a smaller step or use a fluid size on small screens. Also check that body text stays readable and that your text has enough contrast with its background, which the Color Contrast Checker tests. The Aspect Ratio Calculator is useful when you size images in the same layout.
Assumptions and limits
- Root font size is 16 px unless you change it in More options.
- Sizes are rounded to two decimals in pixels and three in rem.
- The custom ratio must be greater than 1 and at most 10.
- Everything runs in your browser.
Frequently asked questions
What is a modular type scale?
A set of font sizes where each size is the one before it times a fixed ratio. It gives headings and text a consistent rhythm.
Which ratio should I choose?
Small ratios like 1.125 to 1.25 suit interfaces with lots of text. Larger ones like 1.5 or 1.618 give more dramatic headings. Try a few on a real page.
Why are the rem values different from the pixel values?
Rem is the size relative to the root font size. At the usual 16 px root, 20 px is 1.25 rem. If your root size differs, change it under More options.
Can I go below the base size?
Yes. Set the number of sizes below the base to get smaller steps for captions and notes, shown as negative steps.