Friday, 17 May, 2019

Variable fonts and quirky custom axes

Now that we’ve covered the basics of what variable fonts are, how to implement them, and a bit more about what we can do with them to improve the reading experience, let’s focus on some fun. While the registered axes are the workhorses of everyday use, the wonder of the format is its extensibility. Any type designer can declare a new custom axis for their own font, and expose whatever aspect of the typeface that wish to vary. This week we’ll take a look at a few that can help showcase just how much is possible.

Shadow dancer

David Jonathan Ross’ FontOfTheMonth.club release Extaordinaire has two variable fonts paired together: the regular version with a weight axis, and a shadow version that has both weight and shadow distance axes. This allows for creating a beautiful Art Deco-inspired shading effect, letting you add the shadow as separate text that can even be animated or colored separately from the main text. Have a play around with it on CodePen too.

Extraordinaire variable font with shadow — Extraordinaire-ily stylish, with complementary shading

Custom axes are always set using ‘font-variation-settings’, and according to the CSS specification, the four-letter keyword should always be upper case.

.shadow {
  font-family: "ExtraordinaireVariableShade";
  font-variation-settings: "SHDW" 32;
}

Dripping with style

Cheee is a variable font from OhNo’s James Edmondson that has axes for Yeast, Gravity, and Temperature. Mandy Michael made an awesome animated demo with it, and I’ve linked to a copy of that which I tweaked a bit more. It’s super fun to play with, and is just begging to be used in your next B-movie horror film site.

Cheee variable font example, oozing style — Cheee from OhNo has crazy-sounding axis names like Yeast, Gravity, and Temperature

You might notice below that the keywords are in lower case. This should likely be corrected, but it’s embedded in the font that way so it’s a bit of work in the part of the type designer to sort that out.

.oozing {
    font-family: "Cheee";
    font-variation-settings: "temp" 1000, "yest" 1, "grvt" 500;
    animation: variation 10s linear infinite;
}
@keyframes variation {
    0% {
        font-variation-settings: "temp" 0, "yest" 1, "grvt" 500;
    }
    50% {
        font-variation-settings: "temp" 1000, "yest" 600, "grvt" 1;
    }
    100% {
        font-variation-settings: "temp" 0, "yest" 1, "grvt" 500;
    }
}

Growing up and growing down

Another DJR FontOfTheMonth.club release is Rhododendron. The expanded bonus variable font came with a weight axis and two additional axes for the height and depth of the ascenders and descenders. Varying them has a dramatic effect on the visual tone, and can give some really wonderful character, especially if you try animating it ever so slightly. You can play around with all three axes in the demo on CodePen.

Rhododendron font has weight axis plus height and depth of ascenders and descenders — Rhododendron has a weight axis and two others that control the height and depth of ascenders and descenders

Thanks to the weight axis, a <strong> tag was all that was needed for the bold weight ‘Rhododendron’—and font-variation-settings helps us with the rest.

p {
  font-family: "Rhododendron";
  font-variation-settings: "ASCN" 225, "DESC" 150
}

And just a little bit more

These are really just the top of the variable iceberg. There are already a slew of interesting offerings both free and paid on Nick Sherman’s v-fonts.com site. Here are a few in particular that have caught my eye:

Wind from Typotheque:
Jabin is free to use from Frida Medrano (with some serious swashery)
Underware has an amazing variable fonts playground

Belo Write variable font demo from Underware

Underware sent me a test page to showcase in a talk last year, and the axes in this one are time (to draw in the text), and ink spread as the letters fill out

Resources

Topics

Variable Fonts Typography