Newsletter Subject

#396: Web Typography

From

smashingmagazine.com

Email Address

newsletter@smashingmagazine.com

Sent On

Tue, Mar 14, 2023 01:49 PM

Email Preheader Text

With the typography cheat sheet, type combinations, the right font-size, free eBooks on typography a

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](

Marketing emails from smashingmagazine.com

View More
Sent On

26/03/2024

Sent On

19/03/2024

Sent On

12/03/2024

Sent On

05/03/2024

Sent On

27/02/2024

Sent On

20/02/2024

Email Content Statistics

Subscribe Now

Subject Line Length

Data shows that subject lines with 6 to 10 words generated 21 percent higher open rate.

Subscribe Now

Average in this category

Subscribe Now

Number of Words

The more words in the content, the more time the user will need to spend reading. Get straight to the point with catchy short phrases and interesting photos and graphics.

Subscribe Now

Average in this category

Subscribe Now

Number of Images

More images or large images might cause the email to load slower. Aim for a balance of words and images.

Subscribe Now

Average in this category

Subscribe Now

Time to Read

Longer reading time requires more attention and patience from users. Aim for short phrases and catchy keywords.

Subscribe Now

Average in this category

Subscribe Now

Predicted open rate

Subscribe Now

Spam Score

Spam score is determined by a large number of checks performed on the content of the email. For the best delivery results, it is advised to lower your spam score as much as possible.

Subscribe Now

Flesch reading score

Flesch reading score measures how complex a text is. The lower the score, the more difficult the text is to read. The Flesch readability score uses the average length of your sentences (measured by the number of words) and the average number of syllables per word in an equation to calculate the reading ease. Text with a very high Flesch reading ease score (about 100) is straightforward and easy to read, with short sentences and no words of more than two syllables. Usually, a reading ease score of 60-70 is considered acceptable/normal for web copy.

Subscribe Now

Technologies

What powers this email? Every email we receive is parsed to determine the sending ESP and any additional email technologies used.

Subscribe Now

Email Size (not include images)

Font Used

No. Font Name
Subscribe Now

Copyright © 2019–2024 SimilarMail.