Smashing Newsletter: Issue #280

Editorial

This has been a year of change for many of us, myself included, and I write this introduction as my last as Editor in Chief of Smashing Magazine. I want to be able to fully concentrate on my web platform work in 2021 and in producing more materials to teach folk HTML and CSS — so watch this space!

I have really enjoyed my time at Smashing and have many great memories. I’ve loved being able to publish more new voices on the magazine, and being able to work with folk who haven’t written for a publication before. In the last year alone over 70 of our authors were new to Smashing, many of them new to being paid for their writing and the editorial process that goes with it.

It was incredible seeing the conference side of the business spring into action when it became apparent we wouldn’t be able to run our in-person conferences this year. Within days we had a new plan, were promoting our successful online workshops and looking to take the events online. I’m very glad to have been a small part of it.

I’ll miss the behind the scenes team headed up by Iris, who make sure that articles get published each day and so much more, and my group of subject matter editors who have found and worked with writers covering all of the different facets of web design and development.

All that is left to say is Happy Holidays to all of you who are celebrating at this time of year. I know this will be a difficult one for many people, and however you are spending holiday days, I hope for some rest and peace from this difficult year. We can hope together for a better 2021.

— Rachel Andrew, signing out as Editor in Chief of Smashing Magazine

Default Local Fonts Compatibility
Font Style Matcher To Prevent Layout Shifts
A Comprehensive Guide To Web Font Loading Strategies
New Front-End & UX Workshops
Improving Google Fonts Performance
Fight FOUT And Make Lighthouse Happy

1. Default Local Fonts Compatibility

Default fonts vary significantly across different operating systems. To provide an easy way to look up a system’s default fonts, especially the ones that need to be available through CSS font-family, Zach Leatherman built Font Family Reunion.

The compatibility table works like a Can I Use for default local fonts: Once you enter a font-family, it will tell you if it is supported, as well es what the five standard CSS keyword font-families (serif, sans-serif, monospace, and the lesser known fantasy and cursive) are aliased to in each operating system. One for the bookmarks. (cm)

2. Font Style Matcher To Prevent Layout Shifts

When using a web font, you’ll often need to deal with the flash of unstyled text that happens between the initial render of your web-safe font and the web font you’ve chosen. To prevent layout shifts, it’s a good idea to choose the fallback font in relation to the web font’s x-heights and widths. The better they match, the less jarring the layout shift will be.

Monica Dinculescu’s Font Style Matcher helps you minimize the discrepancy between the fallback font and the web font. Once you’ve entered the fonts into the tool, you can use the sliders to adjust font size, line height, font weight, letter spacing, and word spacing and, as you do so, compare the two fonts side by side as well as overlapped. A fantastic little helper. (cm)

3. A Comprehensive Guide To Web Font Loading Strategies

FOUT with a class, critical FOFT, preload — let’s be honest, font loading can be confusing. To help you decide which approach is the right one for your project’s needs, Zach Leatherman put together a comprehensive guide to font loading strategies.

The guide does not only cover how the different strategies work but it also looks into the pros and cons of each one of them. Shortcuts make it easy to find the best approach based on your expectations — the approach that is the easiest to implement, for example, or the one that offers the best performance. If you want to dive deeper into the code of each solution (and some more experimental ones, too), Zach’s Web Font Loading Recipes repo on GitHub has got you covered. (cm)

4. New Front-End & UX Workshops

Let’s fix those front-end bugs! Our online workshops have been an incredible experience with wonderful folks from all over the world coming together to get better at what they do. Join in the fun and learning — without needing to leave your desk. The workshops are filled with practical examples, video recordings and friendly Q&A sessions.

Smashing Online Events — Live and interactive 2.5h-sessions with folks all over the world!

In fact, we’ve just announced our new front-end & UX workshops on form design, SVG animation, design systems, HTML email and front-end adventures in 2021. There are still some early-birds left, with a lil’ friendly discount, so take a look and perhaps join us as well.

5. Improving Google Fonts Performance

Self-hosting fonts is widely accepted to be the fastest option when using web fonts. However, Google Fonts can be speedy, too: their ability to serve the tiniest possible font files to specific user agents and platforms and their relatively new support for font-display via the URL parameter &display=swap are already a good base. And, as Harry Roberts shows, there are quite some things that you can do to improve their performance even further and mitigate a lot of the issues that Google Fonts are commonly known for.

For his article “The Fastest Google Fonts,” Harry went down the performance testing rabbit hole to find the best combination for fast Google Fonts: asynchronously loading CSS, asynchronously loading font files, opting into FOFT, fast-fetching asynchronous CSS files, and warming up external domains. All of these techniques combined might sound a bit overwhelming at first, but Harry concludes his article with a slim and maintainable snippet that helps you get the most out of Google Fonts. (cm)

6. Fight FOUT And Make Lighthouse Happy

Maybe you’ve experienced this scenario before: You choose a web font, implement the HTML or CSS code snippet into your project, and check if they display properly. So far so good, but once you check the site in Lighthouse, you get the message that you need to eliminate render-blocking resources as they add a one-second delay to render. What do you do?

Adrian Bece dedicated an article to this scenario in which he shares valuable tips for eliminating font stylesheets as a render-blocking resource. In it, he walks you through an optimal setup that not only makes Lighthouse happy but also overcomes the dreaded flash of unstyled text. Thanks to a combination of vanilla HTML, CSS, and JavaScript, the approach can be applied to any tech stack. A Gatsby implementation and a plugin that Adrian developed as a drop-in solution for it are also covered. (cm)

December 22, 2020 Smashing Newsletter: Issue #280

Previous Issues