A presentation at Web Directions Design in in Melbourne VIC, Australia by Jason Pamental
Modern developments in CSS make it easier than ever to create robust, scalable, elegant typographic systems on the web. Add variable fonts and the design, technical, and performance benefits are really exciting. We’ll look at how to combine them with other CSS capabilities like custom properties, calculations, and grid to create a whole new way to think about design and development. We’ll see how they work together by using some variable fonts in layouts that work across screen dimensions, accessibility needs, design requirements, and even network speeds—better than you thought possible.
[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.
Brand new! IBM has just released a 2-axis (width and weight) variable version of Plex Sans.
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)
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.
It's an earlier beta, but still an interesting experiment. Hoping a fuller release will be out by the end of the year.
The original variable fonts playground.
(Variable font is a beta, but you should ask them about it and tell 'em I sent ya)
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
The following code examples from the presentation can be tried out live.
Here’s what was said about this presentation on social media.
