Dynamic Typography with Variable Fonts

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 :)]

Resources

The following resources were mentioned during the presentation or are useful additional information.

Code

The following code examples from the presentation can be tried out live.

Buzz and feedback

Here’s what was said about this presentation on social media.