Typography
All Trade Gothic: Bold Condensed No. 20 for headlines, Bold No. 2 for titles and labels, the regular weight for reading.
Display headline
Section heading
Label · nav · button · tag
Body copy is Trade Gothic at 17px with 1.55 line height, with oblique and bold for emphasis. Sentence case, curly quotes, American spelling.
Tokens
| Token | Value | Use |
|---|---|---|
--font-display | Trade Gothic Bold Cond 20 | Headlines, wordmarks, tile titles |
--font-label | Trade Gothic Bold 2 | Nav, buttons, tags, list labels |
--font-body | Trade Gothic (regular, oblique, bold) | Everything you read |
--track-display | -.01em | Headlines |
--track-label | .03em | Labels |
--size-h1 / --size-h2 / --size-section | clamp(44–88) / clamp(30–44) / clamp(36–58) | Page title / sub head / section heading |
Case
One rule: caps for the hero, sentence case for titles you read, caps for short labels.
| Role | Style | Examples |
|---|---|---|
| Hero: one per page | Condensed No. 20, ALL CAPS, .sys-display | Case study page title (“NETSPEND PATTERN LIBRARY”), product page title (“YŌKAI COLORING BOOK”), home section headings (“WHAT I BRING”), video slams |
| Titles: read in groups or inside content | Bold No. 2, Sentence case, .sys-title | Case study tile titles (“Fund manager workspace”), skill titles (“Early adopter”), headings within a page (“Figma first”), product card titles |
| Labels: a few words, functional | Bold No. 2, ALL CAPS, small, .sys-label | Nav, buttons, tags (“CASE STUDY #5487”), list labels (“CHALLENGES TO SOLVE:”), footer links |
| Body | Trade Gothic regular, sentence case | Everything you read in paragraphs |
Sentence case
- Capitalize only the first word and proper names: Netspend, Wayblazer, MagicStaff, CPay, Yōkai.
- Acronyms stay capitalized: POC, AI, UX.
Do
One caps hero per page; tile and section titles in sentence case under it.
Don’t
Set a whole grid of tile titles, or every heading in an article, in condensed caps. It shouts.
Stipulations
- Condensed caps read smaller than their size: set headlines larger than you would a regular face.
- The fonts carry a metric fix so caps sit centered in their boxes; don’t nudge them with padding.
- Characters outside the trimmed fonts fall back to the system sans. All the cuts include Ō.
- Jonesco uses only Trade Gothic. Don’t add another typeface, including for body copy.