In comparison, the variable version of
Source Sans Pro contains all five weight
variations in the one file at a total file
size of approximately 324kb. These
variations are defined along an axis, in
this case a weight axis, starting from
extra-light (200) and ending at ultra-
black (900).
The axis in a variable font works by
interpolating the master variations,
essentially constructing new points
in-between. This means you could set
font weights at arbitrary points along the
axis presenting a much larger number
of styles and variations. Furthermore
it’s because the variable fonts can be
interpolated that we are able to animate
between each variation, enabling smooth
transitions from say a thin weight to a
bold weight – something we have never
been able to accomplish before.
What makes variable fonts even
more exciting is that designers aren’t
restricted to just a single axis. Variable
fonts can contain many different axes
representing a range of different styles.
This could include condensed, italic,
optical size or other more creative or
custom options.Improving font performance
The small file size of variable fonts is a
result of how the fonts themselves are
created. Instead of needing multiple
copies with each containing their own
specific data, variable fonts’ unique
ability to be interpolated means that each
character has a single outline consisting
of points that carry instructions on how
they should move in order to create the
different styles.
The combination of smaller file sizes
plus the vast array of typographic variety
gives web designers and developers a
much greater opportunity to present
content in more creative and meaningful
ways. It becomes much simpler to change
the fonts we use in our designs, givingVariable fonts were first announced
in 2016 and since then support for
them on the web and in software has
grown quickly. Google Chrome, Firefox,
Microsoft Edge and Safari all provide
support for variable fonts in their latest
versions on the most recent operating
systems. Given this level of support,
there is every reason for developers to
start experimenting and working with
variable fonts right now.What are variable fonts?
Variable fonts enable font designers
to define type variations within the
font itself, enabling one font file to
act like multiple fonts. Standard fonts
are grouped into font families that
contain multiple separate font files
each representing a different style, for
example a light weight or a bold weight.
Variable fonts contain all this same
information in a single font file.
Using Source Sans Pro as an example,
the standard version has a font weight
range consisting of five different weights
(200 to 900). In order to use these weights
we’d need to load all five of them as
different font files separately, totalling
approximately 924kb in size. This would
dramatically increase the overall size of
our web page. It’s because of this that we
are often required to make trade-offs
between the aesthetics of our design
versus the cost of performance.Top left A handful of the weights available in the variable
version of Source Sans Pro – all of which only adds 394kb
to the size of a site
Bottom left If you used these font weights as standard
font files they are, on average, 234kb each – resulting in a
combined file size of approximately 1864kbus the flexibility to access and tweak
the font in order to account for all sorts
of type-based design problems such as
optical illusions, readability and visual
hierarchy – without requiring a large
number of fonts. Basically variable fonts
offer us more variations in styles at less
of a performance cost.
Using Source Sans Pro as an example,
the variable version of the font totals
approximately 394kb and comes in a
wide variety of weights. If we were to
use these font weights individually as
standard font files, they are, on average,
234kb each – resulting in a combined file
size of approximately 1856kb. Of course
this calculation assumes that all the fontFEATURES
Variable fonts