A presentation at webinale in in Berlin, Germany by Jan Persiel
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
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
Responsive Design is no longer new. However, modern CSS opens up new possibilities in typography. No more fixed font sizes, but instead, design that interacts with the layout. With dynamic typography, many other exciting elements are introduced into the design process and implementation. We can make almost everything dynamic, yet everything is interconnected. This talk will introduce a typography scale system, the use of grid systems, component building, and a design system. It will also address key points to consider in the collaboration between design and web development with some examples.
Demo HTML: https://codepen.io/janpersiel/pen/XJbRPLK
