With the typography cheat sheet, type combinations, the right font-size, free eBooks on typography and fonts in data visualization. Issue #396 ⢠Mar 14, 2023 ⢠[View in the browser]( [Smashing Newsletter]( Gott kvöld Smashing Friends, 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. [A Complete Typographical Cheat Sheet](
â[A Complete Typographical Cheatsheet]( designed by [Eva Silvertant](. 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. [Whatâs the right font size in web design?]( 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. [Typography Playbook]( 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. [Pairing Fonts]( 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. [Smashing Online Workshops](
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](. [Which fonts to use for your charts and tables]( 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. [Fonts Knowledge]( 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) --------------------------------------------------------------- Northwesternâs Online MS in Information Design and Strategy [Northwesternâs Online MS in Information Design and Strategy](
Prepare for a range of dynamic communication roles and build the skills needed to lead communication strategy, translate complex data, and drive user interactions. Choose from specializations in content strategy, UX/UI, communication with data, and learning design. [Learn more](. --------------------------------------------------------------- 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. [Fonts In Use]( 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. [Shady Characters]( 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) --------------------------------------------------------------- 9. New On Smashing Job Board - [Frontend Developer â JavaScript (Vue.js/Nuxt.js)](
at MIR MEDIA - Digital Agency (Cologne, Germany)
- [Web Designer â Frontend](
at University of Rhode Island (Kingston, Rhode Island)
- [UX / UI Developer](
at Upvio (Remote) --------------------------------------------------------------- 10. Recent Smashing Articles - [A Pragmatistâs Guide To Lean User Research](
- [Building Complex Forms In Vue](
- [How To Create Dynamic Donut Charts With TailwindCSS And React](
- [Why You Should Consider Graphs For Your Next GraphQL Project](
- [Read more on Smashing Magazine →]( --------------------------------------------------------------- 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). Sent to truly [smashing]( readers via [Mailchimp](.
We sincerely appreciate your kind support. You rock. [Follow us on Twitter]( ⢠[Join us on Facebook]( Weekly issues with useful tips for web devs.
Email: newsletter@smashingmagazine.com. [unsubscribe]( ⢠[update preferences]( ⢠[view in your browser](