Variable fonts: axes, instances, and compatibility
Understand weight, width, slant, optical-size, and custom axes, plus when a variable file is better than a set of static fonts.
Reviewed
A variable font stores a design space
Instead of shipping a separate file for every style, a variable font interpolates between masters along registered axes such as weight (wght), width (wdth), slant (slnt), italic (ital), and optical size (opsz). Custom axes are also possible. Named instances provide convenient presets, but applications can choose intermediate values when they support the axis.
One file is not automatically smaller or simpler
A variable family can save bytes when a project needs many styles, while a site using only Regular and Bold may do better with two subsets. Application support, hinting, layout features, and axis ranges must be tested. Some software exposes only named instances; other software allows full sliders or CSS ranges.
Declare axes accurately on the web
In CSS, specify the supported ranges in @font-face and request registered axes with familiar properties such as font-weight and font-stretch where possible. Use font-variation-settings for custom or exceptional control. Avoid selecting values outside the declared range, and test synthesized italics or bold so the browser does not fabricate a style unintentionally.