Line height rules for headlines

Headline line-height rules shown as four growing white lorem blocks in a 2x2 grid, each demoing a different Ultra or Black line-height percentage.

Styleeditorial, technical, minimal

Colordark, high-contrast

Typedisplay, oversized, all-caps

Moodprofessional, technical, bold

Elementsbadge, icon

Tagsline-height, headlines, specimen-grid, lorem-ipsum, percentage-rules, green-markers

Palette

#1A1C1F

#FFFFFF

Summary

A detail page on headline line height: four white all-caps lorem specimens in a 2x2 grid, ranging from two words to a full paragraph, each labelled with the matching Ultra or Black weight and line-height percentage.

Visual description

White-left / near-black-right split. The left column shows the "04 TYPOGRAPHY" eyebrow, a stacked two-tone "USAGE / LINE HEIGHTS & RULES FOR HEADLINES" headline, an intro on keeping headline line height under 100%, and a numbered list of four cases (Ultra short 80%, Ultra longer 95%, Black short 90%, Black longer 110%). The right 2x2 grid holds four white all-caps lorem headlines of increasing length, each tagged with a small green-outlined numbered circle, showing how line height tightens or loosens as copy grows.

Key takeaway

Teaching line height with the same dummy phrase set at four lengths and four percentages, so the reader sees the rule applied rather than stated. Matching each grid cell's green number to the left-column list keeps rule and example locked together.

Reuse notes

A precise reference for documenting headline spacing rules. The four-case grid (short vs long, two weights) is a reusable scaffold for any "how this scales with copy length" page. Keep the specimens to one neutral lorem string so only spacing varies.