Foundations

Typography

A type scale derived from the golden ratio (φ = 1.618), creating natural visual hierarchy that feels harmonious at every size.

The Golden Ratio

Canon's type scale is built on φ (phi), the golden ratio. Larger sizes multiply by φ; smaller sizes divide. The result is proportions found throughout nature—from nautilus shells to spiral galaxies.

φ = 1.618033...
1 × φ² = 2.618 → 1 × φ = 1.618 → 1 → 1 / φ = 0.618

For the middle range (body text and small headings), we use the minor third (1.2) for finer granularity. Both ratios create harmonic progressions—they're musical.

Type Scale

Display and heading sizes use fluid typography with clamp() for responsive scaling.

Display & Headings

Weniger
--text-display-xl φ⁴ max Hero headlines
Weniger
--text-display φ³ max Page titles
Weniger
--text-h1 φ² max Section titles
Weniger
--text-h2 φ¹ max Subsection titles
Weniger
--text-h3 1.2¹ max Card titles
Weniger
--text-h4 √1.2 max Small headings
Weniger
--text-h5 base Base heading
Weniger
--text-h6 1/√1.2 Smallest heading

Body & Caption

Less, but better.
--text-body-lg √1.2 Lead paragraphs
Less, but better.
--text-body base Body text
Less, but better.
--text-body-sm 1/√1.2 Secondary text
Less, but better.
--text-caption 1/1.2 Captions, labels
Less, but better.
--text-overline 1/φ Overlines, eyebrows

Font Families

Three font stacks for different purposes, each with robust fallbacks.

The quick brown fox jumps over the lazy dog
--font-sans Stack Sans Notch Primary typeface
const φ = 1.618033988749895;
--font-mono JetBrains Mono Code, data tables
"Good design is as little design as possible."
--font-serif Georgia Editorial, quotes

Font Weights

Five weights provide sufficient range without excess.

Weniger, aber besser
--font-light 300 Light emphasis
Weniger, aber besser
--font-regular 400 Body text
Weniger, aber besser
--font-medium 500 UI elements
Weniger, aber besser
--font-semibold 600 Subheadings
Weniger, aber besser
--font-bold 700 Headlines

Line Heights

Line height creates vertical rhythm. Note that --leading-relaxed is exactly φ (1.618).

Good design is innovative. Good design makes a product useful. Good design is aesthetic.

--leading-tight 1.25 Headlines, compact

Good design is innovative. Good design makes a product useful. Good design is aesthetic.

--leading-snug 1.375 Subheadings

Good design is innovative. Good design makes a product useful. Good design is aesthetic.

--leading-normal 1.5 UI text

Good design is innovative. Good design makes a product useful. Good design is aesthetic.

--leading-relaxed 1.618 Body text (φ)

Good design is innovative. Good design makes a product useful. Good design is aesthetic.

--leading-loose 1.75 Large body text

Letter Spacing

Tracking adjusts horizontal rhythm for different contexts.

TYPOGRAPHY
--tracking-tighter -0.025em Dense display
TYPOGRAPHY
--tracking-tight -0.015em Headlines
TYPOGRAPHY
--tracking-normal 0 Body text
TYPOGRAPHY
--tracking-wide 0.025em Buttons
TYPOGRAPHY
--tracking-wider 0.05em Small caps
TYPOGRAPHY
--tracking-widest 0.1em Overlines

Responsive Typography

Display and heading sizes use CSS clamp() for fluid scaling between viewport widths. This ensures readability across devices without breakpoint jumps.

fluid-typography.css 
/* Fluid typography formula */
--text-display: clamp(
  2.618rem,    /* Minimum: φ² */
  4vw + 1.5rem, /* Preferred: scales with viewport */
  4.236rem     /* Maximum: φ³ */
);
Resize your browser to see the display text above scale fluidly.

Usage

Combine size, weight, height, and spacing tokens for consistent typography.

typography-patterns.css 
/* Headlines */
.page-title {
  font-size: var(--text-display);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

/* Body text */
.article-body {
  font-size: var(--text-body);
  font-weight: var(--font-regular);
  line-height: var(--leading-relaxed);
}

/* Captions */
.image-caption {
  font-size: var(--text-caption);
  color: var(--color-fg-muted);
  letter-spacing: var(--tracking-wide);
}