Typography

#How it works

Three font families are tokens, defined once next to the colour tokens in app.jsx:

The body face is the workhorse: 158 of the 186 font references. The display face is used with restraint, mostly for big numbers and codes. The word face survives on one screen.

#Weights

Five weights ship, each with a job (spec §3). Counts are rules in css/app.css at 3.23.6.

#The roles

Every size below is read from the game's CSS. "Not set" means the rule names the display face but no weight (see Known issues).

#Numbers

• Live numbers are tabular. font-variant-numeric: tabular-nums is on .pill (the clock and the score), .cc-big, .team-bar-pts and the help sheet's copies of the HUD, so a ticking number never changes width.
• Numbers lead, names last. A line that mixes a number and a player name puts the number first: "Top 7 · Samra-the real1", "833 pts · 104 behind Samra". A long name then only truncates itself.
• Clock format is minutes and seconds, 1:42, in the timer pill.

#Rules

#The labels, side by side

The eyebrow has near-twins (audit finding 7). Here they are with the same words, so the differences show.

#Why it's built this way

#Known issues and gaps

From the 3.23.6 audit, plus what turned up while writing this page:

• No type scale. 28 distinct font sizes, including five half-pixel sizes (10.5, 11.5, 12.5, 13.5 and 14.5px, 38 uses between them), and 16 letter-spacing values that mix px and em. Counting the CSS the app still renders, small uppercase labels (12px and under) come in 18 different recipes of size, weight and tracking; the table above shows five. Planned fix: a 7-step scale as tokens (--text-micro … --text-display) and one micro-label class, with the half sizes collapsed. Scales ship one family per release after the 3.23.7 patch and the alias rename, each mocked first.
• Display rules with no weight (open since 3.9.1). 3.9.1 named seven: h1, h2, .room-code, .count-num, .timer.done, .rank and .headword. None has gained a weight since. h1 and h2 pick up bold from the browser's default heading style; the room code, the countdown and "Time!" render at regular weight on any phone without Arial Black. The fix was held because it changes five screens at once.
• The word face is nearly unused. The spec says --font-word sets "the traced word / tile lettering", but the tile letters and the word pill both use --font-body (spec §5 agrees with the code). Of its five references, three style classes nothing renders. Either the token gets a real job or it goes.
• The spec's tile letter size is out of date. It reads clamp(26px, 42vw / cols, 38px); the code is clamp(24px, 52cqw, 46px) with the vw line as a fallback.
• The reference page lists four weights. The one-page reference still says "500, 600, 700, 800, nothing else"; 900 ships in 11 rules. The spec was corrected in 3.23.6.
• Screenshots aren't phone type. The trivia screens were captured in Chromium at phone size, so their type is the browser's system font, not the iPhone's.

#Related

• Color: the ink tokens every role uses
• Layout and spacing: the column the type sits in
• Pill: the one live value, in 16px / 800 tabular
• Voice: what the words say