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)
FREE CRAB NIGHT
B · Cabinet Grotesk (variable, 100–900)
FREE CRAB NIGHT
C · Clash Display (variable, 200–700)
FREE CRAB 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 boardwalk 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 a boardwalk: this is the lettering on a soft-serve stand, a bait shop, a Thrasher's sign. 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))
FREE CRAB NIGHT
text-h1 · 3.052rem / 48.83px · line-height 1.12 (112%) · tracking -0.02em · display face (Sharpie (variable, 300–900))
Ocean City, Maryland
text-h2 · 2.441rem / 39.06px · line-height 1.18 (118%) · tracking -0.015em · display face (Sharpie (variable, 300–900))
Tonight on the Boardwalk
text-h3 · 1.953rem / 31.25px · line-height 1.25 (125%) · tracking -0.01em · text face (General Sans (variable, 200–700))
Thrasher's, and the line for it
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))
Two and a half miles of boards run from the Inlet to 27th Street, and the tram covers all of it for $4 each way.
text-body · 1rem / 16px · line-height 1.5 (150%) · tracking 0 (default) · text face (General Sans (variable, 200–700))
The boardwalk was rebuilt after the 1962 storm and again after Sandy, which is why almost none of the boards you walk on are older than you are. Start at the Inlet, walk north, and the crowd thins out somewhere around 15th Street — past that it is mostly hotels, families with beach carts, and the occasional fox that has worked out where the fries end up.
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 in shoulder season
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. 'FREE CRAB 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))
FREE CRAB NIGHT
text-h1 · 3.052rem / 48.83px · line-height 1.12 (112%) · tracking -0.02em · display face (Cabinet Grotesk (variable, 100–900))
Ocean City, Maryland
text-h2 · 2.441rem / 39.06px · line-height 1.18 (118%) · tracking -0.015em · display face (Cabinet Grotesk (variable, 100–900))
Tonight on the Boardwalk
text-h3 · 1.953rem / 31.25px · line-height 1.25 (125%) · tracking -0.01em · text face (Switzer (variable, 100–900))
Thrasher's, and the line for it
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))
Two and a half miles of boards run from the Inlet to 27th Street, and the tram covers all of it for $4 each way.
text-body · 1rem / 16px · line-height 1.5 (150%) · tracking 0 (default) · text face (Switzer (variable, 100–900))
The boardwalk was rebuilt after the 1962 storm and again after Sandy, which is why almost none of the boards you walk on are older than you are. Start at the Inlet, walk north, and the crowd thins out somewhere around 15th Street — past that it is mostly hotels, families with beach carts, and the occasional fox that has worked out where the fries end up.
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 in shoulder season
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))
FREE CRAB NIGHT
text-h1 · 3.052rem / 48.83px · line-height 1.12 (112%) · tracking -0.02em · display face (Clash Display (variable, 200–700))
Ocean City, Maryland
text-h2 · 2.441rem / 39.06px · line-height 1.18 (118%) · tracking -0.015em · display face (Clash Display (variable, 200–700))
Tonight on the Boardwalk
text-h3 · 1.953rem / 31.25px · line-height 1.25 (125%) · tracking -0.01em · text face (Supreme (variable, 100–800))
Thrasher's, and the line for it
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))
Two and a half miles of boards run from the Inlet to 27th Street, and the tram covers all of it for $4 each way.
text-body · 1rem / 16px · line-height 1.5 (150%) · tracking 0 (default) · text face (Supreme (variable, 100–800))
The boardwalk was rebuilt after the 1962 storm and again after Sandy, which is why almost none of the boards you walk on are older than you are. Start at the Inlet, walk north, and the crowd thins out somewhere around 15th Street — past that it is mostly hotels, families with beach carts, and the occasional fox that has worked out where the fries end up.
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 in shoulder season
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.