Compare Documentation Page Typography and Spacing

Start with a side-by-side checklist

To compare documentation page typography and spacing, inspect the same areas in every reference: navigation, page title, introductory copy, body text, code examples, sidebars, tables, and section breaks. Record the typeface, size, weight, line height, maximum text width, spacing above and below each element, and reading-column width. This turns a visual impression into a useful design decision.

Open the examples below and compare their first screens before borrowing a pattern. The Theming page from shadcn/ui, Apple Developer, and Stripe Dot Dev are documentation-oriented references. Their cards help compare overall structure and density. The typography block is a separate captured reference from Linear, so it should not be treated as evidence that the documentation pages use the same fonts.

What to measure

Use one worksheet for each page:

• Navigation: header height, logo size, menu spacing, active-state treatment, and whether secondary navigation remains visible.
• Title block: title size, weight, line height, width, and distance to the description or first control.
• Reading column: maximum paragraph width, average line length, alignment, and paragraph spacing.
• Section rhythm: spacing before and after headings, list indentation, and gaps between major topics.
• Code and examples: code size, line height, padding, radius, background contrast, and distance from explanatory text.
• Supporting areas: sidebar width, table density, callout padding, breadcrumb spacing, and mobile behavior.

Measure in pixels when possible, then group the findings into a small scale. A page might repeat 8, 16, 24, 32, and 48 pixel gaps. The exact values matter less than whether the rhythm is consistent and whether larger structural changes receive larger gaps.

Compare comfort and turn it into a decision

A smaller body font can remain comfortable when line height and reading width are generous. A large title can feel weak when its line height is loose or the space below it separates the title from its explanation. Compare every page at the same browser width and inspect a long paragraph, a short paragraph, a list, and a code block.

For each reference, mark the distance from the top of the page to the first useful instruction, then the distance from that instruction to its example. Look for small gaps inside components, medium gaps between related elements, and large gaps between topics. A page feels slow when every gap is large and cramped when every gap is equally small.

The captured Linear typography result lists Inter Variable as its primary sans serif, Berkeley Mono as a supporting monospace face, and Tiempos Headline as an occasional editorial display face. Treat those as observed details from that captured reference only. The practical lesson is to compare role separation: body and interface text should remain easy to scan, while code and occasional display text may have distinct treatment.

Choose the strongest reference by job. Fast-scanning documentation needs clear landmarks and a restrained reading width. Tutorials need visible steps, close instruction-to-example spacing, and room for notes. API-heavy content needs stable code alignment, readable tables, and predictable navigation. Borrow the structural pattern that fits your content, not every measurement from one page. Test it with a title, three sections, a list, and two code examples before making the spacing system permanent.

Use this in your AI agent

> Compare the captured documentation references for typography and spacing. For each page, list the visible hierarchy, navigation density, reading-column width, heading scale, body text treatment, code-block styling, and recurring spacing intervals. Separate observed details from recommendations, identify the strongest pattern for API documentation versus tutorials, and finish with a compact CSS or Tailwind-ready checklist I can apply to a new documentation page.

Install Fudge for your AI agent

Use different standards for the two page types. A tutorial should make sequence and action obvious, so compare step headings, the gap between instruction and example, callout placement, and whether the reader can tell what to do next. An API reference should make lookup fast, so compare endpoint or method labels, parameter tables, code samples, sidebar navigation, and how much content fits in one viewport.

Build a two-column scorecard with shared categories, then add page-specific checks. For tutorials, score progression, example proximity, and visual pauses. For API references, score scan speed, code alignment, table readability, and repeated patterns. Keep typography roles separate from spacing decisions. The same body type can support either experience when column width, heading gaps, code padding, and navigation density change appropriately.

Record repeated distances rather than every individual gap. Start with page padding, header height, sidebar width, reading-column width, paragraph spacing, heading spacing, list indentation, code-block padding, and the gap between text and examples. Group similar measurements into tokens such as 4, 8, 12, 16, 24, 32, and 48 pixels, then note where each token appears.

Also record exceptions. A large gap before a new topic may be intentional, while a smaller gap inside a callout may keep related content together. Test the proposed scale with a real title, paragraph, list, warning, and code block. If it creates the same hierarchy without one-off values, turn it into CSS custom properties or Tailwind spacing utilities.

Related questions

• How to Compare Ecommerce Product Page Typography and Spacing
• Checkout Page Design Examples for AI Coding Agents
• How to Compare Onboarding Flow Typography and Spacing
• Best Real-World Waitlist Page Design Examples