Responsive typography and its role in design systems

Later this year – 7 March 2024 to be precise – I'll be talking at Patterns Day, the one-day conference for designers and developers focused on design systems, pattern libraries, style guides, and components. Jeremy asked me to weave responsive typography into his narrative of the day. It's a tricky challenge, but one I'm excited to take on – how to explain something as all-encompassing as typography in the context of something so potentially granular as a design system?

Before I show you what I've come up with, know that you can get 10% off Patterns Day using the code JOINRICHARD. Right, here's my approach:

Typography is what comes between the author and the reader. This is as true on the web as it is in any other medium. If text has anything at all significant to say, it needs a typographer’s care. This will in turn be repaid by the reader’s attention, whether they are immersing themselves in great writing, or getting through a complex task.

Exceptional typography on the web emerges only when designers and developers share a systematic approach to fluidity in responsive design. This talk will provide designers with a rigorous way of working with responsive typography, and developers with that same knowledge, coupled with fundamental (yet underused) techniques and CSS. Above all it will provide designers and developers with a common understanding, and a way of working closely together starting in software and ending in the browser. You will learn how to:

• Ensure visual harmony with type at its heart
• Design a system within which elements scale proportionally and fluidly, instead of implementing x number of arbitrary and fragile breakpoints
• Think about typography in 'declarative' terms (by setting durable rules the browser can follow based on context, rather than fragile 'imperative' pixel-by-pixel specifications)
• Successfully set fluid type globally, but apply at a local, component-level
• Design and code a typographic system minimally and elegantly
• Streamline collaboration between design and development roles

Each step in the talk will give a brief theoretical setting with examples, backed up by the practical application to take away. Finally I'll tie it all together by looking at how responsive typography has been implemented successfully into real world design systems.

It sounds like a lot to cover in 30 minutes, but the concepts are fundamentally simple. That said, thinking fluidly can require a bit of a shift in mindset – and that's ultimately what I hope to achieve with the audience. I can't wait – hopefully see you there!