Colophon · type specimens
Type specimens
Three Fontshare display/text pairings and the major-third scale they run on, rendered at the sizes the app actually ships. The pick is made here, on pixels — not from a list of names.
Scale: 16px base, 1.25 ratio, every step in rem. Line-height runs 150% at body and tightens to 110% as the type grows; tracking runs at the default for body and goes negative on the large steps. All six faces are self-hosted from public/fonts/ under the ITF Free Font License. Full write-up: docs/ui-type-specimens.md.
Head to head — the display faces
Same words, same step (text-display, 3.815rem / 61px), same weight (700).
A · Sharpie (variable, 300–900)
GOLD RUSH NIGHT
B · Cabinet Grotesk (variable, 100–900)
GOLD RUSH NIGHT
C · Clash Display (variable, 200–700)
GOLD RUSH NIGHT
The scale
| Utility | Token | rem | px | Line-height | Tracking | Usage |
|---|---|---|---|---|---|---|
text-display | --text-display | 3.815rem | 61.04px | 1.1 (110%) | -0.03em | Hub headline, hero, deal price anchor — one per screen, display face |
text-h1 | --text-h1 | 3.052rem | 48.83px | 1.12 (112%) | -0.02em | Page title — one per page |
text-h2 | --text-h2 | 2.441rem | 39.06px | 1.18 (118%) | -0.015em | Section heading; bento tile headline |
text-h3 | --text-h3 | 1.953rem | 31.25px | 1.25 (125%) | -0.01em | Sub-section; card title on a large card |
text-h4 | --text-h4 | 1.5625rem | 25px | 1.3 (130%) | -0.005em | Card title, list-group heading — the top of the 110–130% band |
text-body-lg | --text-body-lg | 1.25rem | 20px | 1.5 (150%) | 0 | Lead paragraph, page standfirst |
text-body | --text-body | 1rem | 16px | 1.5 (150%) | 0 (default) | Body copy — the base of the scale, and the browser's default size |
text-caption | --text-caption | 0.8rem | 12.8px | 1.5 (150%) | +0.01em | Caption, timestamp, source note, chip label — never a full paragraph |
display / h1 / h2 are set in the pairing's display face; h3 and below are the text face. That handoff is the type-level version of Part 6 #1 — energy on the surfaces that earn it, quiet everywhere a visitor is reading to get something done.
Pairing A — The hand-painted sign + the guidebook
RecommendedDisplay: Sharpie (variable, 300–900) · Text: General Sans (variable, 200–700)
A hand-painted marker face for the surfaces that are allowed to shout, and a plain, wide-apertured sans for everything a visitor actually has to read. The split is Part 6 #1 — expressive on discovery and play, calm on utility — expressed in type instead of in color.
What it buys
- Sharpie is drawn with a brush. It is the same gesture as the hand-drawn fox and the hand-drawn icon set (Part 6 #2 / #5), so illustration, iconography and headline type read as one system rather than as a mascot bolted onto a grotesque.
- It is unmistakably hand-painted commerce: this is the lettering on a burger stand, a mill-store sign, a dive-bar marquee. Part 5 §1's first instruction is to pick a face nobody else uses, and this is far off the Clash/Satoshi path everything else is on.
- General Sans has the most open apertures of the three text candidates, which is what matters at 16px on a phone in direct sun — the worst-case reading environment this app has.
- Two variable files, 26KB + 38KB, cover every weight either face will ever need.
What it costs
- Sharpie is permanently italic and has no quiet register: it works at h1 and above and nowhere else. The scale already handles this — h3 and down are the text face — but it means the display face contributes nothing below 39px.
- Its connected strokes dislike the scale's negative tracking. Display surfaces using pairing A reset to tracking-normal (see docs/ui-type-specimens.md §4).
- It is a costume. If it reads as kitsch rather than as vernacular, pairing B is the one-token retreat.
text-display · 3.815rem / 61.04px · line-height 1.1 (110%) · tracking -0.03em · display face (Sharpie (variable, 300–900))
GOLD RUSH NIGHT
text-h1 · 3.052rem / 48.83px · line-height 1.12 (112%) · tracking -0.02em · display face (Sharpie (variable, 300–900))
Charlotte, North Carolina
text-h2 · 2.441rem / 39.06px · line-height 1.18 (118%) · tracking -0.015em · display face (Sharpie (variable, 300–900))
Tonight on the Rail Trail
text-h3 · 1.953rem / 31.25px · line-height 1.25 (125%) · tracking -0.01em · text face (General Sans (variable, 200–700))
Brooks' Sandwich House, and the line
text-h4 · 1.5625rem / 25px · line-height 1.3 (130%) · tracking -0.005em · text face (General Sans (variable, 200–700))
Open now · closes 10pm
text-body-lg · 1.25rem / 20px · line-height 1.5 (150%) · tracking 0 · text face (General Sans (variable, 200–700))
Nineteen miles of Blue Line run from I-485 up to UNC Charlotte, and the ride takes a little over an hour end to end.
text-body · 1rem / 16px · line-height 1.5 (150%) · tracking 0 (default) · text face (General Sans (variable, 200–700))
The streetcar ran up Tryon for forty-seven years, and the city spent seventy more pretending it hadn't. Start at the Square, walk south, and the towers thin out somewhere past the rail trail — after that it is mostly patios, dogs on brewery floors, and the occasional heron that has worked out where the creek was buried.
text-caption · 0.8rem / 12.8px · line-height 1.5 (150%) · tracking +0.01em · text face (General Sans (variable, 200–700))
Hours verified 2026-08-06 · call ahead on a holiday
Pairing B — Warm editorial
Display: Cabinet Grotesk (variable, 100–900) · Text: Switzer (variable, 100–900)
The safety pick. A characterful grotesque with a tall x-height over a Swiss-neutral workhorse — warmth everywhere, no costume anywhere, and a display face that keeps working all the way down to h4.
What it buys
- Cabinet Grotesk covers the whole heading range, so a surface can be typographically distinct without the h3/h4 handoff pairing A needs.
- 100–900 on both faces is the widest weight range on the shortlist — the most room for hierarchy without changing size.
- Nothing here can date badly or read as a gimmick.
What it costs
- It does not shout. 'GOLD RUSH NIGHT' set in Cabinet Grotesk is a heading, not an event — the Part 4 energy would have to come entirely from color and layout.
- Switzer's tight default fit reads slightly grey at body size next to General Sans.
text-display · 3.815rem / 61.04px · line-height 1.1 (110%) · tracking -0.03em · display face (Cabinet Grotesk (variable, 100–900))
GOLD RUSH NIGHT
text-h1 · 3.052rem / 48.83px · line-height 1.12 (112%) · tracking -0.02em · display face (Cabinet Grotesk (variable, 100–900))
Charlotte, North Carolina
text-h2 · 2.441rem / 39.06px · line-height 1.18 (118%) · tracking -0.015em · display face (Cabinet Grotesk (variable, 100–900))
Tonight on the Rail Trail
text-h3 · 1.953rem / 31.25px · line-height 1.25 (125%) · tracking -0.01em · text face (Switzer (variable, 100–900))
Brooks' Sandwich House, and the line
text-h4 · 1.5625rem / 25px · line-height 1.3 (130%) · tracking -0.005em · text face (Switzer (variable, 100–900))
Open now · closes 10pm
text-body-lg · 1.25rem / 20px · line-height 1.5 (150%) · tracking 0 · text face (Switzer (variable, 100–900))
Nineteen miles of Blue Line run from I-485 up to UNC Charlotte, and the ride takes a little over an hour end to end.
text-body · 1rem / 16px · line-height 1.5 (150%) · tracking 0 (default) · text face (Switzer (variable, 100–900))
The streetcar ran up Tryon for forty-seven years, and the city spent seventy more pretending it hadn't. Start at the Square, walk south, and the towers thin out somewhere past the rail trail — after that it is mostly patios, dogs on brewery floors, and the occasional heron that has worked out where the creek was buried.
text-caption · 0.8rem / 12.8px · line-height 1.5 (150%) · tracking +0.01em · text face (Switzer (variable, 100–900))
Hours verified 2026-08-06 · call ahead on a holiday
Pairing C — Maximum poster
Display: Clash Display (variable, 200–700) · Text: Supreme (variable, 100–800)
The impact benchmark. Clash Display is the loudest geometric on Fontshare and the natural face for C5's brutalist price anchors; Supreme puts some warmth back underneath it.
What it buys
- The highest raw impact per pixel of the three — tight, dense, and built for the 3-second scan of Part 5 §7.
- The obvious answer for the deals surface, where the price is the hero and a number has to hit hard.
- Supreme has more personality than Switzer without competing with the display face.
What it costs
- Clash Display is everywhere. Adopting it makes this app look like every other 2024–2026 redesign, which is exactly what Part 5 §1 says not to do.
- It is cold. There is no line in it that connects to a hand-drawn fox; the mascot would sit next to the type rather than belong to it.
text-display · 3.815rem / 61.04px · line-height 1.1 (110%) · tracking -0.03em · display face (Clash Display (variable, 200–700))
GOLD RUSH NIGHT
text-h1 · 3.052rem / 48.83px · line-height 1.12 (112%) · tracking -0.02em · display face (Clash Display (variable, 200–700))
Charlotte, North Carolina
text-h2 · 2.441rem / 39.06px · line-height 1.18 (118%) · tracking -0.015em · display face (Clash Display (variable, 200–700))
Tonight on the Rail Trail
text-h3 · 1.953rem / 31.25px · line-height 1.25 (125%) · tracking -0.01em · text face (Supreme (variable, 100–800))
Brooks' Sandwich House, and the line
text-h4 · 1.5625rem / 25px · line-height 1.3 (130%) · tracking -0.005em · text face (Supreme (variable, 100–800))
Open now · closes 10pm
text-body-lg · 1.25rem / 20px · line-height 1.5 (150%) · tracking 0 · text face (Supreme (variable, 100–800))
Nineteen miles of Blue Line run from I-485 up to UNC Charlotte, and the ride takes a little over an hour end to end.
text-body · 1rem / 16px · line-height 1.5 (150%) · tracking 0 (default) · text face (Supreme (variable, 100–800))
The streetcar ran up Tryon for forty-seven years, and the city spent seventy more pretending it hadn't. Start at the Square, walk south, and the towers thin out somewhere past the rail trail — after that it is mostly patios, dogs on brewery floors, and the occasional heron that has worked out where the creek was buried.
text-caption · 0.8rem / 12.8px · line-height 1.5 (150%) · tracking +0.01em · text face (Supreme (variable, 100–800))
Hours verified 2026-08-06 · call ahead on a holiday
Changing the pick
Two lines in app/globals.css, inside the @theme static block. Nothing else in the codebase names a typeface — body reads var(--font-sans), which resolves to var(--font-text), and every display surface reads var(--font-display).
--font-display: var(--font-display-b); --font-text: var(--font-text-b);
The losing candidates stay declared so this page keeps working and so a later reversal is the same two lines. They cost the app nothing: a browser fetches a @font-face file only when a glyph on the page needs it, so the four unused faces are downloaded on this route and on no other.