Typography is our voice
Three font families form the foundation of our visual communication — precise, modern and consistent.
Aa
Outfit
DisplayHeadlines, navigation, UI elements, buttons
400 Regular · 500 Medium · 600 SemiBold · 700 Bold
Aa
Inter
BodyBody text, descriptions, long-form content
300 Light · 400 Regular · 500 Medium · 600 SemiBold
Aa
Geist Mono
MonoSpecifications, prices, technical data, code
400 Regular · 500 Medium
Type Scale
Type something to see the live preview.
headline-xl
clamp(3.5rem, 12vw, 8rem)
smartenic
headline-lg
clamp(3rem, 10vw, 6rem)
smartenic
headline-md
clamp(2.5rem, 8vw, 5rem)
smartenic
headline-sm
clamp(2rem, 5vw, 3rem)
smartenic
body-lg
18px–20px
smartenic
body-md
15px
smartenic
label-sm
13px
smartenic
label-xs
11px
smartenic
Font Weights
Geist Sans
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Inter
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Geist Mono
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Dos
Use Outfit for headlines and UI elements
Use Inter for body text and descriptions
Apply negative tracking for large headlines
Use Geist Mono for technical specifications
Donts
Mix more than 2 fonts on a single page
Use all caps for body text
Use font sizes below 13px
Use decorative fonts as alternatives