Skip to main content

Search rules

Search all UI Guides rules by name, category, or source

contentimpeccable

Fewer Sizes, More Contrast

SHOULD

SHOULD: Generate every type step from one ratio of at least 1.25 (major third), 1.333, or 1.5 rather than adding near-identical sizes — a page with 3 or more distinct sizes whose largest-to-smallest ratio is under 2.0 has no hierarchy left to squint at.

Generate every step from one ratio of at least 1.25 instead of adding near-identical sizes

Bad

Good

Why it matters

The named failure is "too many font sizes that are too close together (14px, 15px, 16px, 18px...)": each new size was added to solve a local problem and none of them are far enough apart to signal rank, so the page reads as one grey slab. impeccable's detector flags a page with 3 or more distinct sizes whose largest-to-smallest ratio is under 2.0. Pick a single ratio (1.25 major third, 1.333 perfect fourth, or 1.5), generate five steps from it, and the hierarchy survives a squint test.

Built by Gleb Stroganov, design engineer at Evil Martians.

The rules come from other people's skills and guidelines — Vercel, Rauno Freiberg, @Ibelick, impeccable, Emil Kowalski, Tailwind, RAMS — each one credited on the Sources page. The work here is extraction and wiring: every rule is pulled into one corpus, given a good and a bad example you can operate, a MUST/SHOULD/NEVER rule an agent can paste, and a link back to where it came from.