Variable font
One font file that slides continuously between weights, widths and other settings instead of one file per style.
See it
What it is
A variable font packs an entire design space into one file. Instead of shipping Light, Regular, Medium, Bold and Black as five separate files, the designer draws the extremes and the font interpolates everything between them along named axes: 'wght' (weight), 'wdth' (width), 'slnt' (slant), 'ital', 'opsz' (optical size), plus any custom axis the foundry invents. In CSS you ask for 'font-weight: 543' or reach for 'font-variation-settings' and it just works.
Reach for one when you want fine-grained control (a heading at weight 620 because 600 was limp and 700 was shouty), when you want to animate or hover-morph type, or when you genuinely use four or more styles and want them in a single request. The familiar names (Regular, Bold) survive as named instances: bookmarked coordinates in the design space, nothing more.
Gotcha: a variable file is much heavier than one static weight, so if your site only uses Regular and Bold, two static files usually win the byte war. Subset aggressively, and pin the axis range in '@font-face' with 'font-weight: 100 900' so the browser stops synthesizing faux bold on top of a perfectly good bold axis.
Ask AI for it
Load a variable font (Inter Variable or Recursive) as a single '@font-face' with 'font-weight: 100 900' and use the weight axis as a design tool, not just Regular and Bold: body at 400, UI labels at 480, section headings at 620, hero at 760. Add a hover state on the nav links that transitions 'font-variation-settings: "wght"' from 450 to 650 over 200ms, and keep the layout from shifting by reserving width with a fixed min-width. Show the CSS.