A presentation at An Event Apart Orlando: Special Edition 2018 in in Orlando, FL, USA by Jason Pamental
For centuries, typography has shaped the way we ‘hear’ what we read. In our web work, though, we've have to balance our typographic desires with user experience and performance, knowing that every weight, width, or style of a typeface required a different file download. Variable fonts change that, as they include every width, weight, slant, and other permutation of a typeface, all in a single file not much bigger than a regular font file. Now, beautiful web typography can be crafted to respond to screen size, language setting, even ambient light. In a detail-packed hour, Jason will show you not just how far the new capabilities can take us, but how to make use of them right away.
The following resources were mentioned during the presentation or are useful additional information.
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.
This is a fantastic typeface, and it was a real treat to design the demo page for it's introduction.
It's an earlier beta, but still an interesting experiment. Hoping a fuller release will be out by the end of the year.
(Variable font is a beta, but you should ask them about it and tell 'em I sent ya)
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
Here’s what was said about this presentation on social media.
