Skip to main content
UI Guides

Search rules

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

aestheticsSkills

Pair Display and Body Deliberately

SHOULD

SHOULD: Pair a distinctive display font (serif or geometric sans) for headlines with a refined body font for content. Same font everywhere creates flat hierarchy. Limit to 2 font families; use font-display: swap.

Pair a characterful display face with a complementary body face and set an intentional type scale

Bad

Good

Why it matters

Typography hierarchy is the foundation of visual communication. When headlines and body text share the same neutral face at three sizes, the page has no voice. A display face used with restraint commands attention; a complementary body face carries the reading. The scale between them — weights, widths, spacing — is the part most generated designs skip, and it is what makes a page feel set rather than assembled.

References

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.