Typography
8 typography styles using Inter for UI and JetBrains Mono for code.
Font Families
Sans Serif
Inter
font-family: Inter, system-ui, sans-serif;Monospace
JetBrains Mono
font-family: JetBrains Mono, Menlo, monospace;Typography Styles
Hierarchy of text styles for consistent typography across the design system.
Display
Hero headlines
3.5rem / 1.1 / 600
Tracking: -0.02em
The quick brown fox jumps over the lazy dog
font-family: Inter, system-ui, sans-serif;
font-size: 3.5rem;
font-weight: 600;
line-height: 1.1;
letter-spacing: -0.02em;H1
Page titles
2.25rem / 1.2 / 600
Tracking: -0.02em
The quick brown fox jumps over the lazy dog
font-family: Inter, system-ui, sans-serif;
font-size: 2.25rem;
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.02em;H2
Section headers
1.5rem / 1.3 / 600
Tracking: -0.01em
The quick brown fox jumps over the lazy dog
font-family: Inter, system-ui, sans-serif;
font-size: 1.5rem;
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.01em;H3
Card titles
1.125rem / 1.4 / 600
The quick brown fox jumps over the lazy dog
font-family: Inter, system-ui, sans-serif;
font-size: 1.125rem;
font-weight: 600;
line-height: 1.4;Body
Paragraphs
1rem / 1.6 / 400
The quick brown fox jumps over the lazy dog
font-family: Inter, system-ui, sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.6;Small
Secondary text
0.875rem / 1.5 / 400
The quick brown fox jumps over the lazy dog
font-family: Inter, system-ui, sans-serif;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.5;Caption
Labels, metadata
0.75rem / 1.4 / 500
The quick brown fox jumps over the lazy dog
font-family: Inter, system-ui, sans-serif;
font-size: 0.75rem;
font-weight: 500;
line-height: 1.4;Code
Code blocks
0.875rem / 1.6 / 400
The quick brown fox jumps over the lazy dog
font-family: JetBrains Mono, Menlo, monospace;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.6;Font Weights
The quick brown fox jumps over the lazy dog
font-normal /* 400 */The quick brown fox jumps over the lazy dog
font-medium /* 500 */The quick brown fox jumps over the lazy dog
font-semibold /* 600 */The quick brown fox jumps over the lazy dog
font-bold /* 700 */