| description | Use when building a typographic system for a product (modular type scale, fluid scaling across viewports, variable-font axes, web-font loading strategy), when a heading wraps badly with one orphaned word and `text-wrap: balance` is on the table, when `font-feature-settings` and `font-variant-*` both appear in the codebase and a deterministic ordering is needed, when a designer asks "why is my tabular numerals rule not working" (it likely uses the raw OpenType tag instead of `font-variant-numeric: tabular-nums`), when web-font swap causes visible layout shift (CLS) and a metric-matched fallback is required, when the LCP candidate text uses a webfont that needs preloading, or when a `font-weight: 700` declaration is being silently overridden by a `font-variation-settings: "wght" 400` in a base layer. Prevents the `line-height: 24px` trap (px line-height stops scaling with `font-size` and breaks fluid type), `font-display: block` (or the default `auto`) FOIT that destroys LCP, mixing `font-weight` and `font-variation-settings: "wght" N` (variation-settings overrides shorthand regardless of cascade order, per MDN; the shorthand silently loses), using `font-feature-settings: "smcp" 1` instead of `font-variant-caps: small-caps` (MDN explicitly forbids feature-settings for small caps), `font-size` in `px` (locks out user-controlled root scaling), pure-vw fluid type with no `rem` floor (collapses to unreadable on narrow viewports), `clamp()` with `MAX < 2 x MIN` (WCAG 1.4.4 200% zoom failure), preloading a webfont WITHOUT `crossorigin` (browser fetches the font twice), shipping six static webfont weights when one variable font would do, `text-wrap: balance` on long body paragraphs (silently falls back beyond the 6-10 line cap), and forgetting the metric-matched fallback `@font-face` (font swap visibly shifts the layout). Covers the modular-scale concept (geometric ratios 1.125 / 1.2 / 1.25 / 1.333 / 1.414 / 1.5 / 1.618 with usage rule UI-dense vs editorial), fluid typography via `clamp(MIN_REM, BASE_REM + SLOPE_VW, MAX_REM)` with the WCAG `MAX >= 2 x MIN` constraint, the five registered variable-font axes (`wght` / `wdth` / `slnt` / `ital` / `opsz`) with the high-level CSS shorthand to prefer per axis (`font-weight`, `font-stretch`, `font-style: oblique <angle>` or `italic`, `font-optical-sizing`), the seven `font-variant-*` longhands (`ligatures`, `caps`, `numeric`, `alternates`, `east-asian`, `position`, `emoji`) and their OpenType tag mapping, the rule that `font-feature-settings` is reserved for stylistic sets (`ss01` - `ss20`) and `cv*` selectors only, `font-display` value matrix (`auto` / `block` / `swap` / `fallback` / `optional`) with FOIT/FOUT trade-off and the LCP-aware default, the `<link rel="preload" as="font" type="font/woff2" crossorigin>` recipe and the rule that `crossorigin` is mandatory even for same-origin fonts, the `text-wrap` value set (`wrap` / `nowrap` / `balance` / `pretty` / `stable`) Baseline 2024 with `balance` for headings and `pretty` for body, and the CLS-prevention pattern using `@font-face` with `size-adjust` (Baseline Sept 2023) and `ascent-override` / `descent-override` / `line-gap-override` (the latter three Limited Availability in 2026, progressive enhancement). Keywords: typography, type system, type scale, modular scale, geometric ratio, fluid typography, clamp, font-size, line-height, unitless line-height, variable font, font-variation-settings, font-feature-settings, font-variant, font-variant-ligatures, font-variant-caps, font-variant-numeric, font-variant-position, font-variant-east-asian, font-variant-emoji, font-variant-alternates, tabular-nums, lining-nums, oldstyle-nums, slashed-zero, diagonal-fractions, small-caps, all-small-caps, common-ligatures, discretionary-ligatures, font-weight, font-stretch, font-style, font-optical-sizing, wght, wdth, slnt, ital, opsz, font-display, swap, optional, fallback, block, FOIT, FOUT, web font loading, preload font, crossorigin, woff2, text-wrap, balance, pretty, stable, size-adjust, ascent-override, descent-override, line-gap-override, font-size… |
