01 / Scale
Typography System
Typography System
Typography System
Typography System
Typography System
Typography System
02 / Families
Space Grotesk
Display / Headings
The quick brown fox jumps over the lazy dog.
A geometric sans-serif with character. Used for headings and UI elements that require strong visual impact and modern readability.
Inter
Body / UI
The quick brown fox jumps over the lazy dog.
Highly legible at small sizes. Optimized for screen reading, providing comfortable line lengths and balanced x-height for extended content.
JetBrains Mono
Code / Technical
const q = 'That Is A Q'; // Typography specimen
Engineered for developers. Clear differentiation between similar characters, optimized for code blocks, metadata, and technical specifications.
03 / Principles
Line Height
Vertical rhythm creates breathing room. We use a modular scale to maintain consistent reading comfort.
Tight: 1.1 — Headings & compact UI
Normal: 1.5 — Body text & default
Relaxed: 1.8 — Long-form reading
Letter Spacing
Tracking adjusts density. Tighter spacing for headings, normal for body, and wider for labels and uppercase.
That Is A Q
That Is A Q
THAT IS A Q
Weight Hierarchy
Contrast guides the eye. We use 400 for body, 500 for interactive states, and 700 for primary headings.
400 Regular
500 Medium
700 Bold
500 Medium
700 Bold
04 / Playground
32px
700
1.2
-0.02em
That Is A Q