Responsive Typography

Typography is the single most present element of your design when screen size changes, and has the greatest influence on readability and retention. Learn how to use web fonts to amplify the message and voice of your design without sacrificing performance, how to scale your typography based on screen size, and how little details layered together make a good experience become a great one.

This workshop will cover a number of topics, with exercises to work through each one. We’ll work through how to implement web fonts properly for best performance and progressive enhancement, whether self-hosting fonts or using a service. We’ll also look at how screen size impacts typographic scale, with sample code that includes a modular scale to start with. Finally we’ll cover a number of ideas to leverage such as OpenType Features, CSS equivalents of typographic techniques, and troubleshooting tips.

You can view the Demo Page live here: ‘Restoration Period’ Demo Page

There’s a nice post about my workshop at TYPO Berlin as well.

Slides from my ATypI 2017 workshop can be downloaded here.