Typography

Convert sets everything in Geist Sans. This page documents the typeface, the live type scale with its token names and roles, and the usage rules that keep copy consistent.

Note — Convert's design system is actively evolving. These values are current as of the latest update; confirm before using them in permanent or printed materials.

Geist Sans

Geist Sans is Convert's single typeface — used across every headline, paragraph, label and UI element.

Geist Sans is a clean, geometric sans-serif designed for screens. Its tight, neutral letterforms read well at both display and body sizes, which lets Convert hold a single typeface across the whole system. Five weights cover everything from light supporting text to bold display headlines.

300 — Light The quick brown fox jumps over the lazy dog

400 — Regular The quick brown fox jumps over the lazy dog

500 — Medium The quick brown fox jumps over the lazy dog

600 — Semibold The quick brown fox jumps over the lazy dog

700 — Bold The quick brown fox jumps over the lazy dog

Get from Google Fonts

<link href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap" rel="stylesheet">

Type scale

Every step rendered at its real size. Reference the token in code — never a raw pixel value.

Hero headline --text-hero clamp(24px, 3.8vw, 52px) · 600 · H1 hero

Section heading --text-section clamp(26px, 3vw, 36px) · 700 · section H2

Card title --text-card-title 18–20px · 600 · card H3

Hero description copy --text-body-lg 18px · 400 · hero description

Card body copy --text-body 15px · 400 · card body

Navigation and buttons --text-ui 14px · 500 · nav, buttons

Trust signal copy --text-small 13px · 400 · trust signals

Uppercase label --text-label 11px · 600 uppercase · labels

Caption text --text-caption 11.5px · 400 italic · captions

128% --text-stat-hero 70px · 700 · stat deck numbers

Stat deck label --text-stat-label 18px · 500 · stat deck labels

Usage rules

A few conventions keep Convert's copy consistent and readable across every page.

Use sentence case for all headlines — capitalize only the first word and proper nouns.
No exclamation marks in feature copy. Convert's voice is calm and confident, not loud.
Apply -1px letter-spacing to hero H1 headlines for a tighter, more deliberate look.
Apply -0.5px letter-spacing to section H2 headings.
Apply -3px letter-spacing to large stat-deck numbers so the digits sit close together.
Keep body copy to 60–75 characters per line maximum — past that, readability drops.