Modern CSS, Dynamic Typography, and Variable Fonts

Come take a deep dive into the most fundamental part of the interface between your site and your viewers: the type. We’ll dig into the concepts of responsive type and typography, how to make it fast, and how to use modern web development techniques and technologies to make your typography work better and be more engaging than you ever thought possible. We’ll also explore how classic typographic techniques translate to the web, and how those techniques can inform how the web develops in the future.

We'll also cover:

• New capabilities with CSS Custom Properties, calculations, light mode media queries, and more
• How to give the best reading experience
• How to implement variable fonts well for improved user experience and performance
• Look at editorial design and user interface enhancements leveraging some of the unique new features enabled in variable fonts
• Explore a range of accessibility features that can be enabled and exposed for users to give them more control over their own experience
• Spend time looking at what the W3C is working on to make serving fonts even faster (and how those two things will change the web in significant ways)

During the Workshop

We’ll work through several examples to incorporate proper font loading management, variable fonts, scaling typography, and various other techniques we cover into your own demo project. Each part will be added into the demo so by the end of the day you’ll have all the techniques layered together. As time allows we’ll also discuss some of your own real-world projects and look at how these techniques could be brought into your own production workflow.

After This Workshop You Will

• Know what variable fonts are and how do they impact performance and UX
• Know how to use CSS Custom Properties, calc(), and variable fonts together in a scaling typographic system
• Be able to use @supports to put variable fonts in production today (along with some other newer CSS techniques where they are supported)
• Understand ways in which accessibility is aided by typography, and how adding some simple user controls can make your site or app even more accessible
• Know how to load web fonts faster, and get content on screen even faster than that

This Workshop Is For

Developers who frequently have to make design decisions about layout, typography, and other design elements in the context of creating responsive front-ends. They will learn about typographic fundamentals and better understand how and why typography should change across screen sizes and use cases. They'll also learn techniques to improve overall and perceived performance, reduce render blocking, and mitigate the negative impact of unstyled text during the loading process.

Designers  may or may not know much about typography or even how much of that knowledge can be applied to the web. During this workshop they'll learn much more about what can be done, and why they might want to do so. They will also learn about how to improve their design and resulting user experience by taking advantage of the capabilities of variable fonts. With a better understanding of the technical possibilities, they will be better able to work with their own designs in code and to have better conversations with developers about what they are trying to accomplish.