Typesetting Rules

Typesetting is the application of typographic principles to specific content in specific contexts. A headline that commands attention on a magazine cover would overwhelm a dashboard widget. Body text that reads beautifully in a long-form essay would feel sluggish in a product changelog. Professional typography adapts its rules to the medium, audience, and purpose of the content — while maintaining the underlying system that ties a brand or product together.

This chapter provides actionable rules for the contexts you encounter most often in digital design. These are starting points, not absolutes — but deviating from them should be intentional, not accidental.

Universal Principles

Before context-specific rules, four principles apply everywhere:

1. Establish hierarchy before decoration. Size, weight, and spacing create structure. Color and style refine it. Never rely on color alone to differentiate heading levels.

2. Fewer sizes, used consistently. A typesetting scheme with five distinct levels outperforms one with twelve barely-differentiated sizes. Assign each size a role and reuse it.

3. Optimize for the primary reading task. A landing page is scanned; a documentation page is studied; a dashboard is monitored. Typesetting serves the dominant behavior.

4. Test with real content. Lorem ipsum hides measure problems, awkward line breaks, and hierarchy failures. Always proof with actual copy at realistic lengths.

Headlines and Display Type

Headlines exist to stop the scroll, signal relevance, and orient the reader. They are scanned, not read word-by-word.

Rules:

• Limit headlines to 6–12 words when possible. Long headlines wrap awkwardly and lose impact.
• Use one display size per page level — one h1, distinct h2s, consistent h3s. Do not introduce ad-hoc display sizes.
• Line height: 1.1–1.25 for single-line headlines; 1.2–1.3 for multi-line.
• Letter-spacing: -0.01em to -0.03em at sizes above 32px. Tighten, do not loosen.
• Maximum two lines for hero headlines on mobile. Refine copy rather than shrinking type below readable minimums.
• Subheadlines (deck lines) should be 1–2 steps below the headline in size, regular or medium weight, with wider measure than the headline if both are constrained.

Body Text

Body text carries the substance. It must disappear — readers should absorb meaning without noticing the typography.

Rules:

• Size: 16–18px (1rem–1.125rem) for web. Never below 16px for sustained reading.
• Line height: 1.5–1.65. Wider measure → higher line height.
• Measure: 55–65 characters per line on desktop; 40–55 on mobile.
• Paragraph spacing: 1–1.5em between paragraphs. First paragraph after a heading needs no extra top margin.
• Font weight: 400 (regular) for most body text. Use 500–600 sparingly for emphasis within paragraphs — not as a default body weight.
• Avoid all-caps, excessive bold, and underlined text in body copy. Use semantic emphasis (strong, em) with restraint.

Editorial and Long-Form Content

Magazines, essays, investigative journalism, and narrative non-fiction demand typography that rewards sustained attention.

Rules:

• Serif body text remains effective for long-form reading. Sans-serif body is equally valid if line height and measure are tuned carefully.
• Lead paragraphs (deck or intro) at 1.125–1.25rem with regular or medium weight signal entry into the article.
• Pull quotes at 1.25–1.5rem, often italic, with generous vertical margin (2–3em above and below).
• Section breaks: use whitespace (2–3em) rather than decorative ornaments unless the publication's identity demands them.
• Byline, date, and category metadata at 0.875rem, muted color, with clear separation from the headline.
• Image captions at 0.8125–0.875rem, often italic, below or adjacent to images — never overlaid on images without sufficient contrast.

Landing Pages

Landing pages are scanned in an F-pattern or Z-pattern. Typography must communicate value propositions before the reader commits to reading.

Rules:

• Hero headline: largest size in the system (3xl–6xl). One clear message. Subheadline supports, never repeats.
• Benefit statements: h2 or h3 at semibold, 1–2 sentences each. Scannable blocks, not paragraphs.
• Social proof (testimonials, logos, metrics): smaller type (sm–base), secondary visual weight.
• Call-to-action buttons: medium weight (500–600), slight positive tracking (+0.025em), size matched to button prominence (primary CTA larger than secondary).
• Feature sections: consistent heading size across all features. Body at base size, 2–3 lines maximum per feature description.
• Reduce total type sizes by one step on mobile rather than allowing headlines to wrap into four or five lines.

Blogs

Blog typography balances scanability with reading comfort. Posts vary in length from 500 to 5000+ words.

Rules:

• Post title: h1 at 2xl–4xl depending on blog design density.
• Post metadata (author, date, reading time): sm size, muted, inline or stacked below title.
• Body: base size (16–18px), optimal measure (65ch max), comfortable line height (1.6).
• In-article headings (h2, h3): clear step changes. h2 for major sections, h3 for subsections. Never skip levels.
• Code blocks and block quotes: visually distinct (monospace, left border, or background) but within the measure constraint.
• Tag and category labels: xs–sm, uppercase with tracking (+0.05em) or pill-style badges.
• Related posts and sidebar: one size step below body, narrower measure acceptable.

