Smashing Newsletter: Issue #407

Editorial

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!

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.

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 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.

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)

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?

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 is a tool to subset and optimize fonts

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 Events — 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.

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.

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)

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).

May 30, 2023 Smashing Newsletter: Issue #407

Previous Issues