Web Directions Year round learning for product, design and engineering professionals

Web fonts, without the jank with Michael Taranto

Overview of the Talk

Fallback fonts. They don’t often get much of our attention, after all, they are only a fallback! But their importance is growing with a focus on user experience metrics like Cumulative Layout Shift (CLS) — a metric targeted at improving janky page load experiences.

In this talk, we will explore modern CSS font-face descriptors, such as size-adjust and metric overrides, and leverage fallback fonts for better alignment with web fonts.

To achieve this, we journey through the world of font metric tables and how we can use them to calculate the required CSS, dramatically reducing layout shift on page load — all the design aesthetic of web fonts, without the jank.

Speaker Background

Michael is the Design System Engineering Lead at SEEK, looking after the Braid Design System and supporting tooling. As the co-creator of open source libraries such as Capsize, Playroom and Vanilla Extract, he enjoys working on and contributing to solutions in the open source community.

He has a passion for working at the notoriously separated intersection of design and engineering, and enjoys innovating on solutions that bridge the gap and help teams deliver systems-based web experiences faster.