Type Scale Generator (Font Size System)
Build a heading and body font-size system from a base size and ratio, with line heights, a live text preview and CSS variables to copy
Loading the tool…
Builds the font sizes for headings, body text and captions from one base size and one ratio, so the sizes on a page relate to each other. Use it when starting a website, an app screen or a document template.
How to use
- Enter the "Base size" of your body text in px and pick a "Ratio"; "Custom" accepts any value from 1.05 to 2.
- Under "Rounding", keep decimals, round to whole px, or snap sizes to a "4 px grid".
- Set "Line height": "Tighter for headings" shrinks the multiplier for large sizes; "Same everywhere" uses one value.
- Type your own "Preview text" and switch the "Preview font" to see each step at its real size.
- Press "Copy CSS variables", "Copy element CSS" or "Copy JSON".
How it works
- Size of step n = base × ratio to the power n. Steps run from −2 (xs) to +6 (5xl); step 0 is the body size (p), steps 1 to 6 map to h6 down to h1.
- rem is the px value divided by the base size; pt = px × 0.75 (96 px per inch).
- With "Tighter for headings" the multiplier falls in a straight line from the "Body line height" at the base size to the "Heading line height" at three times the base size. "4 px grid" also rounds the line box to a multiple of 4 px.
- Settings are kept in this browser for the next visit.
Questions and answers
- Which ratio should I use for a website?
- 1.2 and 1.25 give moderate headings that suit long articles; 1.333 and above give large, poster-like headings. Small screens usually look better with a smaller ratio.
- What font size should body text be?
- 16 px is the browser default and a common start; 17 to 18 px is used for long reading text. The rest of the scale follows the base you enter.
- How do I convert the sizes to rem?
- The table shows rem next to px. Setting html to the base size in px, as the copied element CSS does, makes 1rem equal to the base.
- What line height should headings have?
- Body text usually sits around 1.5 and large headings around 1.1 to 1.25, so wrapped heading lines do not leave big gaps. The automatic mode applies that change.