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.

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 11px · 400 italic · captions

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

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

Monospace

One mono stack supports the rare places where fixed-width type earns its keep.

Monospace

--font-mono is reserved for category tags, code samples and token names, anywhere fixed-width characters keep things aligned and signal "this is a literal value." It is never used for running copy.

BUILD · MEASURE · RUN
--space-6

Dennis, the handwritten accent

A typeface digitized from Dennis's real handwriting, for the rare places where a human touch says more than a clean sans.

Dennis Aligned is a single Regular weight built from Dennis's own pen strokes. Baselines are aligned so text sits on a line, but each letter keeps its natural handwritten size and rhythm. Coverage is intentionally small: lowercase, uppercase and basic punctuation — no digits or special characters.

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

Download TTF

@font-face {
  font-family: 'Dennis Aligned';
  src: url('/brand/assets/fonts/Dennis-Aligned.woff2') format('woff2'),
       url('/brand/assets/fonts/Dennis-Aligned.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

When to use it

Handwritten annotations on visuals: margin notes, arrow labels, circled highlights.
Founder sign-offs: a short signature line under a quote from Dennis.
Personal asides in social and newsletter images where a human aside earns attention.
Keep it short and large: a few words at 20px or more. Never body copy, headings or UI text — that stays Geist Sans.
No digits or special characters yet: stick to letters and basic punctuation (. , : ; ! ? and quotes).

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.

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.