Johannes Nanninga

Web Typography and Atomic Design

12. March 2018 / Johannes Nanninga / TechTalk, UX

Any serious Sketch project will have you thinking about typography rather soon. For a fantastic introduction into web typography I wholeheartedly recommend Metej Latin’s email course Better Web Type. I also recommend the official blog post on the matter: Typesetting in Sketch. For serious design projects you will also have felt the need for an Atomic Design approach as well. If not, start with Creating a product design system in Sketch by Alexandre Trimoulet (never mind that what they’re doing is not a real Design System.)

But, armed with all that knowledge, how do you efficiently implement good typography in a complex Sketch project?

Maybe you have read Text System Mastery with Shared Styles by Bunin ­— good. But I propose a different approach that’s worked for us. Our approach is based on symbols and not only ensures identical styles but also enforces correct margins and line heights for copy text and headings throughout the project.

Here are the ground rules:

  • Don’t use shared text styles at all, ever.
  • Instead, use one symbol for every text style. Let’s call these atomic text symbols.
  • Atomic text symbols have a one-line text layer and a bottom margin. They look like this (zoomed in):


With these resizing settings:

  • The symbols’ height is determined by their line height plus margin (Their width is the same everywhere). That means that you can’t override them with other symbols of different sizes – which is a good thing since that would lead wrong line-heights or margins in the wrong places.
  • When inserting an instance of an atomic text symbol with more than one line of text, determine its height by calculating the line-height × of lines + bottom margin, like so:

Pros

  • No more ambiguity – every text layer has the correct height and margin.
  • Layers snap into place easily.
  • Frontend developers don’t have to guess margins. Zeplin works well with this approach:

Cons

  • Sketch symbols for text are pretty bad when it comes to resizing and line breaks (not that text layers are much better). If your headline symbol has a line break in one instance but none in the other, you will have to calculate the correct symbol instance height yourself.
  • Changing the font size of text symbols or a margin remains just as cumbersome as when using text styles. You will have to resize these symbols wherever you’ve used them.

Atomic Design

We’ve debated among our team if text + margin should be a molecule rather than an atom. We’ve decided that the discussion isn’t fruitful since it’s more important to us that we can use the atomic text symbols without the hassle of going through creating a molecule symbol for each type of atomic text symbol.

However, if you want to combine something like a heading + subheading into one symbol, you should create a molecule for that.

 

Here’s an example Sketch file: Web Typography and Atomic Design in Sketch.

Let us know how this approach works for you!


Johannes Nanninga is the CoreMedia UX Team Lead. As such, he drives and promotes the UX vision and strategy, works on the usability of new features, creates prototypes, and tests the product with real users. His interests include close contact with customers and users, learning new methods, and interdisciplinary work. Johannes started out as a UX Designer at CoreMedia, right after having completed his Master’s in Cognitive Science at the University of Duisburg-Essen.

More posts

Introducing CoreMedia Content Cloud. Part I: Iconic Experiences

Today we announce our new flagship product, CoreMedia Content Cloud. CoreMedia Content Cloud is based on everything we’ve learned working for some of the most iconic brands in the world. Here are all the details on what it is, how we got here, and where it will take us – and you.

Read More

From Incremental Innovation to Headless Delivery

Business today is rife with challenges. With both software and business requirements evolving at an ever-increasing pace, it can often feel like an impossible challenge to remain relevant in this ever-changing landscape. The solution to this dilemma is to adopt an incremental, “grow-as-you-go” approach that will allow you to adopt new technologies more efficiently and cost-effectively. An incremental approach is also the most effective way to transition to a fully headless content delivery environment, which is the strategy taken by an increasing number of successful retailers.

Read More

Sociable Shopping Experiences

One of the important changes for retail in the last couple of years has been consumers shift in spending from buying stuff(we’ve all got lots of stuff) to spending on so-called leasure experiences(See more here on this from Deliotte). As online shopping has become faster, cheaper, and more convenient, traditional retailers have responded to this...

Read More

Post a comment

SIGN UP

Add your name and email address to sign up for our CoreMedia Blog and Industry Newsletter and we will keep you posted about upcoming events, product enhancements and news about CoreMedia.

We promise to keep your data safe and you can opt out at any time.