Typography
Type scale and font families. Fonts change with the active theme.
Font Families
--font-display
The quick brown fox jumps over the lazy dog
Display — headlines, hero text, large display type.
--font-reading
The quick brown fox jumps over the lazy dog
Reading — long-form content, articles, descriptions.
--font-interface
The quick brown fox jumps over the lazy dog
Interface — UI chrome, labels, navigation.
--font-mono
The quick brown fox jumps over the lazy dog
Mono — code, tabular data, numeric displays.
Type Scale
4xl (2.25rem)Playground
3xl (1.875rem)Playground
2xl (1.5rem)Playground
xl (1.25rem)Playground
lg (1.125rem)Playground
base (1rem)Playground
sm (0.875rem)Playground
xs (0.75rem)Playground
Font Weights
normal (400)Playground
medium (500)Playground
semibold (600)Playground
bold (700)Playground