Back to docs
Design recipe

Legal page typography

Terms of Service and Privacy Policy pages that are readable, trustworthy, and on-brand.

Core principles

Readability first

16px minimum body text. 1.75 line-height. Max 72 characters per line. No wall-of-text paragraphs.

Clear hierarchy

Three heading levels max. Section numbers optional. Generous whitespace between clauses.

Trust signals

Last-updated date prominent. Version history link. Plain-English summaries before legalese.

Brand consistency

Violet accents for links and dividers. Dark background reduces eye strain on long reads.

Layout structure

1

Effective date banner — sticky or top-of-page, subtle violet background

2

Table of contents — collapsible sidebar on desktop, accordion on mobile

3

Section numbering — optional but helpful for cross-references (1.1, 1.2...)

4

Plain-English callouts — italic summaries in gray before each dense clause

5

Footer CTA — single link back to dashboard or support, never a sales pitch

Typography spec

ElementSizeWeightColor
Page title2rem / 32pxBold (700)white
Section heading1.5rem / 24pxSemibold (600)white
Subsection1.125rem / 18pxMedium (500)#F472B6
Body text1rem / 16pxRegular (400)#9CA3AF
Fine print0.8125rem / 13pxRegular (400)#6B7280
Inline linksinheritMedium (500)#8B5CF6

Anti-patterns

ALL-CAPS paragraphs — unreadable and aggressive

Tiny gray text on white — accessibility failure

No table of contents — users can't find relevant sections

Buried last-updated date — erodes trust

Marketing CTAs inside legal pages — looks predatory

Pro tip: Generate your legal pages from markdown stored in a CMS or flat files. This keeps lawyers happy and lets you apply consistent styling across all documents. See the markdown rendering recipe for implementation.