font inspectorType scale calculator
Build a harmonious type scale. Set your base size and ratio, preview every step, and copy the CSS.
:root {
--text-0: 0.8000rem;
--text-1: 1.0000rem;
--text-2: 1.2500rem;
--text-3: 1.5625rem;
--text-4: 1.9531rem;
--text-5: 2.4414rem;
--text-6: 3.0518rem;
}How does a modular type scale work?
Each step multiplies your base font size by the selected ratio. With a 16px base and a 1.25 ratio, the first larger step is 20px. Use the scale as a starting point, then adjust for your content and screen sizes. The exported REM values use the root font size you enter.
Common ratios carry names borrowed from music. 1.125 is a major second, 1.2 a minor third, 1.25 a major third, 1.333 a perfect fourth, 1.5 a perfect fifth and 1.618 the golden ratio. Small ratios such as 1.125 or 1.2 suit dense interfaces and phone screens, where headings cannot be much larger than body text. Larger ratios such as 1.333 or 1.5 suit landing pages and editorial layouts with room for big headlines.
A scale is a starting point, not a rule. Round the results to whole pixels or tidy rem values, drop the steps you do not need, and check the largest sizes on a phone. Many sites use a smaller ratio on small screens and a larger one on wide screens, or let headings grow fluidly with the clamp() calculator.
What is the best type scale ratio?
There is no single best ratio. 1.2 to 1.25 works well for apps and long reading, and 1.333 or more gives the stronger contrast that landing pages want. Try your real headings before you decide.
What base font size should I use?
16px is the browser default and a sound base for body text. Set the scale in rem so it follows the reader’s own font size setting.
How many sizes should a type scale have?
Most sites need five to seven: one or two below body text for captions and labels, body text itself, and three or four heading sizes.
See how real sites set their type.
Font Inspector shows the font, size, line height and spacing of any text on any website, then copies it as CSS. Free, no account.