Back to Agenda

11/13/2024 - 14:15

Fluid typography (and its role in design systems)

Using a fun metaphor, Richard will take the audi­ence on a jour­ney from sta­t­ic to respon­sive web design through to flu­id typog­ra­phy. You will learn what flu­id typog­ra­phy means and he’ll show why its com­bi­na­tion of type and spac­ing is so impor­tant to read­ers and users. You will see that flu­id typog­ra­phy can be imple­ment­ed eas­i­ly in CSS, pro­vid­ed you have the right mind­set. Most impor­tant­ly you will learn how a flu­id approach encour­ages design­ers and devel­op­ers to share a com­mon lan­guage, reduce design debt and sim­pli­fy work­flows. Final­ly he’ll show how flu­id typog­ra­phy can be used and doc­u­ment­ed in a design sys­tem using real world examples.

Learning objectives

  • Design a system within which elements scale proportionally and fluidly, instead of implementing x number of arbitrary and fragile breakpoints
  • Design and code a typographic system minimally and elegantly
  • Streamline collaboration between design and development roles
  • Ensure visual harmony and consistency with type at its heart, including getting started with the free 'Utopia' Figma plug-ins
  • 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)
  • Apply all the above to a design system

Level

Expert

Prior knowledge

Intermediate to advanced knowledge of CSS
Richard Rutter is a designer living in Brighton, UK. In 2005, he co-founded Clearleft, now one of the world’s leading digital design consultancies. Richard loves to combine his fascination for typography with a belief in the Web as a force for good. As a self-appointed web typography evangelist, Richard is chief organiser of Clearleft’s Ampersand web typography conferences. He also co-founded Fontdeck, a pioneering web font service. A few years ago he realised a dream and published his book Web Typography to much acclaim. A few years ago Richard was named as one of Wired UK’s top 100 people shaping the digital world, which was nice. Follow Richard on LinkedIn and in the Fediverse.