neo
76c4c5b4fe
- 74 brands: airbnb, stripe, apple, figma, linear, vercel, etc. - 147 files: DESIGN.md + README.md per brand (~2.1 MB) - Each DESIGN.md contains structured brand analysis (colors, typography, components) - Updated 00-overview.md with new design-systems directory
50 lines
1.4 KiB
Markdown
50 lines
1.4 KiB
Markdown
---
|
|
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`
|