A presentation at Smashing Conference in in San Francisco, CA, USA by Jason Pamental
A live-coding demonstration of a whole bunch of new techniques and tips. It includes all sorts of dynamic typography ideas, light mode, variable fonts, and a bit more. This was originally put together for Smashing Conference, and given in a live coding/demonstration format. It’s the first time I’ve had the chance to do this, and while slightly terrifying, I’m pretty pleased with how it went!
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.
