March 14, 2023 Smashing Newsletter: Issue #396
This newsletter issue was sent out to 213,972 subscribers on Tuesday, March 14, 2023.
Editorial
I vividly remember reading Web Design is 95% Typography by Oliver Reichenstein almost 20 years ago. The article stated that 95% of the information on the web is written language, so it’s only reasonable for designers to focus on designing text, or more specifically, typography. Years later, this still holds true.
To communicate well and precisely, we need to design with typography in mind. Ultimately it defines the success and the impact of our messaging. Adn that’s what this newsletter is about: typography.
Typography will also be a topic at SmashingConf Antwerp 2023, our shiny new UX conference taking place in magnificent Antwerp, Belgium , later this year. There is still a handful of early-bird tickets left, so get your ticket.
Ah, and talking about early birds: we have announced a few new online workshops and Interface Design Patterns UX Training, with some beautiful flying early birds available as well. Happy catching, everyone! :)
— Vitaly (@vitalyf)
1. Finding The Right Font Size
Even the best typeface is only as good as it is set. But how do you decide what is a good font size for your web design project? Oliver Schöndorfer wrote a solid introduction with guidelines to point you in the right direction. In it, he shares practical examples focused on body text in responsive web design. You’ll learn more about what Oliver calls the “holy trinity of typography’” and explore how relative units like em and rem make things easier for typographers.
In a nutshell, Oliver recommends setting your body text at a default size of 1em which is calculated as 16px in most browsers. From there, use relative units, scale up the font size and, ideally, the layout proportionally and make it larger on bigger viewports where you usually have a larger distance between the viewer and the screen. A good foundation to take your typography game to the next level. (cm)
2. Free Typography eBooks
If you’re looking for eBooks to add to your typography reading list, we came across three fantastic resources you can read for free. One of them is Tim Brown’s Pocket Guide to Combining Typefaces. Originally published by Five Simple Steps in 2013, the book explores strategies for selecting typefaces based on real design goals to help you truly understand why a combination works or doesn’t work.
For a more general overview of typography, Butterick’s Practical Typography is a great read. It covers why typography matters, type composition, text formatting, font recommendations, page layout, and more.
Last but not least, the folks at Process Masterclass published a free Typography Playbook aimed at digital UX/UX designers looking to learn more about typography. It condenses more than ten years of experience into one resource and features typefaces, foundries, typography tips, and more. Happy reading! (cm)
3. Tips For Combining Typefaces
Pairing fonts can be a challenge. If you need a helping hand to create beautiful, professional-quality font pairings, Eric D. Kennedy wrote a useful step-by-step guide with lots of practical examples and do’s and don’ts. It takes you through the font pairing process in five steps, from determining your brand and brainstorming for fonts to defining usage rules.
The type design studio Connary Fagen also published a guide on how to find typefaces that look great together and how to use them. It takes a closer look at the roles that contrast, fit, and layout play when pairing fonts and what you should look for in a typeface.
If you keep reverting to the same font combinations and are looking for some ready-to-use font pairings, Wakamatsu Momoko created a handy Figma file with nine inspiring Google Font combinations. Enjoy! (cm)
4. Upcoming Workshops and Conferences
That’s right! We run online workshops on front-end and design, be it accessibility, performance, or design patterns. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.
With online workshops, we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are.
As always, here’s a quick overview:
- Figma Auto Layout Masterclass UX
with Christine Vallaure. Mar 27 - UX/UI Design & Figma Introduction UX
with Christine Vallaure. Apr 20–28 - New Front-End Adventures, 2023 Edition Dev
with Vitaly Friedman. Apr 25 – May 9 - Architecting Design Systems Workflow
with Nathan Curtis. May 11–19 - Data Visualization Masterclass Dev
with Amelia Wattenberger. May 4–18 - SmashingConf Front-End @ SF — May 23–26
- Deep Dive On Accessibility Testing Dev
with Manuel Matuzović. June 12–26 - Smart Interface Design Patterns Video Course UX
9h-video + Live UX Training with Vitaly Friedman - Jump to all workshops →
5. Fonts In Data Visualizations
Choosing fonts for charts and tables requires other considerations than choosing fonts for body copy. So what should you keep in mind? Lisa Charlotte Muth wrote a great primer to choosing and adjusting typefaces for data visualizations.
As Lisa recommends, when in doubt, set your text in a font that is easy to read: sans-serif, neither overly narrow nor wide, regular instead of bold or thin, sentence case, in a size that is big enough to read, and in black or almost black. In her blog post, Lisa illustrates all these options with examples and explores why ignoring this advice might sometimes even be a good idea. (cm)
6. Fonts Knowledge
Whether you’re new to typography or an experienced designer who wants to get up-to-date on current trends in web typography, Fonts Knowledge is a treasure chest of typography wisdom. Produced by the Google Fonts team in collaboration with typographic experts from around the world, the library aims to enable designers and developers of all skill sets to choose and use type with purpose.
In the library, you’ll find guides on a wide selection of topics, ranging from typography foundations and the history of typography to variable fonts and using type in AR and VR. The accompanying glossary explains typographic terms — from alignment to x-height. One for the bookmarks. (cm)
7. Typography Inspiration
Looking for some font inspiration? Fonts In Use is always a trusty resource when you want to discover new fonts or font pairings. The archive features typographic artifacts of all kinds — from packaging to editorial design, brand design, movie title sequences, and much more. You can browse and filter the collection by topics, formats, and typefaces.
If you’re into vintage typography Type Hunting is a wonderful resource filled with goodies from the past. Whenever Jonathan Lawrence comes across a piece of vintage packaging, a sign, or found typography, he takes a photo and archives it on the site. Every piece has a special personal feel to it and is an example of how design that was created back in the days when there were no marketing teams or research groups managed to stand the test of time. (cm)
8. Shady Characters
How about a journey to the hidden corners of typography? To the place where small but mighty punctuation marks dwell — the pilcrow, the interrobang, and the octothorpe, for example? On his site Shady Characters, Keith Houston tells the stories behind the punctuation marks you might not come across that often.
Apart from exploring unusual punctuation marks, Shady Characters also shares interesting typographic miscellany, places of special interest to punctuation-philes, and forays into the typesetting world. Not your ordinary collection of typography knowledge but a lovingly researched look at the things that are too good to miss. (cm)
That’s All, Folks!
Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!
This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.