variable-fontslisted

# Variable fonts One file containing a continuous design space instead of discrete instances. Powerful and frequently misused — the most common error is reaching for `font-variation-settings` when a standard CSS property already maps to the axis. ## 1. When to invoke - Choosing between a variable font and a set of statics. - Using weight, width, optical size, slant, or italic axes. - Axes not responding, or rendering incorrectly. - Animating or transitioning a typographic axis. - Auditing whether a variable font is actually paying for itself. ## 2. Required context - **Which axes** the font exposes, and their **ranges** (read the font, don't assume — `wght 100–900` is common but not universal). - **How many instances** you'd otherwise ship. - **Real byte comparison**: variable file vs. the statics it replaces. - Whether you need **continuous** values or only named instances. - Whether the design needs **optical sizing**. ## 3. Invariant principles - **Use standard CSS properties, not `font-variation-settings`, wherever one exists.** Registered axes map to real properties: | Axis | Standard property | |---|---| | `wght` | `font-weight` | | `wdth` | `font-stretch` (or `font-width`) | | `opsz` | `font-optical-sizing` | | `ital` | `font-style: italic` | | `slnt` | `font-style: oblique <angle>` | `font-variation-settings` is a low-level override. It **does not inherit predictably per-axis** — setting it replaces the whole list, so a child that sets