Smashing Newsletter: Issue #298

Editorial

Hopefully, you can comfortably read this sentence on your screen, or listen to it via a screen reader. Yet to make it happen, somebody had to design this very typeface, and ensure that it’s right here, clear and legible, supporting the reading, without screaming for attention or slowing you down as you move along the lines.

Somebody had to adjust the kerning, the x-height and the leading. And eventually, somebody had to pick this very font weight out of dozens of others, and set its size, spacing, color, indents and everything in-between.

In this newsletter issue, we highlight a few useful tools around typography — from little CSS helpers to open-source typefaces and some helpful guides to choose great type pairings. We’d love to learn about the tools you love on Twitter, too.

Smashing Meets, our friendly online meet-up — and you are invited!

As of the smashing family department, we’re just about to get ready for our free Smashing online meet-up later today, with a few live coding and designing sessions happenning... well, live!

Ah, we also have a lil’ something prepared — a shiny new Smashing book coming up tomorrow (pssst!), plus, as always, we have plenty of friendly online workshops to choose from — including new ones, e.g. on TypeScript.

But most importantly, we’d love to kindly wish you a few calm and peaceful moments and happy laughs with wonderful people around you — you definitely deserve them! Stay smashing, everyone! :)

— Vitaly (@smashingmag)

1. Best Practices For Combining Typefaces

It has become quite easy to pick a good typographic scale, and set it up with CSS, but finding just the right combination of typefaces requires quite a bit of testing and time. To help you achieve it, Douglas Bonneville has highlighted some strategies and examples in a good ol’ SmashingMag article 10 years ago, called Best Practices of Combining Typefaces. Douglas goes into detail looking at similar classifications, moods, typographic colors, and contrast.

If you are looking for examples of good type pairing, TypeWolf provides a large repository of examples, pairings, font recommendations and lists. Fontpair focuses specifically on Google Fonts, and highlights decent pairings for them. And in case you are looking for lovely fonts on a budget, take a look at Open Foundry, The League of Moveable Type and Use & Modify. (vf)

2. Uniwidth Typefaces For Interface Design

We’ve all come across sites where a small change in typography breaks the interface — situations in which changing the weight of a single menu item on hover causes the whole menu to shift as it tries to adjust for the change, for example. Uniwidth typefaces prevent this behavior.

If you haven’t heard of them before, uniwidth typefaces are proportionally spaced (contrary to monospaced typefaces), but every character occupies the same space across different cuts or weights. So no matter if you set your text in regular, bold, or italic, it will never change its length, meaning: no reflow. Lisa Staudinger wrote a great introduction to using uniwidth typefaces in interface design and the benefits they offer. She also compiled some nice options for uniwidth typefaces that you can use right away. A clever solution that doesn’t require any extra code. (cm)

3. Precise Web Typography

Typography on the web isn’t as predictable as other elements on screen, and especially if you want to use a grid-based layout, there’s quite some tweaking involved to get your design at least close to proper type setting. Capsize is here to help you change that.

To make the sizing and layout of text as predictable as every other element on the screen, Capsize uses font metadata to size text according to the height of its capital letters. The space above capital letters and below the baseline is trimmed, making it straightforward to align text on a baseline grid.

To make use of the tool’s mighty powers, enter the name of your font or upload it to the tool directly, and use the sliders to adjust size and spacing; Capsize will then provide you with the code to apply the styles in your project. Handy! (cm)

4. Upcoming Smashing Online Workshops

Good experience is at the heart of the online workshops that we run — be it around accessibility, design or front-end. The interface has to load, render and respond quickly, and that affects all facets of user experience.

As for the next workshops, we have these coming up:

Make Design Systems People Want to Use Workflow
with Dan Mall. May 3–11.
Psychology For UX and Product Design UX
with Joe Leech. May 6–14.
The React Performance Masterclass Dev
with Ivan Akulov. May 20 – June 4.
Dynamic CSS Masterclass Dev
with Lea Verou. May 25 – June 8.
Jump to all front-end & UX workshops ↬

5. Creating Consistent Harmony With Type Scales

What’s your approach when it comes to choosing a type scale? If you usually trust your gut feeling, we came across some useful tools that take the guesswork and the experiments out of creating harmonious type scales. One of them is Jeremy Church’s Type Scale. The tool lets you enter a base size, Google Font, and weight, and choose from a selection of eight different scales. Tips for which scales work best on mobile and which ones are better suited for portfolios or marketing sites help you find the scale for your needs.

Modularscale created by Scott Kellum and Tim Brown works similarly: You select bases and ratio, and the tool provides you with a plugin for your scale or you can reference calculated results right on the site, too, of course.

Last but not least, the Typographic Scale Calculator by Jean-Lou Désiré offers some more room for customization and also gives some fantastic background information on why certain proportions appeal to our eyes for the same reason that musical harmonies please our ears. Three invaluable helpers to create consistent harmony and contrast in your typographic work. (cm)

6. Reduce Flash Of Unstyled Text

If you’re using a web font, the flash of unstyled text that happens between the initial render of your fallback font and the web font can result in jarring layout shifts. To minimize this effect, it helps to minimize the differences between the two fonts’ x-heights and widths. And since this involves quite some tinkering, Monica Dinculescu built a handy little tool that helps you get the job done: the Font Style Matcher.

All you need to do is enter the name of your fallback font and upload your web font to the tool, then select font size, line height, font weight, letter spacing, and word spacing for each one of them. To get a close match, the font style matcher shows you an example of what your font choices look like when overlapped and when the flash of unstyled text happens. Once you’re happy with the result, you can copy the CSS to your clipboard. A real timesaver! (cm)

7. What Are Emoji Anyway?

Over the last decade, emoji have become a part of our day-to-day conversations, but also often a way of expressing emotions in long-read content. But what are emoji actually? In her deep-dive on “Emoji: how do you get from U+1F355 to ”, Monica Dinculescu explains the roots of emoji, what they are and how they are built. As it turns out, emoji are coloured glyphs, specced in Unicode 5.2, with each having a design guideline and a name.

In “Emoji Under The Hood” and “Everything You Need To Know About Emoji,” Nikita Prokopov and Rob Reed dive into Unicode, emoji fonts, font fallbacks, variation selector-16 and grapheme clusters, breaking emoji one by one and explaining how they can be encoded.

And just in case you are looking for free open-source emoji icon sets, there are a few: Sensa and Openmoji are worth looking at, for example. So now if you needed to better understand what emoji actually are, you should be covered fairly well! (vf)

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!

April 27, 2021 Smashing Newsletter: Issue #298

Previous Issues