Typography
Strict dual-font system. TT Travels Text for headlines. Inter for all UI and body copy.
Heading Font
TT Travels
var(--typography-font-heading)
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
abcdefghijklmnopqrstuvwxyz
0123456789
Body / UI Font
Inter
var(--typography-font-body)
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
abcdefghijklmnopqrstuvwxyz
0123456789
Type Scale
The quick brown fox jumps over the lazy dog
Heading 1
var(--typography-size-h1) / lh var(--typography-lineHeight-tight)
w: var(--typography-weight-bold)
The quick brown fox jumps over the lazy dog
Heading 2
var(--typography-size-h2) / lh var(--typography-lineHeight-tight)
w: var(--typography-weight-bold)
The quick brown fox jumps over the lazy dog
Heading 3
var(--typography-size-h3) / lh var(--typography-lineHeight-snug)
w: var(--typography-weight-bold)
The quick brown fox jumps over the lazy dog
Heading 4
var(--typography-size-h4) / lh var(--typography-lineHeight-snug)
w: var(--typography-weight-semibold)
The quick brown fox jumps over the lazy dog
Heading 5
var(--typography-size-h5) / lh var(--typography-lineHeight-normal)
w: var(--typography-weight-semibold)
The quick brown fox jumps over the lazy dog
Heading 6
var(--typography-size-h6) / lh var(--typography-lineHeight-normal)
w: var(--typography-weight-semibold)
The quick brown fox jumps over the lazy dog
Body
var(--typography-size-body) / lh var(--typography-lineHeight-normal)
w: var(--typography-weight-regular)
The quick brown fox jumps over the lazy dog
Button
var(--typography-size-button) / lh var(--typography-lineHeight-none)
w: var(--typography-weight-medium)
The quick brown fox jumps over the lazy dog
Caption
var(--typography-size-caption) / lh var(--typography-lineHeight-normal)
w: var(--typography-weight-regular)
Weight Scale
Regular — Aa
400 / var(--typography-weight-regular)
Medium — Aa
500 / var(--typography-weight-medium)
Semibold — Aa
600 / var(--typography-weight-semibold)
Bold — Aa
700 / var(--typography-weight-bold)