workbuddy_skills/open-design/craft/typography-hierarchy-editorial.md

Editorial typography hierarchy craft rules

Extends typography.md + typography-hierarchy.md. Defines hierarchy behavior for editorial surfaces: long-form articles, magazine layouts, digital guides, editorial landing pages, and blog posts.

Opt in via od.craft.requires: [typography, typography-hierarchy, typography-hierarchy-editorial].

---

What "editorial" means here

Editorial hierarchy means the pacing is authored the way a print art director paces a spread: entry point, tension, rest, disruption, resolution. The reader is moved through content rather than given a uniform reading surface. SaaS hierarchy is additive — elements stack and each gets its turn. Editorial hierarchy is compositional — elements are weighted against each other and some are deliberately suppressed so others can breathe.

---

Editorial hierarchy principles

1. Dramatic scale jumps

Editorial type scales are not gradual. The gap between display and body is large — often 3–5× — because the display element is not just a heading, it is a visual event.

Level	Typical range	Notes
Display / lede	56–96 px	(editorial override) May intentionally exceed the default typography.md display range
Deck / standfirst	18–24 px	Large jump down — intentional
Body	16–18 px	Close to deck is fine; they're in the same reading register
Pull quote	28–40 px	Disrupts body rhythm; treated as a visual break, not a heading
Caption / label	11–13 px	Minimal — never competes with body

The gap between display and deck is the editorial signature. A small step here reads as SaaS, not editorial.

2. Whitespace carries hierarchy

Editorial hierarchy is not announced by a heavy heading. It is created by the space that surrounds an element. An article title in a moderate weight surrounded by generous whitespace outranks a bold heading crammed against its content.

Rules:

• Above-the-fold display element: minimum 2× the line-height in space above and below before body begins.
• Pull quotes: full column margin on both sides, or break the grid entirely.
• Section breaks: use space as the default hierarchy signal. Separators (rules, dingbats, folios, chapter marks) are allowed only when they reinforce publication identity or distinguish unrelated content. For RTL layouts, mirror or adapt separators using logical directions (inline-start, inline-end) rather than physical (left, right).
• Caption clusters: tighter internal spacing, larger gap from the body above.

3. Restrained bold

Editorial systems use weight sparingly. The display element is often set in a light or regular weight — hierarchy is carried by scale and space, not mass.

Bold in editorial context means: this word/phrase matters beyond the sentence. It is not used for section labels, UI chrome, or navigation. One to two bold phrases per 400 words of body copy is a working upper bound.

If everything important is bold, nothing is.

4. Display tracking

Negative tracking at large sizes is mandatory for Latin display. At editorial display sizes (56 px+), tracking should be -0.02em to -0.05em (editorial override; see typography.md §letter-spacing for the default range). Light display weights may go tighter within this range.

Script-aware exception: For Arabic, Persian, and Urdu (cursive-joining scripts), keep tracking at 0 — negative letter-spacing breaks cursive joining (see rtl-and-bidi). Hebrew uses logical spacing rules but is not cursive-joining; consult rtl-and-bidi for right-to-left baseline adjustments. Hierarchy in these scripts is carried by size, weight, and whitespace, not tracking.

---

5. Pull quotes as rhythm disruption

A pull quote is not a blockquote. It is a visual interrupt.

Property	Behavior
Scale	28–40 px — above body, below display
Weight	Regular or light — never bold
Tracking	Slightly negative (-0.01em) or zero
Alignment	Break from body column — full width, or offset inline-start/inline-end
Spacing	Large above and below — equal to or greater than a section break
Color	May use var(--accent) as the only accent use on the page

Pull quotes placed at regular intervals destroy their effect. One per long-form article is usually correct. Two is a maximum.

6. Body measure and reading rhythm

Long-form body copy: 60–70 ch line length. Tighter than the typography.md max because editorial reading is sustained, not scanning.

Line height: 1.6–1.7 for serif body. Slightly more generous than the universal rule because editorial bodies are set at a reading size, not a UI size.

Do not justify. Use text-align: start with a ragged inline-end edge — the natural setting for editorial body copy on screen.

7. Asymmetrical rhythm

Uniform section spacing reads as a template. Editorial pacing alternates between compression and expansion:

• Dense section → spacious section → medium section.
• A tightly spaced image caption cluster immediately after a generous body paragraph creates productive tension.
• The final section before a pull quote should tighten; after it, release.

---

Editorial hierarchy table

Element	Scale	Weight	Tracking	Leading	Spacing role
Display headline	56–96 px	Light or regular	-0.02em to -0.05em	1.0–1.1	Event — generous above/below
Deck / standfirst	18–24 px	Regular	0	1.4–1.5	Transitional — moderate gap below
Byline / dateline	12–14 px	Regular or medium	0.02em–0.04em	1.5	Recedes — tight gap below
Body	16–18 px	Regular	0	1.6–1.7	Baseline — rhythm carrier
Pull quote	28–40 px	Regular or light	-0.01em (Latin only; 0 for joining scripts)	1.2–1.3	Interrupt — large above/below
Image caption	12–13 px	Regular	0.01em	1.5	Recedes — tight cluster
Section label	11–12 px	Medium	0.06em–0.1em (if caps)	1.5	Wayfinding only

---

Anti-patterns

• Bold display headline — editorial display is usually light or regular. Bold display reads as billboard advertising. If the design system's display weight is heavy, either use the regular cut or revisit the choice.
• Uniform section padding — every section has the same gap. No pacing. The page reads as a list of content blocks.
• Pull quote styled as a callout box — border-left, background tint, or card treatment. A pull quote is typographic. It does not need a container.
• Deck set at body size — the gap between headline and deck must be large enough to read as a scale event. 18 px minimum for a deck below a 56 px+ headline.
• Heading for every section — editorial long-form does not require a heading at every content shift. Space and pacing are allowed to do the work. (guidance)
• Positive tracking on display — wide-tracked display headlines read as a branding exercise. Tighten them.
• UI chrome in the reading column — buttons, tags, chip badges interrupting prose flow inside the body text column. Functional controls (inline code-copy, API anchors, callout toggles) may live inside code and API blocks, but decorative badges and UI chrome should live outside the reading measure to keep prose focus clear.

---

Lint

• Display headline is light or regular weight unless the design system specifies otherwise.
• Display tracking is within -0.02em to -0.05em at 56 px+ (Latin only; 0 for Arabic/Persian/Urdu joining scripts; see rtl-and-bidi for Hebrew). (guidance)
• Pull-quote tracking: -0.01em (Latin only; 0 for joining scripts). (guidance)
• Gap between display and deck: display/deck ratio ≥ 1.5× or absolute px delta ≥ 24 px to read as a scale event. (guidance)
• Body line height is 1.6–1.7.
• Body measure is 60–70 ch.
• Pull quote, if present, breaks the body column (full width or offset).
• No more than 2 pull quotes in a single article surface. (long-form only)
• Section spacing alternates — one gap ≥ 1.5× baseline rhythm while another is ≤ 1.2×. (long-form only — guidance)
• Bold used ≤ 2 times per 400 words in body copy. (long-form only)
• var(--accent) used ≤ 2 times on the full editorial surface (see color.md §accent discipline).
• Section separators (rules, dingbats) are used only when they reinforce publication identity or clearly mark unrelated-content boundaries; they must not be used as a hierarchy fallback. (guidance)
• Pull quote has no background, border, or container treatment.