#407: Web Typography

How to choose typefaces, type design resources, fluid typography editor and font generators. Issue #407 • May 30, 2023 • [View in the browser]( [Smashing Newsletter]( Masaa’ Alkhayr Smashing Friends, Typography always seemed to be quite mysterious to me. Finding just the right type pairings with a proper type scale often seems like a daunting task. But it doesn’t have to be. Typically I’d start by designing a fluid, responsive type scale in greyscale, trying to find a magical spot for font size, line length and line height, stress testing typefaces with Ill0O0, with Erik Spiekermann’s book on [Find Out How Type Works]( (free eBook) always by my side. [Find Out How Type Works]( A comparison between less legible type set in Gill Sans and Prosto One (left) with more legible type set in Raleway and Noto Sans (right). From a friendly guide by [Google Fonts](. In this newsletter, we highlight some of the useful type tools for designers and front-end engineers — to help you design better typography, and deliver it to end users faster. We hope you’ll find it useful! [SmashingConf Antwerp 2023]( Typography will also be one of the topics we’ll cover in our next [SmashingConf Antwerp]( 🍫 (Oct 9–11) — along with plenty of practical sessions and workshops around design, UX, research, design patterns and complex enterprise UX. Friendly, approachable and affordable. [Get your ticket!]( In the meantime though, let’s dive into everything web typography, from front-end to design! — Vitaly ([@vitalyf]( --------------------------------------------------------------- 1. Modern Fluid Typography Editor Fluid typography changes how we approach typography in responsive design. Instead of defining fixed typography values for each screen size, you can set a single fluid value and let CSS render the appropriate values for specific screen sizes. Adrian Bece’s [Modern Fluid Typography Editor]( is a handy little tool for keeping fluid typography behavior consistent. [Modern Fluid Typography Editor]( When creating multiple fluid typography configurations, you can use the tool to define size constraints, rate, and relative size. The CSS updates in real-time as you fine-tune the values, so once you’re happy with the result, all you need to do is copy the code snippet. With a graphical overview and a table view, the editor also visualizes the final fluid values and shows you all the values on fixed screen width sizes at a glance. (cm) --------------------------------------------------------------- 2. Identifying Fonts From An Image Typefaces are everywhere. It could be a font on a piece of packaging, a menu card at a restaurant, or a heading in a book, maybe. Wherever you come across a font that catches your attention, [WhatTheFont]( makes it easy to identify it. All you need is a photo. [WhatTheFont]( WhatTheFont uses deep learning to search a collection of over 230,000 font styles and find the best match for your photo. Just upload an image of the font or paste an image URL into the search bar, and the tool will identify the font for you. It even works with connected scripts and with several fonts in an image. One for the bookmarks. (cm) --------------------------------------------------------------- 3. What’s Trending In Type As a designer, Jeremiah Shoaf was always frustrated by the lack of good resources for choosing fonts for design projects. Ten years ago, he decided to change that and started [Typewolf]( a resource for designers who are looking for examples of how real type performs on actual websites. [Typewolf]( Today, Typewolf features more than 1,000 font pages with custom descriptions, listed alternatives, and suggested font pairings, and every day, Jeremiah adds a new real-life example of great typography from across the web. The blog posts, guides, and learning resources on the site offer a fantastic deep-dive into the world of typography and help you achieve flawless type on your design projects. (cm) --------------------------------------------------------------- From our sponsor Power Up Your Workflow With Tools On Setapp [MacPaw]( From tracking billable hours to managing fonts and saving code snippets, Setapp app subscription platform brings you 240+ versatile apps for Mac and iOS — all under one monthly membership. Sign up for a 7-day free trial and explore handy apps for your tasks! [Discover Setapp with 7-day free trial](. --------------------------------------------------------------- 4. Fallback Font Generator We all know the situation when we are about to click a link and suddenly the layout shifts. Adjusting web fonts and system fallbacks using special @font-face descriptors helps you reduce the annoying Cumulative Layout Shift and create better experiences for your users. But how to get both fonts to match as closely as possible to prevent the dreaded layout shift? [Fallback Font Generator]( Brian Luis Ramirez’s [Fallback Font Generator]( makes it easy to adjust the fallback font until it matches the brand font or the brand font until it matches the fallback. All you need to do is upload your brand font (it stays on your computer) and use the sliders until both fonts overlap. The CSS rules update in real-time, ready to be copied and pasted into your stylesheet. (cm) --------------------------------------------------------------- 5. Optimizing Variable Fonts Variable fonts offer exciting features and a lot of creative freedom. But that often comes at a price: file size. Stefan Judis was in a situation where he wanted to use a variable font, but with 785kB, the font file was too heavy for his lightweight blog. With the help of Zach Leatherman’s web font tool [Glyphhanger]( Stefan was able to [subset the file to the bare minimum](. [Glyphhanger]( As Stefan explains, a combination of subsetting the font to the Latin character set, using ASCII to further reduce the number of characters, and whitelisting individual glyphs resulted in a slim file of only 58kB that was perfectly tailored to the project’s needs while retaining all the fancy variable font features. Valuable tips for anyone who would like to use a variable font but is put off by the performance implications it could bring along. (cm) --------------------------------------------------------------- 6. Upcoming Workshops and Conferences That’s right! We run [online workshops on frontend 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: - [Deep Dive On Accessibility Testing]( Dev with Manuel Matuzović. June 12–26 - [Figma Workflow Masterclass]( UX with Christine Vallaure. June 15–23 - [The React Performance Masterclass]( Dev with Ivan Akulov. June 29 – July 13 - [Data Visualization Masterclass]( Dev with Amelia Wattenberger. July 4–18 - [Smart Interface Design Patterns Video Course]( UX 9h-video + Live UX Training with Vitaly Friedman - [Jump to all workshops →]( --------------------------------------------------------------- 7. The Fastest Google Fonts Today, web fonts are faster than ever. And while self-hosted fonts are usually the best solution to performance and availability problems, services like Google Fonts offer a convenient approach to serving web fonts. But what if Google Fonts isn’t fast enough for your needs? Harry Roberts went down the rabbit hole and discovered some [measures that help you mitigate a lot of the issues that come with Google Fonts](. [The Fastest Google Fonts]( To create an experience several seconds faster than the baseline, Harry recommends a combination of asynchronously loading CSS, asynchronously loading font files, opting into FOFT, fast-fetching asynchronous CSS files, and warming up external domains. If you are looking for a slim code snippet that gets the job done, Harry [has got you covered](. (cm) --------------------------------------------------------------- 8. Type Design Resources Have you ever played with the idea of designing your own typeface? Or you are a type designer and are looking for tips and tools to help you with your work? Then the site [Type Design Resources]( is for you. Curated by Justin Penner, it is a growing collection of type design resources covering everything from the very basics to running your own foundry. [Type Design Resources]( Among the resources are guides, books, workshops, and courses to get you familiar with type design, community groups and events, as well as blogs and podcasts to keep you up-to-date. You’ll also discover practical tips and tools to help you in every step of the type process — from OpenType feature programming and standardizing character sets to kerning and proofing, building type specimens, and open-sourcing and selling your fonts. A treasure chest for any type designer. (cm) --------------------------------------------------------------- From our sponsor 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 →]( --------------------------------------------------------------- 9. New On Smashing Job Board - [Front-End Developer]( at wemakeit AG (Karlsruhe, Germany) - [Visual Designer]( at UCLA (Los Angeles / New York / Remote) - [Wordpress/PHP Developer]( at Razorbraille (Toronto) --------------------------------------------------------------- 10. Recent Smashing Articles - [Meet Success At Scale, A New Smashing Book By Addy Osmani]( - [Designing A Better Design Handoff File In Figma]( - [The Impact Of Agile Methodologies On Code Quality]( - [Smashing Podcast Episode 61 With Rachel Andrew: What Is Web Platform Baseline?]( - [Practical Design Tips And Guidelines For Beginner Designers]( - [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](