O!Vector

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
Body / UI Font
Inter
var(--typography-font-body)
ABCDEFGHIJKLMNOPQRSTUVWXYZ
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)