Practical Guide to Variable Fonts for Beginners
Variable fonts let you ship every weight of a family in a single file. Here is using them in production over the past four years. Variable fonts are one of the genuinely useful additions to web typography in the past decade, and I was skeptical of them when they first appeared. The pitch sounds too good to be true: one font file containing every weight, width, and optical size in the family, with the browser interpolating between the extremes. In practice, variable fonts have replaced static fonts on nearly every project I work on, but they come with a set of trade-offs I had to learn the hard way. Here is the guide I wish someone had handed me when I started. What a Variable Font Actually Is A variable font is a single font file containing a default master plus one or more additional masters that define the extremes of an axis. The weight axis is the most common, where the masters at one hundred and nine hundred weights define a range the browser can sample at any value in between. A file with weight, width, and optical-size axes can replace what would otherwise be eight or more static files, and the total file size is usually smaller than the static files combined once you need three or more variants. Not every axis is continuous in a useful way.