Puttin' the eek back in geek

Silly hover effects and the future of web typography

December 7, 2017

With support for variable fonts inching closer, let’s take a look at what variable fonts are and what they can do. And what better way to demo cutting edge typographic web technology than through silly hover effects?

What are variable fonts?

Variable fonts are regular fonts with an extra bit of information that describes how glyphs in a font may morph. These morphing instructions allow a glyph to change shape: it might grow fatter to create a bold version, or snuggle up horizontally to create a condensed version.

This allows you to get multiple styles of a typeface out of a single font file. Black, extra bold, bold, medium, regular, light, extra light, thin — instead of needing eight separate files, you can now get these (and more) from one.

What’s cool about this? Less files, less kilobytes and much, much more typographic freedom!

A crude drawing trying to explain how points of a glyph can move to create a bold version
Artist's impression of how variable fonts work

What’s in it for me?

The two most obvious things you can change about a font are width and weight — those are variations we’re already used to. But there can be many more axes type designers can put in a font. For instance, in current web typography we don’t have the ability to change the x-height, which is the height of the lowercase letters. Changing this can increase readability in certain situations, or simply be more aesthetically pleasing. Instead of having a separate font file for each possible version, glyphs in variable fonts can be told precisely how much to grow or shrink the x-height.

But you could also change the shape or size of the serifs, the grade of the font (adjustments in weight and contrast without changing its horizontal space), the roundness of corners or even the shape of bullet holes in a Western typeface:

The words 'buffalo gals' in a Western typeface with bulletholes animating in shape
One of the very first variable fonts, made in 1992 by Tom Rickner

Or, if you want to be silly, it could make the tophat of a pile of poo emoji grow or shrink:

An emoji image of a pile of poop wearing a top hat that grows and shrinks in size
Oh this thing? Why, it's just the first variable color font emoji in the history of humankind.

The elevator pitch has always been is that “a variable font is a single font file that behaves like multiple fonts.”

So we can just stick all of our separate fonts in one file and simply morph to the one we need? Not quite. You can’t just morph from one design to a completely different design. For instance — and this is a fact that surprised me when it hit me — italics can’t really be made from a regular font. Even though they’re part of the same family, and look similar to the regular font, italics are usually a different design. The regular letter “g” might have a completely different point structure in its outlines to the italic “g”. This is inconvenient (one version has to have excess “useless” points that don’t contribute to its design), but also results in weird, distorted letters in the version in-between extremes. How would the “g” look halfway through interpolating from regular to italic?

The word 'figaro' in regular and italic style, so you can spot the differences
Both words are set in the Kinesis typeface, but have very different letter shapes for regular (left) and italic (right) which are not compatible to be easily interpolated

From the department of silly demos

So, variable fonts are fonts whose shapes can be smoothly morphed. How about we see how this works by creating some wacky hover styles? It mightn’t be serious typography, but it’s serious fun!

At the moment of writing, you’ll need a bleeding edge setup for these demos to work. They work in Chrome version 62 or newer. If you want to use Safari, you’ll need to be on High Sierra (which, by the way, also supports the only variable color font format, COLR/CPAL!).

And wouldn't you know it! 😢 Your browser isn't yet capable of futuristic high tech variable fonts. But hey, look at the bright side: you get to see how variable fonts fall back to regular fonts!

Getting bolder with Grade

Grade is a font with multiple grades that have the same widths. Because the width of the characters doesn’t change, it can be made fatter on hover without causing a layout shift:

Arsole (C4H5As), an analogue of pyrrole in which an arsenic atom replaces the nitrogen atom. The aromaticity of arsoles has been debated for many years. The compound in which a benzene ring is fused to arsole — typically on the carbon atoms 3 and 4 — is known as benzarsole.

Dancing characters with Amstelvar

Tugging on some more axes of Amstelvar, we can make the characters dance up and down on hover:

Fukalite (Ca4Si2O6(CO3)(OH, F))2, a rare form of calcium silicocarbonate discovered in the Fuka Mine of Takahashi, Japan.

Throw yo hands in the air with Noboto

Using a modified variant of Roboto called Noboto Flex we can play with the size of the ascenders and descenders, and the position of the dots. It makes the linked items happily raise their hands when hovered:

Fucitol (C6H14O5), a sugar alcohol derived from Fucus vesiculosus, a North Atlantic seaweed. Its optical isomers are also called D-fuc-ol and L-fuc-ol.

Waving weight and width with Winner

Using Winner, a display typeface that should’ve been used on sportsing outfits instead of summaries about chemical compounds (but this is a demo playground, so forgive me this typographic sin), I tried to vary width and weight simultaneously in a way that would prevent a layout shift. And as you can see, I failed gloriously at that:

Cummingtonite ((Mg,Fe)7Si8(OH)22), a magnesium-iron silicate hydroxide that is compositionally similar and polymorphic with orthorhombic anthophyllite, first identified in Cummington, Massachusetts.

It would be very hard to get this effect right. This is because of the way the CSS property works: we have to set values for all the axes through a single font-variation-settings property. All options that are not explicitly given a value will be set to their default value:

/* By default the font will have a weight of 400,
   and a width of 400 */

.thin-and-narrow {
    /* Set both weight and width to 100 */
    font-variation-settings: "wght" 100, "wdth" 100;
}

.thin-and-narrow:hover {
    /* On hover, slightly increase the weight. But
       watch out! Instead of leaving the width at 100,
       this will reset it to the original value of 400! */
    font-variation-settings: "wght" 200;
}

We created a new font technology and all we got was silly hover effects

So is this what we should do with variable fonts? Well, you can — I’m not your mom, do what you want. But of course there are more serious applications, of which “having a boatload of styles at your disposal” is the most obvious one. The fun part is that we don’t know what else this will bring us, much like the folks working on OpenType back in 1996 couldn’t have known that today we have giant networked font distribution systems, icon fonts, emoji and Comic Sans inside jokes.

The web is dynamic, fluid and ever changing, and variable fonts are better suited for this ever changing medium than regular ol’ static fonts.

And thus, variable fonts will solve every single typographic problem on the web

Except they won’t. Although they’ll save bytes and reduce HTTP requests, it’s not a magic supersolution to font performance stuff. You’ll still have to have a proper font loading strategy, and the performance gain of variable fonts will only mean your 450KB hero image will be loaded 23 milliseconds sooner.

Designwise it will only bring the possibility of using more widths, weights or other variants of a typeface. It could add a lot of typographic diversity, but it doesn’t meant it will. It won’t magically add nice typography to your site. It’s up to you. You can use variable fonts and still end up with just two weights, leaving the other 99,999,998 possibilities untouched.

But if you go beyond those two weights, if you allow this to unlock typographic possibilities previously limited by crude technological constraints, then variable fonts are a dream come true. Browser support is coming real soon, and it brings the future of web typography.