The evolution of design on digital platforms is being driven in part by by the oldest element of graphic design: type. Sincemost of the web is words, it’s fitting that the greatest advances are centred around typography. Not only can we implement many of typographic techniques but the technology of fonts themselves has evolved to make not just the design responsive to screen size and user context, but the type itself also. Variable fonts let us make use of the whole design space of a typeface and give us ways to react to user context. We’re just beginning to explore how we can shape the interaction between reader and text or user’s environment and the presentation of content. During Jason's presentation, we’ll look at how this works live in a web browser during, with links to sample pages and code, and guides on how to make use of the new features. It’s a really exciting time to help shape what comes next.
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.
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