Dashboards and Data Interfaces

Dashboards prioritize information density and at-a-glance comprehension over reading comfort.

Rules:

• Base UI text: 14px (0.875rem) is acceptable; 13px is the practical minimum for data labels.
• Metric values: large (xl–3xl), bold or semibold, tabular figures (font-variant-numeric: tabular-nums) for aligned numbers.
• Metric labels: xs–sm, muted color, uppercase with tracking optional.
• Table headers: sm, semibold (600), uppercase or sentence case depending on density needs.
• Table body: sm–base, regular weight, tight but readable line height (1.4).
• Chart labels: 11–12px minimum. Test legibility on low-resolution displays.
• Use a restrained type scale (Major Third) to prevent size proliferation across widgets.
• Limit to two weights (400 and 600) and two sizes per widget for clarity.

SaaS Product Interfaces

SaaS products combine marketing pages, application UI, settings, and documentation — often with a single type system spanning all contexts.

Rules:

• Marketing pages: Follow landing page rules for hero and feature sections.
• Application UI: 14px base for interface text; 16px for content areas where users read paragraphs (settings descriptions, onboarding).
• Navigation: sm–base, medium weight (500) for active items, regular (400) for inactive.
• Empty states and onboarding: base size, friendly tone, centered or left-aligned with illustration. Headline at lg–xl, body at base.
• Notifications and toasts: sm for message text, medium weight for titles. One or two lines maximum.
• Settings and forms: label at sm (medium weight), input text at base, helper text at xs–sm (muted).
• Maintain the same font family across marketing and product. Different families create brand discontinuity.

Marketing and Campaign Pages

Marketing pages push typography toward expression — larger sizes, tighter tracking, bolder weights, and more dramatic hierarchy.

Rules:

• Display type can exceed your standard scale's maximum — custom sizes for hero moments are acceptable if used once per page.
• Contrast through size differential: hero at 4xl–6xl, section headings at 2xl–3xl, body at base. The ratio between levels should exceed your standard scale's ratio for marketing impact.
• Testimonials: quote at lg–xl (often italic or serif if body is sans), attribution at sm (regular, muted).
• Pricing tables: plan name at lg–xl (semibold), price at 3xl–4xl (bold), features at sm–base.
• Legal and footer text: xs–sm. Required but should not compete with primary content.

Documentation and Technical Writing

Documentation is read selectively — users scan for the section they need, then read carefully within that section.

Rules:

• Body: 16px minimum, 1.6–1.7 line height, 65ch max-width. Documentation is read on wide monitors but text must not stretch full-width.
• Headings: clear, descriptive, keyword-rich. h2 for major topics, h3 for subtopics, h4 for detailed subsections.
• Code inline: monospace at 0.875em, subtle background, do not reduce below 14px effective size.
• Code blocks: monospace at 14px, syntax highlighting, horizontal scroll for long lines rather than wrapping.
• Navigation sidebar: sm, regular weight, with active page at medium weight or accent color.
• API references: parameter names in monospace, types in muted color, descriptions at base size.
• Admonitions (notes, warnings, tips): sm–base with icon, left border, and distinct background. Title at medium weight.

Portfolios and Creative Showcases

Portfolio sites use typography as a primary design expression — the type IS the design as much as the work displayed.

Rules:

• Project titles: display size (2xl–5xl), often with tight tracking and bold weight.
• Project descriptions: base to lg, generous line height (1.6–1.7), narrower measure (55ch) for an intimate reading feel.
• Navigation: minimal — project names or simple labels at sm–base. Typography should not compete with showcased work.
• About page: the one place for sustained reading. Apply editorial rules — comfortable body size, optimal measure, generous spacing.
• Case study structure: mirror editorial conventions (headline, deck, section headings, body, captions) with more expressive display choices.
• Image-heavy layouts: type appears in negative space. Ensure sufficient contrast and size when overlaid near images.

Cross-Context Consistency

When a project spans multiple contexts — and most do — maintain consistency through shared tokens:

:root {
  /* Shared across all contexts */
  --font-body: "Inter", system-ui, sans-serif;
  --font-display: "Instrument Serif", Georgia, serif;
  --font-mono: "Geist Mono", monospace;

  --text-body: 1rem;
  --text-ui: 0.875rem;
  --text-caption: 0.75rem;

  --leading-body: 1.6;
  --leading-ui: 1.4;
  --leading-display: 1.15;
}

Context-specific overrides should adjust size and spacing, not switch typefaces or invent new scale steps. A dashboard widget and a blog post should feel like they belong to the same product because they share the same typographic DNA — even when their density and hierarchy differ dramatically.

Typesetting rules are guardrails, not cages. Learn them, apply them by default, and break them deliberately when the content and context demand it. The goal is always the same: type that serves the reader and the message, in that order.