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

Hollywood Regency Meets the Upper East Side in Manolo Blahnik's New Manhattan Flagship

Monday, June 21, 2021

Plus, 7 ways to save a project before things start to go wrong (image) Architectural Digest AD PRO Logo Image may contain: Grass, Plant, and Lawn Move Over, Marie Antoinette—These Giant Animal

✏ What’s Coming in WordPress 5.8, Free Developer Stuff, 12 CSS Parallax Effects, and more...

Monday, June 21, 2021

Work at the Intersection of Data, Design, and Technology [ad] SPS.NORTHWESTERN.EDU What's Coming in WordPress 5.8 (Features and Screenshots) WPBEGINNER.COM COMMENTS How to Use Dynamic Imports in

🖥 Sleek Landing Page Designs + 🏆 Challenge Updates

Monday, June 21, 2021

The Designer Digest Is Floating Your Way 🎈 To begin, we'd like to congratulate Faiz Abiyandani, the winner of our latest 🏃‍♀️Fitness App Challenge! Next, don't forget that the second week to

Camping Out in a 3,000-Square-Foot Loft

Monday, June 21, 2021

Design editor Wendy Goodman takes you inside the city's most exciting homes and design studios. Design Hunting A visual diary by Design Editor Wendy Goodman The living room. Photo: Annie Schlechter

Accessibility Weekly #245: When CSS Isn’t Enough

Monday, June 21, 2021

Sponsored by Automattic. They're hiring. June 21, 2021 • Issue #245 View this issue online or browse the full issue archive. Featured: When CSS isn't enough: JavaScript requirements for

Voice UI, Sharp Images, Philip K. Dick, Windows Layers, CSS Paint API

Monday, June 21, 2021

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar June 21 2021 An Alternative Voice UI To Voice Assistants

✏ How to Avoid SEO Disaster, 6 Types of Web Design, Simply Markdown, and more...

Sunday, June 20, 2021

Work at the Intersection of Data, Design, and Technology [ad] SPS.NORTHWESTERN.EDU An Alternative Voice UI to Voice Assistants SMASHINGMAGAZINE.COM COMMENTS Simply Markdown - Easy Create Markdown with

✏ Is AMP Dead and Do We Care? React Markdown Editor, Bad vs Good Designs, and more...

Saturday, June 19, 2021

Poll: Is AMP Dead, and do We Care? WEBDESIGNERDEPOT.COM COMMENTS Bad Vs Good Accessible Designs USABILITYGEEK.COM COMMENTS Client-Side Routing in Next.js SMASHINGMAGAZINE.COM COMMENTS React Markdown

The 25 Best Accent Chairs, According to AD100 Designers

Friday, June 18, 2021

Plus, more sourcing inspiration. View in your browser | Update your preferences Architectural Digest AD PRO logo image Welcome to the PROcurement, our new weekly roundup of the best designs to source

✏ 40 Javascript Memes, CSS Specificity Calculator, HTML Semantic Tags Sheet, and more...

Friday, June 18, 2021

The Problem with UX/UI Portfolios MARKBOULTON.CO.UK COMMENTS CSS Specificity Calculator POLYPANE.APP COMMENTS Your Image is Probably not Decorative SMASHINGMAGAZINE.COM COMMENTS Top 40+ Javascript