Brand
convert.com

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(32px, 3.8vw, 52px) · 600 · H1 hero
Split hero headline --text-hero-split clamp(30px, 3.4vw, 48px) · 600 · H1 beside a hero visual
Section heading --text-section clamp(28px, 3.2vw, 40px) · 700 · section H2
Card title --text-card-title 22px · 600 · card H3
Hero description copy --text-body-lg 20px · 400 · hero and section leads, testimonial quote
Card body copy --text-body 17px · 400 · prose, card body, FAQ questions
Navigation and buttons --text-ui 15px · 500 · nav, buttons (every size)
Trust signal copy --text-small 14px · 400 · trust signals, captions
Uppercase label --text-label 12px · 600 uppercase · labels, readability floor
Caption text --text-caption 14px · 400 italic · captions (alias of --text-small)
UI-mock replica label --text-micro 11px · UI-mock replicas only, never page prose
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.
  • 12px (--text-label) is the floor for anything a reader reads. Only UI-mock replicas go below it, on --text-micro.
  • The .kicker eyebrow is pinned at 13px, one step above --text-label, because all-caps at wide tracking reads smaller.
  • No literal font-size on copy. Every piece of copy uses a --text-* token; literal sizes are only allowed inside UI-mock replicas (role="img" or aria-hidden).

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.