Typography
Families
Section titled “Families”Display — Barlow Condensed
Section titled “Display — Barlow Condensed”Weights: 700 / 800 / 900.
Engineered, rack-label condensed. Headlines, hero wordmarks, product covers.
Body — Inter
Section titled “Body — Inter”Weights: 400 / 500 / 600 / 700.
Humanist workhorse. UI, marketing copy, documentation.
Mono — JetBrains Mono
Section titled “Mono — JetBrains Mono”Weights: 400 / 500 / 700.
Numeric and code. Status readouts, timecode, identifiers, CLI.
All three are free and open (SIL OFL).
One modular scale.
| Name | Size | Role | Use |
|---|---|---|---|
| Display XL | 56pt | Hero | Cover, landing page hero |
| Display L | 40pt | Page title | Section headers, pitch titles |
| Display M | 28pt | Subtitle | Sub-sections, card titles |
| Body L | 16pt | Intro | Lead paragraphs |
| Body M | 12pt | Body | Default paragraph text |
| Body S | 10pt | Caption | Metadata, captions, footnotes |
| Label | 9pt | EYEBROW | Section labels, tags |
Set type like an engineer.
| Rule | Value |
|---|---|
| Line length | 50–80 characters per line. Never wider than 90. |
| Line height | 1.5 for body, 1.1 for display, 1.3 for captions. |
| Alignment | Left-align everything except status readouts. No justified text. |
| Tracking | Display: −2% of size. Body: 0. ALL-CAPS LABELS: +12% (loose). |
| Hyphenation | Off for display. On for body at or below 12pt. |
| Ellipsis | Use the character …. Never three dots. |
| Dashes | En (–) for ranges, em (—) for breaks, hyphen (-) for compounds. |
| Numerals | Tabular (mono) for timecode, cue counts, readouts. Proportional elsewhere. |