Type scale checker
Choose a base size, a ratio, a line height and a line length. See the result live, check it against readability guidance and copy the CSS.
Settings
Set both base sizes and both ratios the same for a fixed scale.
Recommendations
Live preview
Readable headings
Come from a steady scale
A good body text size is the one you forget about. Lines are short enough to follow, the space between them lets your eye find the next one, and the headings above are in proportion rather than shouting. Change the numbers on the left and watch this paragraph, and the length of every line in it, respond.
Small print, one step down from body text.
CSS
The preferred value in each clamp() has a rem part, so text still scales when someone changes their browser font size or zooms.
Type and accessibility
There is no WCAG number for "good type", but several criteria depend on it. 1.4.4 says text must resize to 200% without loss. 1.4.10 says content must reflow at 320 CSS pixels wide. 1.4.12 says nothing may break when people increase line, letter and word spacing. Large, steady type with room to breathe makes all of that easier.
A11yMate's Typography Studio detects the sizes your WordPress site is really using and recommends a scale. This free tool lets you play with the idea first.
Questions
What type size and line height should I use?
For body text, 16px or larger, a line height of at least 1.5 and a line length of 45 to 80 characters. Those are the figures this tool checks against. WCAG 1.4.12 asks that content still works when people override line height to 1.5, and 1.4.8 (AAA) recommends no more than 80 characters per line.
What is a fluid type scale?
Instead of jumping between sizes at breakpoints, each size grows smoothly with the width of the screen between a minimum and a maximum. The CSS clamp() function does this. The generated values use the same approach as Utopia: a straight line between your two sizes, expressed in rem and vw.
Is it accessible to use rem and vw together?
Yes, as long as the preferred value includes a rem part. The generated clamp() values do, so text still grows when someone raises their browser font size or zooms. Avoid using vw on its own for font sizes.
Is anything sent to a server?
No. Everything runs in your browser.