Typography Reference
Good typography is invisible—it makes content effortless to read. This site uses a systematic approach to type, based on classical proportions that have been proven effective for centuries.
The Golden Ratio
The type scale is built on the Golden Ratio (φ = 1.618), a mathematical proportion found throughout nature and used in art and architecture for millennia. Each size in our scale is related to the others by this ratio, creating natural visual harmony.
When you look at well-designed typography, it feels "right" without you being able to say why. That's the Golden Ratio at work. The relationships between sizes are inherently pleasing to the human eye.
Why it matters
Using a mathematical scale instead of arbitrary sizes means:
- Consistency — Every size relates to every other size
- Hierarchy — Clear visual differentiation between elements
- Harmony — Text at any size looks balanced with surrounding content
- Maintainability — No "magic numbers" or ad-hoc adjustments
Type scale
Every text size on the site comes from this scale. The base size (16px) is the minimum for accessible reading, and everything else derives from it.
| Token | Size | Ratio | Use |
|---|---|---|---|
--text-2xs | 11.1px (0.694rem) | φ⁻² | Smallest readable—footnotes, legal text |
--text-xs | 13.3px (0.833rem) | φ⁻¹·⁵ | Captions, labels |
--text-sm | 14px (0.875rem) | — | Secondary text, UI elements |
--text-base | 16px (1rem) | φ⁰ | Body text — Sacred minimum |
--text-md | 18px (1.125rem) | — | Enhanced body, lead paragraphs |
--text-lg | 20px (1.25rem) | Major Third | Large body, introductions |
--text-xl | 21.3px (1.333rem) | Perfect Fourth | H4 headings |
--text-2xl | 25.9px (1.618rem) | φ¹ — Golden! | H3 headings |
--text-3xl | 32.4px (2.027rem) | φ¹·²⁵ | H2 headings |
--text-4xl | 41.9px (2.618rem) | φ¹·⁶¹⁸ | H1 headings, page titles |
--text-5xl | 51.8px (3.236rem) | φ² | Display text, hero headlines |
--text-6xl | 67.8px (4.236rem) | φ²·⁵ | Large display, landing pages |
--text-7xl | 83.8px (5.236rem) | φ³ | Massive display, rare use |
Baseline grid
Vertical spacing follows a 24px baseline grid. This means the line height of body text (24px at 16px font size, giving 1.5 line height) creates the fundamental unit of vertical rhythm.
When spacing elements, margins and padding use multiples of this unit. This creates a visual rhythm that makes scanning content effortless.
Line height
Line height (leading) controls vertical space between lines of text. Different types of content need different amounts of space.
| Token | Value | Use |
|---|---|---|
--leading-none | 1 | Display text only—single lines |
--leading-tight | 1.25 | Headlines, large text |
--leading-snug | 1.333 | Subheadings |
--leading-normal | 1.5 | Body text (optimal for reading) |
--leading-relaxed | 1.618 | Airy body text, Golden Ratio |
--leading-loose | 1.777 | Maximum readability, rare |
Line length (measure)
The optimal line length for comfortable reading is 45–75 characters. Too short and the eye jerks back and forth; too long and readers lose their place.
| Token | Value | Use |
|---|---|---|
--measure-compact | 45ch | Narrow columns, sidebars |
--measure-optimal | 66ch | Primary body text |
--measure-comfortable | 72ch | Comfortable sustained reading |
--measure-wide | 80ch | Wide layouts, max recommended |
--measure-full | 90ch | Technical content, tables, code |
Font families
The site uses three carefully chosen typefaces:
Geist Sans
The primary typeface for body text and most UI elements. A modern sans-serif designed by Vercel for screens—clean, highly legible, with excellent character differentiation.
--font-sans
Noto Serif JP
An accent serif for special emphasis or editorial content. Pairs beautifully with Geist for contrast. Includes Japanese character support.
--font-serif
Geist Mono
For code, terminal output, and technical content. Matches the personality of Geist Sans while providing clear distinction between similar characters (0/O, 1/l/I).
--font-mono
Letter spacing (tracking)
Tracking adjusts the space between all letters in a block of text. The rules are simple:
- Large text: Tighten slightly (
--tracking-tight) — Large letters have more natural whitespace - Body text: Never touch (
--tracking-normal: 0) — The font designer optimized it - Small text: Loosen slightly (
--tracking-wide) — Improves legibility - All caps: Always loosen (
--tracking-wide) — Capital letters need breathing room
Influences
This typographic system draws from several traditions:
- Robert Bringhurst — The Elements of Typographic Style, the bible of typography
- Edward Tufte — Information design principles, especially regarding whitespace and data density
- Swiss/International Style — Grid systems, systematic thinking, restraint
- Massimo Vignelli — "Systematic, not rigid" — rules that enable rather than constrain
For content authors
You don't need to think about any of this when writing content. The system handles typography
automatically. Just use standard Markdown headings (##, ###) and the
correct sizes are applied.
If you're building a new component or page layout and need to set explicit type sizes, use the design tokens listed above rather than arbitrary pixel values.