# 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.