Typography

Professional typography for user interfaces.

Output Contract

For type system recommendations:

## Type System

### Scale
- Base: [size, e.g., 16px]
- Ratio: [e.g., Minor Third 1.200]
- Rationale: [why this ratio]

### Hierarchy
| Level | Size | Weight | Line Height | Letter Spacing | Use |
|-------|------|--------|-------------|----------------|-----|
| Display | ... | ... | ... | ... | Hero, marketing |
| H1 | ... | ... | ... | ... | Page titles |
| H2 | ... | ... | ... | ... | Section heads |
| Body | ... | ... | ... | ... | Paragraphs |
| Small | ... | ... | ... | ... | Captions, labels |

### Fonts
- Primary: [font] - [rationale]
- Secondary: [font, if applicable]
- Mono: [font, if applicable]

### Implementation
```css
/* Ready-to-use CSS variables */

For typography audits:

```markdown
## Typography Audit

### Issues
| Element | Problem | Recommendation |
|---------|---------|----------------|
| ... | ... | ... |

### Quick Wins
- [Immediate improvement 1]
- [Immediate improvement 2]

Core Principles

Hierarchy & Structure

• Establish clear visual hierarchy through size, weight, and spacing
• Limit to 3-4 distinct heading levels in practice
• Use weight contrast (not just size) to differentiate levels
• Maintain consistent hierarchy patterns across the application

Readability First

• Optimize for scanning: users read in F-patterns
• Left-align body text (centered only for short, formal text)
• Ensure sufficient contrast (4.5:1 minimum, 7:1 preferred)
• Test with real content, not lorem ipsum

Restraint & Consistency

• Use 1-2 font families maximum (one serif, one sans-serif if pairing)
• Establish a type scale and stick to it
• Avoid decorative fonts for functional UI text
• Let whitespace do the work; resist the urge to fill

Type Scales

Modular Scales

Common ratios for harmonious sizing:

• Minor Second (1.067): Subtle, conservative
• Major Second (1.125): Gentle, professional
• Minor Third (1.200): Balanced, versatile
• Major Third (1.250): Bold, impactful
• Perfect Fourth (1.333): Strong hierarchy
• Golden Ratio (1.618): Dramatic, editorial

Practical Scale (Minor Third, base 16px)

text-xs:   12px (0.75rem)
text-sm:   14px (0.875rem)
text-base: 16px (1rem)
text-lg:   18px (1.125rem)
text-xl:   20px (1.25rem)
text-2xl:  24px (1.5rem)
text-3xl:  30px (1.875rem)
text-4xl:  36px (2.25rem)
text-5xl:  48px (3rem)

When to Deviate

• Marketing/hero sections can use larger jumps
• Dense data interfaces may need tighter scales
• Mobile often requires slightly larger base sizes

Measure (Line Length)

Optimal Ranges

• Body text: 45-75 characters (66 ideal)
• Short-form: 40-60 characters
• Wide layouts: Use columns or max-width constraints
• Mobile: Full width is acceptable due to narrow viewport

Implementation

/* Tailwind equivalents */
max-w-prose  /* ~65ch */
max-w-2xl    /* 672px, good for articles */
max-w-xl     /* 576px, compact content */

Multi-Column Considerations

• Narrower columns = shorter measure acceptable
• Gutters should be at least 20px (1.25rem)
• Avoid orphaned words at column breaks

Line Height (Leading)

Guidelines by Context

• Body text: 1.5-1.7 (generous for readability)
• Headings: 1.1-1.3 (tighter, especially large sizes)
• UI labels: 1.2-1.4 (compact but legible)
• Buttons: 1.0-1.25 (single line, tight)

Adjustments

• Increase line height for wider measure
• Decrease for larger type sizes
• Consider the x-height of the typeface
• Dark mode may benefit from slightly more leading

Letter Spacing (Tracking)

General Rules

• Body text: Default (0) or very slight increase
• All caps: Always add positive tracking (+0.05em to +0.1em)
• Large headings: Slight negative tracking (-0.01em to -0.02em)
• Small text: Slight positive tracking for legibility

Tailwind Classes

