The Variable
Variable fonts is a file that includes an entire font family, allowing for many different variations in style without the need to use a separate file for each.Variable fonts have been designed to have one or more axis of variation. These axes allow the designer to enter any value within a given range for a particular aspect of the design. Sometimes this is a scale (e.g. weight), and sometimes it is a choice of on or off (e.g. italic). Unlike static fonts, which are available in a few select options, a designer can enter any applicable number on the scale. There are five standardized axes: weight, width, slant, italic, and optical size, and designers can also create custom axes to define other values that are not covered by these options. All variable fonts allow you to define a value for at least one of these axes, but few include them all. *We are only going to experiment with one axis = WEIGHT.
Using variable fonts in graphic design enables designers to make quick changes using a slider, rather than changing to different font files. Most websites use 6-8 variations of a font, each one requiring an HTTP request and a download of around 20kB (or more). Using a variable font reduces this to one HTTP request and a smaller overall download size. This reduces loading times, improving the user experience.