A presentation at Designthinkers Toronto in in Toronto, ON, Canada by Jason Pamental
Variable fonts are an exciting and significant new development in font technology. Combining all the various widths and weights of a typeface within a single font file, this new format can increase both design possibilities and performance, while allowing for other axes of variation that can improve accessibility and user experience in ways never before possible. We’ll look at how this can strengthen brand voice and fidelity, react better to user context (screen size and resolution), and even allow greater user configuration (font size and contrast). All of this while loading fewer files and serving less data, helping improve page speed as well. It’s a whole new way of thinking about typography, and can be put into practice right away. We’ll look at a number of examples, and see how they have expanded the design language and landscape for a variety of organizations from a state government to a major sporting brand, and a few more in between.
I’ll also be showing the road ahead for web font performance with a sneak peak at what the W3C Web Font Working Group is researching, including a live demo of Google’s proof-of-concept showcasing the font serving speed increase potential.
[Note: the embedded presentation isn’t quite perfect in how it scales, but it’s at last mostly readable :)]
The following resources were mentioned during the presentation or are useful additional information.
A weekly newsletter I publish with tips and resources about web typography.
Fascinating variable font solution to missing greek glyphs in web fonts.
No, a font called Recursive. And it’s variable. By Stephen Nixon for Google Fonts. It’s lovely, and you should try it.
Very early, very beta, very awesome: serve variable fonts from Google.
This was inspired by a discussion with Marcy Sutton, Val Head, and others about how to design for light modes, while still allowing the user to express a preference which can then override the general OS preference. I think it’s a useful pattern for other kinds of user preferences like ‘prefers reduced motion’ as well.
This is the first part of a redesign that I’ve been working on with Ad Hoc. Featuring two beautiful variable fonts and an entirely new design system that incorporates virtually all of the dynamic typographic techniques shown in this presentation.
I wrote about these techniques in detail in my newsletter a little while back. Lots of details and links to more demo code.
Mandy created a really great JS method for using JS with a CSS custom property to scale font weight based on viewport size. Will definitely be looking at adding this to future projects!
This is the first exploration of what we’re working on in the W3C Web Fonts Working Group—which will lead to some truly revolutionary changes in how we serve fonts on the web.
Brand new! IBM has just released a 2-axis (width and weight) variable version of Plex Sans.
This is my remix of Jeffrey Zeldman’s news typography demo that he created for the Poynter Institute, adding in a whole bunch of responsive typography and variable fonts.
Scott Kellum and Sal Hernandez’ fluid typesetting tool. Really interesting, and able to scale more than just type. Well worth a look!
Another Javascript tool for typesetting blocks of text from Theo Rosendorf and Glyphic.
Great run-down on different techniques for dealing with day/night modes on the web.
I guide I wrote on the MDN site covering the basics of implementing variable fonts.
A collection of demos I've created on CodePen for you to play with!
Lots of links, articles, books, talks and whatnot
Good for less techy and more designy/brandy folks as well.
Explore the new fonts tab in the Firefox Dev Tools that will show you everything available in a given font (normal or variable, but let’s all agree that the variable ones are way cooler)
It's an earlier beta, but still an interesting experiment. Hoping a fuller release will be out by the end of the year.
Wentin is a designer/developer at Adobe, and she has pioneered some truly unique and compelling UI ideas for working with variable fonts. Really amazing stuff.
(Variable font is a beta, but you should ask them about it and tell 'em I sent ya)
Simple drag-and-drop web interface to discover all the features available in a given font file.
The original variable fonts playground.
Nick Sherman's variable fonts catalog site
David Jonathan Ross' design is what forms the primary typography for the talk and for my own site.
This is a fantastic typeface, and it was a real treat to design the demo page for it's introduction.
One of the first variable fonts, and still one of the most compelling ones to showcase the breadth of possibilities.
Read up on the features and issues, provide feedback, and help shape the direction of the web
One of the first two sites launched with a typographic system like I’m showing here, using Source Serif Variable (where supported) and static web fonts where they aren’t. Fantastic dev implementation done by Lullabot.
One of the first two sites launched with a typographic system like I’m showing here, using Source Serif Variable (where supported) and static web fonts where they aren’t. Fantastic dev implementation done by Lullabot.
The following code examples from the presentation can be tried out live.
Here’s what was said about this presentation on social media.
