The Evolution of Typography with variable fonts

Jason Pamental writes: "For centuries, type has been how we 'hear' what we read. It's also generally understood that typefaces and typography are a core element of branding, of expression, of vocal range. Great typography influences understanding, mood, and meaning in countless ways and is an essential part of design."

In this Medium Members article (if you can't read it, try the gorgeous article page Jason made just for this piece!), Jason gives us a bit more insight into the effective ways in which variable fonts can serve us well (and no, this isn't just another article about variable fonts). For the uninitiated, however,

The advent of Variable Fonts changes that entire dynamic. As described by John Hudson, a variable font is a single font that acts as many: all the variations of width and weight, slant, and even italics can be contained in a single, highly efficient and compressible font file.

Understandably, some designers and developers are still not convinced how variable fonts can be used without introducing too much choice paralysis. Which weights should we go for in a design? How bold is bold? Where should an extra-bold parameter take place, in a design? 

The typical scenario would be to constrain any given design to 3–5 different fonts to represent every aspect of a site’s design language and voice — including every permutation for body copy and headings. At its simplest implementation, variable fonts would give us the freedom to use different weights for every level of heading — greatly increasing their clarity and readability. 

A really interesting suggestion Jason makes relates to proportions and multipliers. narrower characters could be used for headings, or even data-dense displays of information. "Weight and width could become multipliers on the standard body copy settings. Doing so would allow those aspects to scale easily along with the body copy should its settings change based on screen size or user preference."

Perhaps the most interesting piece of food for though is optical-sizing possibilities and how they're making a comeback in variable fonts. So what is optical sizing? I'll let Jason, once again, do the smart talking:

[Optical sizing], not as often found on sans-serif designs, but in decades past (in truth, for centuries), it was quite common for the physically smaller sizes of a typeface to be cut with slightly heavier strokes, more open bowls and counters, and in some cases even wider apertures in order to preserve readability. Newspapers in particular found this critical to ensure lines didn’t get lost or letters didn’t suffer too greatly from ink gain.

If you're on a modern browser which supports variable fonts (as you should), you can try opening this Codepen page and see how it all plays together so well.


Want to receive more content like this in your inbox?