Typography

Inter for UI and body. Fraunces for display. JetBrains Mono for code. All open licences (OFL).

Families

Inter — variable, OFL. Body, UI, navigation. --font-family-sans
Fraunces — variable, OFL. Display, marketing, headings. --font-family-display
JetBrains Mono — OFL. Code blocks, numerical tables. --font-family-mono

Fluid, clamped between mobile and desktop. Resize the window to see the ramp move.

--font-size-xs clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem)

The quick brown fox

--font-size-sm clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem)

The quick brown fox

--font-size-base clamp(1rem, 0.96rem + 0.2vw, 1.0625rem)

The quick brown fox

--font-size-lg clamp(1.125rem, 1.08rem + 0.25vw, 1.25rem)

The quick brown fox

--font-size-xl clamp(1.25rem, 1.18rem + 0.4vw, 1.5rem)

The quick brown fox

--font-size-2xl clamp(1.5rem, 1.38rem + 0.6vw, 1.875rem)

The quick brown fox

--font-size-3xl clamp(1.875rem, 1.65rem + 1.1vw, 2.5rem)

The quick brown fox

--font-size-4xl clamp(2.25rem, 1.85rem + 1.9vw, 3.5rem)

The quick brown fox

--font-size-5xl clamp(2.75rem, 2.1rem + 3vw, 4.75rem)

The quick brown fox