Typography
Our type system creates hierarchy, establishes rhythm, and ensures readability across all platforms.
Primary Typeface
Inter is our primary typeface. It's designed for computer screens with a focus on high legibility at small sizes.
Aa
Inter
Display & Body
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Type Scale
Our fluid type scale ensures readable text across all screen sizes without breakpoints.
5xl Display Large clamp(3rem, 2rem + 5vw, 5rem)
4xl Display clamp(2.5rem, 1.75rem + 3.75vw, 4rem)
3xl Heading 1 clamp(2rem, 1.5rem + 2.5vw, 3rem)
2xl Heading 2 clamp(1.5rem, 1.25rem + 1.25vw, 2rem)
xl Heading 3 clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem)
lg Lead Paragraph clamp(1.125rem, 1rem + 0.625vw, 1.25rem)
base Body Text clamp(1rem, 0.9rem + 0.5vw, 1.125rem)
sm Small Text clamp(0.875rem, 0.8rem + 0.375vw, 1rem)
xs Caption clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem)
Font Weights
Light 300
Regular 400
Medium 500
Semibold 600
Bold 700
Monospace
JetBrains Mono is used for code, technical content, and data displays.
const greeting = "Hello, Snyder!";
console.log(greeting);
// => Hello, Snyder!