Typography

A fluid, golden-ratio type system: ten size steps, φ-derived line-heights, a tracking scale, and five runtime-switchable font families — all driven by --vd-* tokens.

Golden-ratio type scale

Every two steps multiply by φ (1.618). The scale steps by √φ ≈ 1.272, so each pair of steps lands on the golden ratio: 16 → 26 → 42 → 68 px. Sizes lg and up use clamp() to scale fluidly between a mobile (≈1.414, augmented fourth) and desktop (φ) ratio — no breakpoints needed.

Aa--vd-font-size-6xl54→86px

Aa--vd-font-size-5xl45→68px

Aa--vd-font-size-4xl37→53px

The quick brown fox--vd-font-size-3xl31→42px

The quick brown fox--vd-font-size-2xl26→33px

The quick brown fox jumps--vd-font-size-xl22→26px

The quick brown fox jumps over--vd-font-size-lg18→20px

The quick brown fox jumps over the lazy dog--vd-font-size-base16px

The quick brown fox jumps over the lazy dog--vd-font-size-sm13px · fib

The quick brown fox jumps over the lazy dog--vd-font-size-xs10px

Utility classes .vd-text-xs … .vd-text-6xl apply each step. See the Golden Ratio page for the proportional system these derive from.

Type-scale playground

Type your own copy and drag through the scale — the preview, the utility class, and the size update live.

.vd-text-base16px

The quick brown fox jumps over the lazy dog

Line height (leading) — φ-derived

Line-heights come straight from φ: 1.236 (2/φ), 1.382, 1.5, and 1.618 (φ itself).

tight · 1.236

Vanduo keeps vertical rhythm tied to the golden ratio so dense headings and body copy feel balanced without hand-tuning every block.

normal · 1.5

Vanduo keeps vertical rhythm tied to the golden ratio so dense headings and body copy feel balanced without hand-tuning every block.

relaxed · 1.618 (φ)

Vanduo keeps vertical rhythm tied to the golden ratio so dense headings and body copy feel balanced without hand-tuning every block.

Letter spacing (tracking)

Six tracking tokens, from tighter to widest.

tighter · −0.05em
Vanduo

normal · 0
Vanduo

wider · 0.05em
Vanduo

widest · 0.1em
Vanduo

Applied via the --vd-letter-spacing-* tokens.

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Weights & styles

Light · .vd-font-light (300)

Normal · .vd-font-normal (400)

Medium · .vd-font-medium (500)

Semibold · .vd-font-semibold (600)

Bold · .vd-font-bold (700)

Extrabold · .vd-font-extrabold (800)

Italic · .vd-text-italic

Font families & runtime switching

Vanduo ships 5 curated font options, switchable at runtime via the data-font attribute on <html> (also exposed by FontSwitcher and the Theme Customizer). The preference persists in localStorage.vanduo-font-preference.

ubuntu — default humanist sans-serif
open-sans — neutral, highly readable
lato — friendly, rounded sans-serif
jetbrains-mono — monospace for code
system — native system stack (same as omitting data-font)

<!-- Set a curated font on the document -->
<html data-font="ubuntu">

<!-- Add your own: register a stack on the attribute -->
<style>
  [data-font="roboto"] { --vd-font-family-sans: 'Roboto', sans-serif; }
</style>

Self-hosting steps and the Google Fonts CDN path are covered in CSS Variables & Theming. For minimum readable sizes and contrast, see Accessibility Essentials.

API Reference

Class / Token	Description	Type
`.vd-text-xs … .vd-text-6xl`	Apply a step of the golden-ratio type scale.	Utility
`.vd-font-light … .vd-font-extrabold`	Font weight, 300–800.	Utility
`.vd-text-italic`	Italic font style.	Utility
`--vd-line-height-{tight,snug,normal,relaxed,loose}`	φ-derived leading tokens (1.236 → 2).	Token
`--vd-letter-spacing-{tighter…widest}`	Tracking tokens (−0.05em → 0.1em).	Token
`data-font="[name]"`	Curated font stack on <html> (ubuntu, open-sans, lato, jetbrains-mono, system).	Attribute