CASE STUDY
DECOVAR
Decovar is a display font with a range
of variations designed by David
Berlow for Google. As an experimental
typeface, it has many different and
unusual axes that give the user many
creative options.
It’s because of Decovar’s many stylistic
variations that it is my favourite
variable font to experiment with.
I used Decovar to create my first
really interesting effect with variable
fonts: The Growing Text. View all the
code on CodePen (https://codepen.io/
mandymichael/pen/YYaWop).
Though Decovar does not explicitly
have this style defined, it was created
by combining two of the axis variations
- forming a ‘leaf’. I was able to animate
the text using CSS animations to
make it appear as though the text was
growing. For the first time on the web,
we can animate the text itself without
requiring other web technologies like
SVG, JavaScript or Canvas.
With the ability to create more
interesting animations with just CSS
and text, we can start to combine other
CSS effects like blend modes, clip-
path, background-clip, text-shadow
and more to achieve those Photoshop-
like effects we’ve longed for on the
web, while maintaining the ability to
edit, select, search and be readable by
a screen reader.
Decovar is free, open source and
available on GitHub: you can try it
out on Axis-Praxis. Download it from
GitHub, experiment, play and see
what is possible (https://github.com/
TypeNetwork/Decovar).
face block. So instead of using multiple
instances, we specify a range of values
that correspond to the minimum and
maximum values that are defined on the
font axis.
@font-face {
font-family: “Source Sans Variable”;
src: url(“source-sans-variable.woff”)
format(“woff-variations”);
font-weight: 200 700;
}
In this example, we set a font weight of
200 to 700. Once our range is defined,
we can choose any number within that
range as our font weight, for example 658.
Importantly if you set your font weight
range as 200 to 700 and then try to define
a weight of 900, even if the font has a 900
weight defined in its axis you will not be
able to use it. The range defines what you
have access to in your CSS.
Using custom axes
Since no pre-existing CSS properties will
exist when using a custom axis, we need
to make use of a new CSS property called
font-variation-settings. This will enable us to
define as many named and custom axes
as we need.
h1 {
font-family: ‘My Variable Font’;
font-variation-settings: ‘wght’ 375,
‘INLI’ 88;
}
In the example here, wght refers to the
registered axis of weight and INLI refers to
a custom axis called inline, each with an
associated number value corresponding
to a point along the axis of variation.
While you can reference a registered
axis as a value for font-variation-settings, it
is recommended you make use of their
mapped CSS properties instead.
Opposite: Looking at the
interpolation of a variable font
across a weight and width axis
reveals the range of customisation
that’s available
Above: When we swap between
our fallback font and a custom font,
we often see unwanted effects like
Flash of Unstyled Text (FOUT) and
layout shifting
Below: If we had a collection of
variable fonts, right in the operating
system, we could change the size of
the font to match our custom font in
size and width
Variable fonts