Sveiki Smashing Friends,
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)
From our sponsor
Build More Inclusive And Accessible Websites With Axe DevTools Pro
Front-end accessibility testing is easy with Deque’s axe DevTools browser extension. Find and fix accessibility issues with very little effort or expertise required. Plus, improve user experience and prevent regressions by fixing bugs while you code. Get started with axe DevTools Pro for free today.
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 the next workshops, we have coming up:
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)
From our sponsor
The World’s Largest Free Test Automation Library
How many times did you develop automation modules for common testing scenarios from scratch? Comparing images, clicking on hidden elements, sending API requests, generating random data... No more! Now you can search for anything you need from a library of 1,500+ automation actions, ready to use for testing native mobile and web apps.
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)
8. New On Smashing Job Board
9. Our Current Most Popular Articles
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
