Wylie Dog

Typography

The structural rules for font families, sizes, weights, and vertical rhythm.

Families & Sizes

typography-font-family-sans · Manrope
Sample (xs)12
font-sans·fontSize: var(--typography-font-size-xs)
Sample (sm)14
font-sans·fontSize: var(--typography-font-size-sm)
Sample (base)16
font-sans·fontSize: var(--typography-font-size-base)
Sample (lg)18
font-sans·fontSize: var(--typography-font-size-lg)
Sample (xl)20
font-sans·fontSize: var(--typography-font-size-xl)
Sample (2xl)24
font-sans·fontSize: var(--typography-font-size-2xl)
Sample (3xl)30
font-sans·fontSize: var(--typography-font-size-3xl)
Sample (4xl)36
font-sans·fontSize: var(--typography-font-size-4xl)
Sample (5xl)48
font-sans·fontSize: var(--typography-font-size-5xl)
Sample (6xl)60
font-sans·fontSize: var(--typography-font-size-6xl)
typography-font-family-serif · Besley
Sample (xs)12
font-serif·fontSize: var(--typography-font-size-xs)
Sample (sm)14
font-serif·fontSize: var(--typography-font-size-sm)
Sample (base)16
font-serif·fontSize: var(--typography-font-size-base)
Sample (lg)18
font-serif·fontSize: var(--typography-font-size-lg)
Sample (xl)20
font-serif·fontSize: var(--typography-font-size-xl)
Sample (2xl)24
font-serif·fontSize: var(--typography-font-size-2xl)
Sample (3xl)30
font-serif·fontSize: var(--typography-font-size-3xl)
Sample (4xl)36
font-serif·fontSize: var(--typography-font-size-4xl)
Sample (5xl)48
font-serif·fontSize: var(--typography-font-size-5xl)
Sample (6xl)60
font-serif·fontSize: var(--typography-font-size-6xl)
typography-font-family-mono · 'JetBrains Mono'
Sample (xs)12
font-mono·fontSize: var(--typography-font-size-xs)
Sample (sm)14
font-mono·fontSize: var(--typography-font-size-sm)
Sample (base)16
font-mono·fontSize: var(--typography-font-size-base)
Sample (lg)18
font-mono·fontSize: var(--typography-font-size-lg)
Sample (xl)20
font-mono·fontSize: var(--typography-font-size-xl)
Sample (2xl)24
font-mono·fontSize: var(--typography-font-size-2xl)
Sample (3xl)30
font-mono·fontSize: var(--typography-font-size-3xl)
Sample (4xl)36
font-mono·fontSize: var(--typography-font-size-4xl)
Sample (5xl)48
font-mono·fontSize: var(--typography-font-size-5xl)
Sample (6xl)60
font-mono·fontSize: var(--typography-font-size-6xl)

Attributes

Weights

extralight200
light300
regular400
medium500
semibold600
bold700
extrabold800
black900

Line Heights

none100
tight125
snug137.5
normal150
relaxed162.5
loose200