Skip to main content

Search rules

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

aestheticsimpeccable

Long Headlines Don't Get Display Size

SHOULD

SHOULD: Reserve display size for short headlines — an `h1` is oversized only when ALL THREE hold: font-size >= 72px AND at least 40 characters AND >= 28% of viewport height (or >= 25% of viewport area). Keep the display size, cut the headline to its shortest true form, and let the full sentence live at 18–20px directly underneath.

Keep display type for short headlines and demote full sentences to the subhead so the fold stays usable

Bad

Good

Why it matters

This is not an argument against big type. The detector requires ALL THREE conditions together: font-size >= 72px, at least 40 characters, and an h1 occupying >= 28% of viewport height (or >= 25% of viewport area). A punchy one- or two-word headline at 72px+ is completely fine — it is length PLUS viewport share that makes it a tell, because a 40+ character sentence at display size wraps to four or five lines and pushes the CTA, the product shot, and everything else below the fold.

Keep the display size and cut the headline to its shortest true form, then let the full sentence live at 18–20px directly underneath, where sentences read.

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.