---
title: Typography Scale & System
description: Building a consistent typographic scale for web interfaces.
tags: [typography, scale, system, fonts, sizing]
---

# Typography Scale & System

## Type Scale (1.25 ratio)

| Name | Size | Weight | Line-height | Use |
|------|------|--------|-------------|-----|
| xs | 12px | 400 | 1.5 | Captions, labels |
| sm | 14px | 400 | 1.5 | Small text, form labels |
| base | 16px | 400 | 1.6 | Body text |
| lg | 18px | 400 | 1.6 | Subtitles, lead text |
| xl | 20px | 600 | 1.4 | Small headings |
| 2xl | 24px | 600 | 1.3 | Section headings |
| 3xl | 30px | 700 | 1.2 | Page titles |
| 4xl | 36px | 700 | 1.2 | Hero titles |
| 5xl | 48px | 800 | 1.1 | Display titles |
| 6xl | 64px | 800 | 1.1 | Hero display |

## CSS Implementation

```css
:root {
  --font-sans: 'Inter', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-scale: 1.25;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
}
```

## Font Pairing Rules

1. **Contrast is key** — Sans-serif + Sans-serif (different weights)
2. **Max 2 fonts** — One display, one body
3. **Prefer system fonts** — Faster rendering, native feel
4. **Test at actual sizes** — Not just in design tools

## Anti-Patterns
- Never use more than 2 type families
- Never set line-height below 1.4 for body text
- Never use font size below 14px
- Never ignore `font-display: swap`