Responsive Type & Typography

A Primer on Variable Fonts and Modern Digital Typography

Variable Fonts are fast becoming the new standard in supported web font technology—remarkably in only a little over a year since their introduction. In this workshop we will look at what makes Variable Fonts different, how they are being implemented now and what the possibilities are in the future. We’ll work through implementing variable fonts in a responsive site, coupled with the latest techniques in font loading, responsive scale using CSS custom properties (aka ‘variables’) and calculations, and look at what else we can combine to make beautiful, responsive, sustainable typographic systems for use on the web and in mobile applications. Finally, we’ll look at aspects of the user experience that we can improve in ways never before possible—challenging the very notion of what ‘good typography’ means and can be.

Code for the workshop is hosted on GitHub and is open to all. Download the slides here too.