2019-05-01+net

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