In September, at the ATypI Conference in Poland—a sort of “who’s who” in the world of typography—the world was introduced to a game-changer for Web UX design: Variable fonts.
A variable font is a single font file that behaves like multiple fonts. It has infinite liquidity of weight, width, and other attributes—all without the hefty file size. Created collaboratively by Adobe, Apple, Google, and Microsoft—along with several font foundries and font developers—variable fonts offer Web designers (like myself) countless new options.
Often, I’m limited in my font usage by page load time. In other words, I can’t use certain fonts because they’re too slow to show up on your browser. “Page load time” is a critical factor in the success of a website, and anything that slows it down—even by microseconds—can be a killer.
But thanks to variable fonts, I can now deploy an entire font family in a single, much smaller file.
Here is an example of how it works:
.gif)
Once variable fonts become supported by all Web browsers, designers will gain a huge library of new typography options—especially when creating responsive designs. Fonts can be responsive!!!
In the past, with liquid responsive layouts, I would have to curb the font size code to match the device layout. This would sometimes lead to text that looks bigger or smaller depending on the device you’re viewing it on—or fonts that just aren’t big enough to look good on high-resolution monitors.
In this regard, fonts have always been a tricky challenge for visual Web designers.
In the future, you might be able to control things like the height of certain characters or how far descenders hang as well. Tailoring these components will help sites to feel more custom and give much more control to users.
As always, much will depend on how these variable fonts are built—and we are still waiting on the support and rendering engines to make variable fonts widespread. But I’m convinced that variable fonts will play a huge role in the future of typefaces and font selection.
I’m excited to begin using these powerful new design tools. The Web is going to read very differently in the near future.