tracking-tighter: -0.05em
tracking-tight:   -0.025em
tracking-normal:  0
tracking-wide:    0.025em
tracking-wider:   0.05em
tracking-widest:  0.1em

All-Caps Text

• Always use uppercase tracking-wide or tracking-wider
• Keep short (1-3 words ideal)
• Common for labels, category tags, eyebrow text

Font Selection

System Font Stacks

Performant and native-feeling:

/* Sans-serif (modern) */
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

/* Serif */
font-family: ui-serif, Georgia, Cambria, "Times New Roman", serif;

/* Monospace */
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

Web Font Considerations

• Limit to 2-3 weights per family (400, 500/600, 700)
• Use font-display: swap for performance
• Variable fonts reduce file size for multiple weights
• Self-host for privacy and reliability

Pairing Principles

• Pair by contrast (serif + sans-serif)
• Match x-height for visual harmony
• Use one font for headings, one for body
• Ensure both have needed weights/styles

Safe Recommendations

• Sans-serif: Inter, Source Sans Pro, Open Sans, Work Sans
• Serif: Source Serif Pro, Lora, Merriweather, Literata
• Monospace: JetBrains Mono, Fira Code, Source Code Pro

Paragraph Spacing

Between Paragraphs

• Use margin-bottom equal to line-height or slightly more
• Typically 1em to 1.5em between paragraphs
• First paragraph after heading: reduced or no top margin

Between Sections

• 2-3x paragraph spacing between major sections
• Use consistent spacing tokens from design system
• Consider visual grouping via proximity

Typographic Details

Quotation Marks

• Use curly quotes (" " ' ') not straight quotes (" ')
• Proper apostrophes: it's, don't, '90s
• Consider the locale (French guillemets, German quotes)

Dashes

• Hyphen (-): Word breaks, compound words
• En dash (–): Ranges (2020–2024), relationships (New York–London)
• Em dash (—): Parenthetical statements, emphasis

Numbers

• Use tabular (monospace) figures in tables for alignment
• Use proportional figures in body text
• Consider old-style figures for editorial content

Ellipsis

• Use proper ellipsis character (…) not three periods
• Add thin space before/after in formal typography

Responsive Typography

Fluid Type

Scale font sizes smoothly between breakpoints:

/* clamp(min, preferred, max) */
font-size: clamp(1rem, 0.5rem + 1.5vw, 1.5rem);

Breakpoint Adjustments

• Increase base size slightly on mobile (17-18px)
• Reduce heading scale on mobile
• Increase line height for small screens
• Reduce measure on tablets (prose can feel too wide)

Touch Targets

• Minimum 44x44px for tappable text elements
• Generous padding around links in body text
• Avoid text-only targets without visual indication

Dark Mode Typography

Adjustments

• Reduce font weight slightly (medium instead of semibold)
• Increase letter spacing marginally
• Consider warmer white (#f5f5f5) over pure white (#fff)
• Increase line height by ~0.1 for perceived lightness

Contrast Considerations

• Pure white on pure black is harsh; soften both
• Aim for 10:1 to 15:1 contrast in dark mode
• Test with actual users; perceived contrast differs

Accessibility

Font Size Minimums

• Body text: 16px minimum (don't go below)
• Secondary text: 14px minimum, 12px absolute floor
• Legal/caption: 12px with increased tracking

User Preferences

• Respect font-size from browser settings
• Use relative units (rem) not fixed (px) for text
• Provide text scaling options for dense UIs

Dyslexia Considerations

• Avoid justified text
• Prefer sans-serif with distinct letterforms
• Generous line height and paragraph spacing
• OpenDyslexic as optional font choice

Common Mistakes

Avoid

• All-caps body text or long headings
• Centered body paragraphs
• Line length over 80 characters
• Insufficient contrast for "aesthetic" reasons
• Mixing too many font families
• Decorative fonts for UI text
• Justified text on the web (causes rivers)
• Tiny gray text on white backgrounds

Watch For

• Orphans and widows in prominent text
• Inconsistent heading hierarchy
• Missing font fallbacks
• Layout shift from web font loading
• Underlined text that isn't a link