A LITTLE HELP FOR YOUR NEXT DESIGN
Type scale calculator
Build a harmonious type scale. Set your base size and ratio, preview every step, and copy the CSS.
12.80px / 0.800remGood design starts with type.
16.00px / 1.000remGood design starts with type.
20.00px / 1.250remGood design starts with type.
25.00px / 1.563remGood design starts with type.
31.25px / 1.953remGood design starts with type.
39.06px / 2.441remGood design starts with type.
48.83px / 3.052remGood design starts with type.
MAKE IT YOURS
: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.
Read the guide: Build a typography scale that feels like a system →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.