Typography for Legal Readability
Lengthy legal documents are inherently hostile to average readers. Typographic hierarchy must be rigorous to improve comprehension.
Font Selection
Primary Criteria
| Criterion | Requirement |
|---|---|
| Readability | Clear at small sizes |
| Accessibility | Distinct letterforms (I, l, 1) |
| Multilingual | Unicode coverage |
| Performance | Subset availability |
Recommended Font Stacks
:root {
/* Body text - highly readable */
--font-body: 'Inter', 'Roboto', system-ui, -apple-system,
BlinkMacSystemFont, sans-serif;
/* Headings - slightly more distinctive */
--font-heading: 'Inter', 'Roboto', system-ui, sans-serif;
/* Legal citations - monospace for precision */
--font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas',
monospace;
}
Dyslexia-Friendly Alternatives
/* Atkinson Hyperlegible - designed for low vision */
@font-face {
font-family: 'Atkinson Hyperlegible';
src: url('/fonts/atkinson-regular.woff2') format('woff2');
font-display: swap;
}
/* OpenDyslexic for user preference */
@font-face {
font-family: 'OpenDyslexic';
src: url('/fonts/opendyslexic.woff2') format('woff2');
font-display: swap;
}
/* User preference toggle */
.dyslexia-friendly {
font-family: 'Atkinson Hyperlegible', sans-serif;
letter-spacing: 0.05em;
word-spacing: 0.1em;
}
Type Scale
Modular Scale
Using a 1.25 ratio (Major Third):
:root {
--text-xs: 0.64rem; /* 10.24px */
--text-sm: 0.8rem; /* 12.8px */
--text-base: 1rem; /* 16px */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.563rem; /* 25px */
--text-2xl: 1.953rem; /* 31.25px */
--text-3xl: 2.441rem; /* 39px */
--text-4xl: 3.052rem; /* 48.8px */
}
Application
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
body { font-size: var(--text-base); }
.small-text { font-size: var(--text-sm); }
Line Length and Spacing
Optimal Reading Width
.content {
max-width: 70ch; /* 60-75 characters optimal */
}
/* Full-width for certain components */
.full-width {
max-width: 100%;
}
Line Height
body {
line-height: 1.6; /* Generous for legal text */
}
h1, h2, h3 {
line-height: 1.2; /* Tighter for headings */
}
/* Increased for complex scripts */
[lang="vi"], [lang="ar"] {
line-height: 1.8;
}
Paragraph Spacing
p + p {
margin-top: 1.5em;
}
/* Section breaks */
section + section {
margin-top: 3rem;
}
Legal Content Styling
Citations and References
/* Legal citations */
.legal-cite {
font-family: var(--font-mono);
font-size: 0.875em;
color: var(--color-muted);
}
/* Case names in italics */
.case-name {
font-style: italic;
}
/* Statute references */
.statute-ref {
font-family: var(--font-mono);
background: var(--color-code-bg);
padding: 0.125em 0.25em;
border-radius: 2px;
}
Example
<p>
Under <span class="case-name">Padilla v. Kentucky</span>,
<span class="legal-cite">559 U.S. 356 (2010)</span>,
defense attorneys must advise clients about immigration consequences.
See also <span class="statute-ref">8 U.S.C. § 1227</span>.
</p>
Callouts and Pull Quotes
<aside class="callout callout--rights">
<h4 class="callout__heading">Your Right</h4>
<p class="callout__text">
You have the right to remain silent. You do not have to answer
questions about where you were born or your immigration status.
</p>
</aside>
.callout {
padding: 1.5rem;
border-left: 4px solid var(--color-primary);
background: var(--color-highlight);
margin: 2rem 0;
}
.callout--rights {
border-left-color: var(--color-success);
background: var(--color-success-bg);
}
.callout--warning {
border-left-color: var(--color-warning);
background: var(--color-warning-bg);
}
Color System
Core Palette
:root {
/* Primary - Trustworthy blue */
--color-primary: #2563eb;
--color-primary-dark: #1d4ed8;
--color-primary-light: #3b82f6;
/* Secondary - Calming teal */
--color-secondary: #0d9488;
--color-secondary-dark: #0f766e;
--color-secondary-light: #14b8a6;
/* Semantic colors */
--color-success: #16a34a;
--color-warning: #d97706;
--color-error: #dc2626;
--color-info: #2563eb;
/* Neutrals */
--color-text: #1f2937;
--color-text-muted: #6b7280;
--color-bg: #ffffff;
--color-bg-subtle: #f9fafb;
--color-border: #e5e7eb;
}
Dark Mode
@media (prefers-color-scheme: dark) {
:root {
--color-primary: #60a5fa;
--color-text: #e5e7eb;
--color-text-muted: #9ca3af;
--color-bg: #111827;
--color-bg-subtle: #1f2937;
--color-border: #374151;
}
}
Semantic Usage
| Color | Usage | Avoid |
|---|---|---|
| Blue | Primary actions, links, trust | Overuse diminishes impact |
| Green | Success, safety, completion | Don't use for warnings |
| Yellow/Orange | Warnings, caution, deadlines | Not for decoration |
| Red | Errors, emergencies only | Never for general emphasis |
Color Accessibility
Contrast Requirements
/* Ensure 4.5:1 for body text */
.body-text {
color: var(--color-text); /* #1f2937 on #ffffff = 14.7:1 ✓ */
}
/* 3:1 for large text (18px+ or 14px bold) */
.heading {
color: var(--color-primary); /* #2563eb on #ffffff = 4.6:1 ✓ */
}
Not Color Alone
/* Error state: color + icon + border */
.input--error {
border-color: var(--color-error);
border-width: 2px;
}
.input--error::before {
content: "⚠ ";
color: var(--color-error);
}
.error-message {
color: var(--color-error);
}
.error-message::before {
content: "Error: ";
font-weight: bold;
}
Visual Hierarchy for Scanners
The Rule of Three
Break complex procedures into manageable three-step processes:
<div class="steps">
<div class="step">
<span class="step__number">1</span>
<h3 class="step__title">Don't open the door</h3>
<p class="step__desc">Ask who is there through the door.</p>
</div>
<div class="step">
<span class="step__number">2</span>
<h3 class="step__title">Ask for a warrant</h3>
<p class="step__desc">Request to see it slid under the door.</p>
</div>
<div class="step">
<span class="step__number">3</span>
<h3 class="step__title">Stay calm and silent</h3>
<p class="step__desc">You have the right to remain silent.</p>
</div>
</div>
Scannable Formatting
/* Bold key terms */
.key-term {
font-weight: 600;
}
/* Bulleted lists for quick scanning */
.rights-list {
list-style: none;
padding: 0;
}
.rights-list li {
padding-left: 1.5rem;
position: relative;
margin-bottom: 0.75rem;
}
.rights-list li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--color-success);
font-weight: bold;
}
Whitespace
/* Generous section spacing */
.section {
padding: 3rem 0;
}
/* Clear visual boundaries */
.section + .section {
border-top: 1px solid var(--color-border);
}
/* Breathing room around callouts */
.callout {
margin: 2.5rem 0;
}
Icon System
Universal Icons
Prioritize universally understood metaphors:
| Concept | Icon | Avoid |
|---|---|---|
| Phone/Call | 📞 | Rotary phone (outdated) |
| Home | 🏠 | Western house style only |
| Warning | ⚠️ | Red color alone |
| Success | ✓ | Green color alone |
| Document | 📄 | Floppy disk (obsolete) |
Icon Implementation
<!-- Always pair with text -->
<button class="button--with-icon">
<span class="icon" aria-hidden="true">📞</span>
<span class="button__text">Call Hotline</span>
</button>
<!-- Standalone icons need labels -->
<button aria-label="Download PDF">
<span class="icon" aria-hidden="true">⬇️</span>
</button>
SVG Icons
<svg class="icon" aria-hidden="true" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10..."/>
</svg>
<style>
.icon {
width: 1.25em;
height: 1.25em;
fill: currentColor;
vertical-align: middle;
}
</style>
At-a-Glance Summaries
Key Points Box
<aside class="key-points">
<h3>Key Points</h3>
<ul>
<li><strong>Don't open</strong> the door without a judicial warrant</li>
<li><strong>Stay silent</strong> - you have the right</li>
<li><strong>Don't sign</strong> anything without an attorney</li>
</ul>
</aside>
.key-points {
background: var(--color-primary-bg);
border: 2px solid var(--color-primary);
border-radius: 8px;
padding: 1.5rem;
margin: 2rem 0;
}
.key-points h3 {
margin-top: 0;
color: var(--color-primary);
}
.key-points li {
margin-bottom: 0.5rem;
}
.key-points strong {
color: var(--color-primary-dark);
}
TL;DR Pattern
<details class="tldr">
<summary>
<strong>TL;DR:</strong> Your rights in 30 seconds
</summary>
<div class="tldr__content">
<p>You can stay silent. Don't open the door. Ask for a lawyer.</p>
</div>
</details>
Testing Checklist
Typography
- [ ] Body text 16px minimum
- [ ] Line length 60-75 characters
- [ ] Line height 1.5+ for body
- [ ] Headings create clear hierarchy
Color
- [ ] Contrast ratios meet WCAG AA
- [ ] Color not sole indicator
- [ ] Dark mode supported
- [ ] Semantic colors consistent
Visual Hierarchy
- [ ] Key information scannable
- [ ] Whitespace prevents crowding
- [ ] Callouts highlight critical info
- [ ] Icons paired with text
Related Resources
- Accessibility - Color contrast, typography
- Multilingual - Non-Latin typography
- Component Library - Styled components
- Trust & Credibility - Visual trust signals