Typography tokens

Three system font stacks, a seven-step fluid scale whose slopes are calculated rather than guessed, four line heights sized for Cyrillic, and the small set of weight, tracking and numeral controls that everything else is built from.

Font stacks

Three tokens, and all three are system stacks. That is a decision, not an omission: zero network requests, zero flash of unstyled text, no font files to self-host, no licence to track, and nothing that can fail to load on a slow connection. Every face named in the stacks carries full Mongolian Cyrillic coverage, including ө and ү — the two characters that most Latin-first stacks fall back to a different face for, producing a visible mismatch mid-word.

Sans

Everything by default: body copy, headings, controls, nav.

Mono

Code, token names, identifiers, and anything that has to align by column.

Display

Large headings. Currently an alias of the sans stack — a named seam, so a display face can be introduced later without touching call sites.

The fluid scale

Seven steps, --text-xs through --text-3xl, each a single clamp(). The slopes are derived rather than eyeballed. For a 16px root, 1vi is V/1600 rem where V is the viewport inline size in pixels. Anchoring the minimum at 20rem (320px) and the maximum at 96rem (1536px) means the vi term has to cover the difference across 0.96 - 0.2 = 0.76:

slope     = (max - min) / 0.76
intercept = min - 0.2 * slope

/* --text-lg: min 1.125rem, max 1.375rem */
slope     = (1.375 - 1.125) / 0.76 = 0.3289
intercept = 1.125 - 0.2 * 0.3289   = 1.0592

--text-lg: clamp(1.125rem, 1.0592rem + 0.3289vi, 1.375rem);

The unit is vi rather than vw, so the scale stays correct if a consumer ever switches writing-mode.

Specimen

Latin on the left, Mongolian Cyrillic on the right, in equal columns at the step's own size. The length difference is the point: the same message runs roughly 15–25% longer, and it is a layout constraint, not a translation problem.

Line height

Four steps. --leading-normal is deliberately more generous than a Latin-only system would choose, because Cyrillic sets taller at the same font size: the x-height is larger relative to the em, and descenders on у, р and ц reach further down. A leading that reads as comfortable in English closes up in Mongolian.

--leading-tight is for display headings only. It is safe on two or three words set large; it is not safe on running Cyrillic, where the descenders start touching the line below.

Each block below is the same pair of paragraphs at a narrow measure, so both wrap to several lines and the difference is visible rather than theoretical.

Weight, tracking and numerals

Weight

Four steps, no more. The system stacks do not all ship every intermediate weight, and asking for one that does not exist gets you a synthesised face that looks wrong in Cyrillic before it looks wrong in Latin.

Tracking

Tabular numerals

--font-numeric-tabular is a font-feature string, not a length: . tnum makes every digit the same advance width so columns line up; lnum forces lining figures so digits do not sit at different heights beside each other. Currency columns need both.

src/base.css wires this up for you. Any cell marked data-numeric gets end alignment and both features, so a table author never writes the token by hand:

td[data-numeric],
th[data-numeric] {
  text-align: end;
  font-variant-numeric: tabular-nums;
  font-feature-settings: var(--font-numeric-tabular);
}

<table>
  <thead>
    <tr><th scope="col">Account</th><th scope="col" data-numeric>Balance</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">5401 2233</th><td data-numeric>1,240,500</td></tr>
  </tbody>
</table>

Underlines

Two tokens, applied by base.css to links.

How headings map

src/base.css assigns one scale step per heading level. Nothing else in the system sets a heading size, so this table is the whole mapping.