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:
With these resizing settings:
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 worked as UX Team Lead at CoreMedia in Hamburg. He drove and promoted the UX vision and strategy, worked on the usability of new features, created prototypes, and tested 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.
Real people, real conversations.
The ball is in your court! We're happy to talk to you about our product.
Hi, my name is Anastasia Eckstedt.
Feel free to call me at
+49.40.325587.209
or send me an email to info@coremedia.com
Post a comment