Skip to content

Rule · Design

Too many distinct font sizes (no type scale)

design/no-type-scalewarnvoid designupdated

Why it matters

A dozen ad-hoc sizes make hierarchy mushy. A deliberate scale (6-8 steps) is the fastest way to look designed.

How to fix it

Define a modular or fluid type scale as tokens (--text-xs … --text-display) and use only those.

Example

ts
--text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-2xl: clamp(1.5rem, 1.2rem + 1vw, 2rem);

void design reports 19 rules in this category. Measured design heuristics from computed styles: font families, type scale, line length, palette and accent sprawl, spacing grid, radius sprawl, dark mode and the tells of generated UI.