fix(landing): typography fixes across the landing page and feature shots

[aleexwong]

Three typography defects on the landing page, plus a clipping bug found while verifying them. Each is verified in Chromium rather than reasoned about — details below.

1. Italic text rendered upright

The Google Fonts request asked only for the upright axis of DM Sans (ital,opsz,wght@0,... — the leading 0 means upright only), and :root in src/index.css sets font-synthesis: none. No italic face plus no synthesis means the browser silently renders italics as regular upright text.

Affected the founder pull-quote in the story section and the three use-case testimonial quotes.

Fixed by adding the 1,... italic axis. DM Sans ships a real variable italic covering weights 400–700, so these are true italics, not a synthesised slant. Also collapsed the discrete weight lists to 400..700 ranges — both families are variable fonts, so this serves the same files while making intermediate weights available.

2. Feature-shot numerals fell back to the generic monospace

The animated shots routed every numeric readout through --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace. Outside macOS none of those resolve, so pace times, race predictions, elevation figures and plan details rendered in the generic monospace — DejaVu Sans Mono on Linux, Courier New on Windows. That reads as a third typeface next to DM Sans and Space Grotesk.

It also cost information: the fallback is wide enough to overrun .tp-day-detail's ellipsis clamp, so the training-plan cards showed 5 mi · 8:42/… instead of 5 mi · 8:42/mi.

Switched the readouts to Space Grotesk with tabular figures. Space Grotesk carries a real tnum table — verified in Chromium, tabular-nums holds 1111111111 and 0888888888 to the same width at 400/600/700 — so digits stay column-aligned through the count-up animations, which was the actual reason to reach for a monospace. The large 44:30 and 49.8 numerals already used exactly this treatment, so the small ones now match them.

Worth knowing for future work: DM Sans has no tnum, so font-variant-numeric: tabular-nums is a no-op on it and columns would jitter mid-animation. Anything numeric in these shots needs Space Grotesk.

Switched: .mono, .pl-pace, .vd-pred .t, .el-tip .mi, .ac-zrow .v, .tp-phase-meta .wk, .tp-day-detail.

--mono is kept for the genuinely code-like text in the agent chat shot (tool names, the server handle), matching the api.trainpace.com/api/mcp snippet on the landing itself. Its stack now picks up Cascadia Mono, Segoe UI Mono, Consolas, Roboto Mono and DejaVu Sans Mono so those chips land on a real UI monospace off macOS.

Separately, feature-shots.css declared font-family: "Space Grotesk" with no fallback in seven places — whenever the webfont failed to load, those numerals and titles dropped to the browser default serif. They now go through a --display custom property carrying system-ui, sans-serif, mirroring how --mono was already handled.

3. Hero <h1> requested an unavailable weight

The hero asked for font-extrabold (800), but Space Grotesk's variable range stops at 700 — Google Fonts returns HTTP 400 for a request at 800 — so with synthesis disabled it was already rendering at 700. Changed to font-bold so the markup matches what ships. No visual change.

4. Elevation tooltip clipped at the card edges

Found while verifying the above. The scrub tooltip is centred on the cursor via translate(-50%, -130%), and .stage is overflow: hidden, so at either end of the profile its outer half fell outside the card.

Swept the cursor across the full profile at 1440px and 900px, measuring the tooltip box against the stage on all four edges:

Position	1440px	900px
Mile 0.0 (left)	~30px clipped	~22px clipped
Mile 26.2 (right)	~32px clipped	~24px clipped
Vertical	clear	clear

The right-edge case is what the shot settles on, since the auto-play demo eases to the end and stops there. The left-edge case is the same bug at the opposite end.

Added a clampTipX helper holding the tooltip inside the stage with a 10px gap. There's no arrow anchoring it to the cursor, so the shift at the extremes is imperceptible. Vertical placement was clear at every sample point and is left alone.

5. Documentation (fc3f689)

These defects were all invisible in source and only showed up under measurement, so the constraints behind them are now written down.

CLAUDE.md gains a Typography section: font-synthesis: none means a face missing from the font URL fails silently rather than being synthesised, Space Grotesk stops at 700, italics need the 1,... axis, Space Grotesk has a tnum table and DM Sans does not, and webfonts always need a fallback stack.

A new verify-in-browser skill (.claude/skills/) records the Playwright setup for this sandbox and the measurement traps that produce confident wrong answers — chiefly that document.fonts.check() returns true for faces that do not exist and so cannot be used to test font availability.

Verification

• npm run build passes; all 245 prerendered pages carry the updated font stylesheet.
• npm run lint — 0 errors (96 pre-existing warnings, none in the touched files).
• Italic face confirmed registered and active in Chromium (canvas metrics differ from upright).
• Tooltip sweep re-measured after the fix: worst-case overflow 0px on all four edges at both widths, with mid-profile positions unchanged.

No unit tests exist for this area, and the change is visual, so verification is the build/lint pair plus the browser measurements above.

[netlify]

✅ Deploy Preview for trainpace canceled.

Name	Link
🔨 Latest commit	fc3f689
🔍 Latest deploy log	https://app.netlify.com/projects/trainpace/deploys/6a6e474661bcaf0008d62526

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
trainpace	Ready	Preview	Aug 1, 2026 7:22pm

[codacy-production]

Up to standards ✅

🟢 Issues 0 issues

Results:
0 new issues

View in Codacy

🟢 Metrics 44 complexity · -1 duplication

Metric	Results
Complexity	44
Duplication	-1

View in Codacy

_{NEW Get contextual insights on your PRs based on Codacy's metrics, along with PR and Jira context, without leaving GitHub. Enable AI reviewer
TIP This summary will be updated as you push new changes.}