Typography System
Our typography system provides a complete set of font families, sizes, weights, and presets. Each theme has its own carefully chosen font pairing that reflects its unique personality.
All Themes at a Glance
| Theme | Heading | Body | Personality |
|---|---|---|---|
Studio | Outfit | Manrope | Modern geometric sans-serif with clean readability |
Terra | Lora | Instrument Sans | Elegant serif headings with modern sans body |
Volt | Space Grotesk | Space Grotesk | Tech-forward, consistent geometric throughout |
Explore Theme Fonts
Select a theme to see its actual fonts in action. All examples below will display using the theme's real typography.
Studio Theme
Modern geometric sans-serif with clean readability
Heading Font
Outfit
Usage: Headlines, titles, emphasis
CSS Variable: --font-studio-heading
Body Font
Manrope
Usage: Paragraphs, UI text, readable content
CSS Variable: --font-studio-body
Monospace Font
Fira Code
Usage: Code blocks, technical content
CSS Variable: --font-mono
Type Scale (Studio Theme)
Universal scale shown with Manrope (this theme's body font). Includes responsive sizing for mobile and desktop.
The quick brown fox jumps over the lazy dog
xsBase: 0.75remMobile: 0.75remThe quick brown fox jumps over the lazy dog
smBase: 0.875remMobile: 0.875remThe quick brown fox jumps over the lazy dog
baseBase: 1remMobile: 1remThe quick brown fox jumps over the lazy dog
lgBase: 1.125remMobile: 1remThe quick brown fox jumps over the lazy dog
xlBase: 1.25remMobile: 1.125remThe quick brown fox jumps over the lazy dog
2xlBase: 1.5remMobile: 1.25remThe quick brown fox jumps over the lazy dog
3xlBase: 1.875remMobile: 1.5remFont Weights (Studio Theme)
Standard weight scale shown with Outfit (this theme's heading font). Not all fonts support all weights.
Thin
font-thinExtralight
font-extralightLight
font-lightNormal
font-normalMedium
font-mediumSemibold
font-semiboldBold
font-boldExtrabold
font-extraboldBlack
font-blackLine Heights (Studio Theme)
Unitless values for better scalability. Examples shown with Manrope.
none1Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
tight1.25Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
snug1.375Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
normal1.5Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
relaxed1.625Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
loose1.75Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
extraloose2Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Letter Spacing (Studio Theme)
In ems for scalability. Examples shown with Outfit in all caps.
LETTER SPACING EXAMPLE
tighter-0.05emLETTER SPACING EXAMPLE
tight-0.025emLETTER SPACING EXAMPLE
normal0LETTER SPACING EXAMPLE
wide0.025emLETTER SPACING EXAMPLE
wider0.05emLETTER SPACING EXAMPLE
widest0.1emType Presets (Studio Theme)
Ready-to-use combinations shown with Outfit for headings and Manrope for body text.
The quick brown fox jumps over the lazy dog
display-largeThe quick brown fox jumps over the lazy dog
displayThe quick brown fox jumps over the lazy dog
heading-1The quick brown fox jumps over the lazy dog
heading-2The quick brown fox jumps over the lazy dog
heading-3The quick brown fox jumps over the lazy dog
heading-4The quick brown fox jumps over the lazy dog
heading-5The quick brown fox jumps over the lazy dog
heading-6