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 Events

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

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


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

unsubscribe update preferences view in your browser








This email was sent to you
why did I get this?    unsubscribe from this list    update subscription preferences
Smashing Media AG · Werthmannstr. 15 · Freiburg 79098 · Germany

Older messages

Smashing Newsletter #297: Web Performance

Tuesday, April 20, 2021

With Lighthouse, debugging CLS, caching, web fonts subsetting and React performance. Issue #297 • Tue, April 20, 2021 • View in the browser 💨 Smashing Newsletter Hola Smashing Friends, Web performance.

From Cats With Love: New Navigation, Guides and Workshops

Monday, April 19, 2021

From cats with love — new navigation, evergreen guides and online workshops around front-end and UX. From cats with love — new navigation, guides and online workshops. • View in the browser 💨 Smashing

Smashing Newsletter #296: Security and Privacy

Tuesday, April 13, 2021

With CAPTCHA, web security, spam prevention, security, vulnerabilities, tracking blocker and guide to better design.Issue #296 • Tue, April 13, 2021 • View in the browser 💨 Smashing Newsletter G'

Smashing Newsletter #295: Boosting Your Coding Workspace

Tuesday, April 6, 2021

With tools for a better command line, text editor, finding git commands and pets for your VS Code. Issue #295 • Tue, April 6, 2021 • View in the browser 💨 Smashing Newsletter Ahoj Smashing Friends,

Smashing Newsletter #294: SVG Generators and Tools

Wednesday, March 31, 2021

With SVG filters, cropping tools, SVG assets manager, tet warping generators, animation and SVG transformation. Issue #294 • Tue, March 30, 2021 • View in the browser 💨 Smashing Newsletter Ahoy

Bamboo, Blow-Ups, and 3 Other Trends from Milan Design Week 2021

Thursday, September 16, 2021

Plus, the new Laura Gonzalez-designed Saint James Hotel is a Parisian oasis (image) Architectural Digest AD PRO Logo Saint James Paris The New Laura Gonzalez-Designed Saint James Hotel Is a Parisian

✏ WordPress vs Blogger, Creative Hamburger Menus, CSS Mirror Editing in Edge, and more...

Thursday, September 16, 2021

WordPress Vs Blogger: Which is Better for your Website? KINSTA.COM COMMENTS 20 Extremely Creative Web Layouts AWWWARDS.COM COMMENTS 10 Creative Hamburger Menus + Tips & Tricks 1STWEBDESIGNER.COM

✏ Issue #504: Typography for Data, Google Search Redesign, 8 Freelance Project Management Apps, Doodle Ipsum, and more…

Thursday, September 16, 2021

View this newsletter online Unsubscribe NEWSLETTER ISSUE #504 SEPTEMBER 15, 2021 Typography for Data In this in-depth investigation of typography for design systems, Michael Yom breaks down the

Now Hiring: Senior Interior Designer at Morgan Harrison Home (and More!)

Thursday, September 16, 2021

Visit our job board to view more opportunities. ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

Photomicrography, Hoefler&Co & Monotype, Fintech Design, Cascade Layers, Doodle Ipsum

Thursday, September 16, 2021

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar September 16 2021 The Winners of the 2021 Small World

Running effective remote meetings

Wednesday, September 15, 2021

We're all dialling in, now what? ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

6 Timeless Alexander Girard Patterns Are Being Reintroduced

Wednesday, September 15, 2021

Plus, the unbelievable story behind this Elsie de Wolfe portrait (image) Architectural Digest AD PRO Logo The Mexidot pattern by Alexander Girard These 6 Timeless Alexander Girard Patterns Are Being

✏ 10 Iconography Rules, Core Web Vitals For WordPress, Why Creativity Matters, and more…

Wednesday, September 15, 2021

Say buh-bye to PAID page builders. Design Faster & Smarter with BeTheme's Live Builder & 600+ Pre-Built Sites [ad] MUFFINGROUP.COM 10 Iconography Rules to Follow in UI Design DRIBBBLE.COM

Issue 320

Wednesday, September 15, 2021

CSS mix-blend-mode and clip-path, the W3C design system, flexible components, and my job news! CSS Layout News Issue 320 By Rachel Andrew – 15 Sep 2021 – View online → I'll start this week with

Human-Computer Interactions, Jargon, Data Vis Dispatch, Bonsai, Jamstack Conf

Wednesday, September 15, 2021

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar September 15 2021 A comprehensive list of human-computer