Smashing Newsletter #298: Web Typography

Web type tools, from little CSS helpers to open-sourced typefaces and some helpful guides to choose great type pairings. Issue #298 • Tue, April 27, 2021 • [View in the browser]( 💨 [Smashing Newsletter]( 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. [22e00e46-ab1b-4714-a65e-712fe913c6a8.png]( [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. Best Practices For Combining Typefaces 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. [Uniwidth typefaces for interface design]( 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 [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. [Capsize]( 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. [Smashing Online Workshops]( As the next workshops, we have 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) --------------------------------------------------------------- From our sponsor The World’s Largest Free Test Automation Library [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](. [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. [What Are Emoji Anyway?]( 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 - [UI/UX Web Designer (Entry-Level)]( at IMS, Inc. (Suburbs of Washington, DC) - [Creative Lead]( at Substrakt (United Kingdom) - [Web Developer/Designer]( at Ohio University (Ohio University) --------------------------------------------------------------- #9. Our Current Most Popular Articles - [Understanding Easing Functions For CSS Animations And Transitions]( - [How To Bake Layers Of Accessibility Testing Into Your Process]( - [A Guide To Newly Supported, Modern CSS Pseudo-Class Selectors]( --------------------------------------------------------------- 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]( This email was sent to {EMAIL} [why did I get this?](    [unsubscribe from this list](    [update subscription preferences]( Smashing Media AG · Werthmannstr. 15 · Freiburg 79098 · Germany