A presentation at TDC Online Workshop in in New York, NY, USA by Jason Pamental
Part talk, part workshop—this event will introduce attendees to variable fonts (the latest iteration of the OpenType specification) and look at all the ways they can transform how we think about typography on the web. We’ll start with a showcase of the different kinds of standard and custom axes of variation, how they work on the web, and then look at ways they can transform how we think about what typography is, and how we practice it. Finally, we’ll take a look at how variable fonts can enable greater design flexibility and bring better editorial design to the web then you ever thought possible.
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.
The most up-to-date techniques, specs, and support for implementing variable fonts.
An introduction I wrote for the annual 24ways Web Design/Development ‘Advent Calendar’ site. It’s got loads of embedded examples and code too.
No, a font called Recursive. And it’s variable. By Stephen Nixon for Google Fonts. It’s lovely, and you should try it.
I wrote a bit about the new API and provide a bunch of sample bits. Very early, very beta, very awesome: serve variable fonts from Google.
I get asked a bit about where to go to start learning about typography, so I put together a collection of good books and resources to get you started.
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.
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!
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)
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.
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.
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.
