Designing Typography Layout

Implementation:

• Set max-width on content container, not the viewport
• Use ch units for character-based measure: max-width: 75ch for body
• Code blocks may exceed body measure but must not require horizontal scrolling

Audit Test: Select any body paragraph. Count characters in the longest line. Fail if >90 or <45.

2. Line Height (Leading)

Rule: Minimum 1.5x font size for body text. Heading leading is tighter.

Rules:

• Never set line height below 1.4 for any readable text
• Line height should increase if line length increases (wider measure needs more leading)
• Use unitless values (line-height: 1.5), not fixed units (line-height: 24px)

3. Baseline Grid

Rule: Align all vertical spacing to a 4dp or 8dp baseline grid.

Grid Implementation:

Spacing Scale (8dp base):

Rules:

• All vertical spacing values must be multiples of the base unit
• Avoid arbitrary spacing values (17px, 22px, 35px)
• Use the spacing scale tokens, not raw pixel values

4. Whitespace Density

Rule: Headings get 1.5x more space above than below. Whitespace density varies by page type.

Heading Spacing Pattern:

Rationale: More space above headings creates visual separation from preceding content. Less space below creates association with the content the heading introduces.

Density by Page Type:

5. Heading Hierarchy

Rule: Sequential heading levels with consistent visual weight reduction.

Visual Weight Scale:

Rules:

• Never skip heading levels (H2 → H4)
• One H1 per page (the page title)
• If H5-H6 are needed, the page should probably be split
• Headings must be distinguishable from body text by more than just size — use weight and spacing

6. Font Selection

Rules for documentation sites:

Character Distinction Test: In the chosen monospace font, verify these pairs are clearly distinguishable:

• I (capital i) vs l (lowercase L) vs 1 (one)
• O (capital o) vs 0 (zero)
• rn vs m
• ` (backtick) vs ' (apostrophe)

Audit Checklist

For any documentation page, verify:

• Body text line length is 45-90 characters
• Body text line height is ≥1.5
• Code block line height is ≥1.4
• All spacing values are multiples of the baseline grid unit
• Headings have more space above than below (≥1.5x ratio)
• Heading levels are sequential (no skipped levels)
• Only one H1 per page
• Monospace font passes character distinction test
• Page density matches its archetype (reference=dense, tutorial=airy)
• No horizontal scrolling required for body or code content

Output Format

Typography Audit: {page or site}

Compliance Summary:

Issues:

Density Assessment: [Dense/Medium/Airy] — [appropriate/inappropriate] for [page archetype]

Guidelines

• DO: Measure actual character counts, not estimates
• DO: Use unitless line-height values for scalability
• DO: Vary density by page type — reference pages should be denser than tutorials
• DO: Test with real content, not lorem ipsum
• DON'T: Optimize typography for aesthetics over readability
• DON'T: Use fixed pixel values for line-height
• DON'T: Apply uniform spacing to all page types — density should match content purpose

Related Components

• designing-navigation-systems skill: Navigation layout constraints (sidebar width) affect content area measure
• auditing-content-quality skill: Readability dimension references these typography standards
• designing-code-displays skill: Code block typography (monospace, line height) governed here
• scaffolding-page-archetypes skill: Archetype determines appropriate density level
• analyzing-docs-benchmarks skill: Visual & Interactive dimension includes typography assessment