Rubberband Design Dynamic Web Typography

When was the last time you were deeply in love with your work?

It’s a long way to typography Chapter 1

2012 Asking colleagues and reading through various reddit and forum entries for time worked as a ux / ui designer

UIengineering.de #uiengineering • Manifest • Hintergrundwissen • Links & Artikel • Podcast • UIengine auf GitHub

Responsive Design born in 2010, still misunderstood • Designers often still design for: • … devices or • … viewports The canvas is a xed area in the authoring tools like XD, Sketch, Figma • This makes it easy to design and make things work visually … • … until reality kicks in. fi •

Word! https://viewports.fyi

„Yeah, but our clients will only use the desktop sizes.“

„On mobile the blocks just collapse into one column“

fl „The text does not ow well. Let’s add a <br>!“

„Just make it display:none; on mobile“

Typography No scale, no smile • Pretty much any good design system brings a range of type sizes • These sizes appear the most pleasing when they are based on products like • 1.125 (Major Second) • 1.2 (Minor Third) • 1.25 (Major Third) • … etc.

Test type scales … https://typescale.com

… up one step … https://typescale.com

… especially on mobile https://typescale.com

viewports xs s m l xl h1 Golf Golf Golf Hotel India h2 Foxtrot Foxtrot Foxtrot Golf Hotel h3 Echo Echo Echo Foxtrot Golf h4 Delta Delta Delta Echo Foxtrot h5 Charlie Charlie Charlie Delta Echo p Bravo Bravo Bravo Charlie Delta small Alpha Alpha Alpha Bravo Charlie

viewports xs India Hotel Golf h1 Foxtrot h2 Echo h3 Delta h4 Charlie h5 Bravo Alpha p small s m l xl

viewports xs India Hotel Golf h1 Foxtrot h2 Echo h3 Delta h4 Charlie h5 Bravo Alpha p small s m l xl

A demo from the past

viewports xs India Hotel Golf h1 Foxtrot h2 Echo h3 Delta h4 Charlie h5 Bravo Alpha p small s m l xl

Mix & Match … … and miss • The system works well in theory, but … • lookup errors occur • jumps happen at viewports • „ uid CSS“ like ex/grid feels detached from the type sizing fl fl • it is tedious and slow

749 projects is what it took me to get to that perfect project.

Enter Utopia Chapter 2

Awesome client 🫶 https://vpihamburg.de

@sarasoueidan www.sarasoueidan.com fi ✅ no b.s. but lots of trust ✅ We know the other domain ✅ Accessibility all the way ✅ Browser rst ✅ No deliverables required

clamp(min, val, max) Get a preferred value limited by a minimum and maximum

Visualisation of the type scale idea as seen on utopia.fyi

Let’s take a look: https://utopia.fyi

Type https://utopia.fyi

Space https://utopia.fyi

Grid https://utopia.fyi

Figma https://utopia.fyi

Rubberband space design demo code Chapter 3

Take this with you. It’s free! Bonus

  1. Generation α is mobile only. Deal with it!

  1. Start to code. Or teach them.

  1. Trust each other. Even a designer.

  1. Trust each other. Even a developer.

  1. Leave your comfort zone … work in a browser.

ff 5. Use real devices to test your stu .

Fonts used in this presentation • Belinda New by melvastype.com • John Sans by stormtype.com • Menlo by Lyles and Bigelow for MacOS Demo • Bison by ellenlu type.com ff • Quattrocento Sans by Pablo Impallari