Note: This full-day hands-on workshop will be on Thursday Sept 12 from 10am to 5pm and requires a “WORKS” or “WORKSHOP Only” ticket to attend.
This workshop is intended to provide a brief introduction to the concepts of responsive typography and variable fonts (a new development in type technology). The main areas of focus will be on creating a modern, scalable typographic system to give the best reading experience using modern CSS techniques; implementing variable fonts well for improved user experience and performance; and spending some time on editorial design and user interface enhancements leveraging some of the unique new features enabled in variable fonts. We’ll also look at light/dark mode support and a range of accessibility features that can be enabled and exposed for users to give them more control over their own experience. Finally, we’ll spend some time looking at new developments in variable fonts and what the W3C is working on to make serving fonts even faster (and how those two things will change the web in significant ways).
Learn how to increase web font performance, improve user experience through better implementation, explore variable fonts, and get to know a whole bunch of new CSS techniques (including CSS Custom Properties, calc(), light/dark modes, and more).
Front-end developers and designers concerned with typography, performance, and user experience.
Assumed Audience Knowledge
Be fairly proficient with HTML/CSS and familiar with basic techniques of responsive web design
Five Things Audience Members Will Learn
- What are variable fonts and how do they impact performance and UX?
- How to use CSS Custom Properties, calc(), and variable fonts together in a scaling typographic system
- How to use @supports to put variable fonts in production today (along with some other newer CSS techniques where they are supported)
- Ways in which accessibility is aided by typography, and how adding some simple user controls can make typography even more accessible
- How to load web fonts faster, and get content on screen even faster than that
Laptop w/code editor and multiple web browsers (make sure Firefox is one of them for their font dev tools)