Rubberband Design - Dynamic Web Typography

Slide 1

Rubberband Design Dynamic Web Typography

Slide 2

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

Slide 3

It’s a long way to typography Chapter 1

Slide 4

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

Slide 5

Slide 6

Slide 7

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

Slide 8

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 •

Slide 9

Word! https://viewports.fyi

Slide 10

Slide 11

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

Slide 12

„On mobile the blocks just collapse into one column“

Slide 13

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

Slide 14

„Just make it display:none; on mobile“

Slide 15

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.

Slide 16

Test type scales … https://typescale.com

Slide 17

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

Slide 18

… especially on mobile https://typescale.com

Slide 19

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

Slide 20

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

Slide 21

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

Slide 22

A demo from the past

Slide 23

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

Slide 24

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

Slide 25

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

Slide 26

Enter Utopia Chapter 2

Slide 27

Awesome client 🫶 https://vpihamburg.de

Slide 28

@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

Slide 29

Slide 30

Slide 31

Slide 32

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

Slide 33

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

Slide 34

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

Slide 35

Type https://utopia.fyi

Slide 36

Space https://utopia.fyi

Slide 37

Grid https://utopia.fyi

Slide 38

Figma https://utopia.fyi

Slide 39

Rubberband space design demo code Chapter 3

Slide 40

Take this with you. It’s free! Bonus

Slide 41

Generation α is mobile only. Deal with it!

Slide 42

Start to code. Or teach them.

Slide 43

Trust each other. Even a designer.

Slide 44

Trust each other. Even a developer.

Slide 45

Leave your comfort zone … work in a browser.

Slide 46

ff 5. Use real devices to test your stu .

Slide 47

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