UX Design
< 5 minute read

Things You Might Not Know About Typography in Sketch

Wojciech is a product designer and web designer with 8 years of experience. He’s passionate about typography and sound design.
Read the Spanishes version of this article translated by Yesica Danderfer

Every designer knows that there are many different tools which will help you work with typography. Needless to say, applications such as Adobe InDesign, Scribus, and Photoshop will likely be your go-to tool kit. Still, although you may have heard of Sketch, you’ve likely overlooked it as a mere web design tool — not to be used when dealing with type.

It doesn’t have to be that way. In reality, Sketch can become one of the greatest tools for creating incredible typographic pieces. The secret is simple; you need to know some savvy tips and tricks to help you along the way.

In this article, we will go over some quick and easy ways you can fix the minor shortcomings that Sketch has when it comes to typography. This is actually the third article from our Sketch Tips & Tricks series. If you want to check out the others, take a quick look at them here: Nested Symbols in Sketch, Using Emojis to Manage Sketch Files.

Typography in Sketch tutorial

Typography in Sketch

If you already know CSS, then you should be familiar with Sketch’s basic typography features. These include everything from selecting a typeface and through text transform to setting parameters, such as character spacing and line height.

Sketch and Typography guide

However, some of Sketch’s lesser-known features are not so obvious right away. That’s where knowing some extra tricks can be a massive help. In fact, once you learn them, you can turn Sketch into something more in line with InDesign as a typeface tool. Here’s what you need to know:

OpenType Features:

Many typefaces come with alternative sets of characters used to achieve more legibility or for stylistic purposes, such as different font weights. As you already know, in Photoshop, you just press one button to turn them on. Meanwhile, in Sketch, it’s just not as easy as that.

If you do want to check out an entire typeface range, you need to do one extra thing. Just go to Menu Sketch> View> Show Fonts and click Gear Icon and then Typography. After that, you will get access to additional type features such as ligatures and alternative sets of characters. Simple!

Working with Characters and Typography in Sketch

Text on a path:

Nowadays, we rarely see text written on a path in web design at all. Still, it’s still quite a common style in print and even logo design. Creating text on a path using Sketch is surprisingly easy. Simply draw the path using the Pen Tool, then type the text close to that path. Once you’ve done so, you should select from the Sketch menu > Text> Text on path. Et voila!

Sketch typography and fonts

Kerning and Baseline:

If you are a Photoshop user, you can access almost all typography features from the Character or Paragraph panels. In Sketch, you will find the same features, only they are hidden away. Luckily, you can find them pretty easily, so long as you know how. If you want to open up more styling options like Kerning, Ligature, and Baseline, you just have to go to Sketch Menu > Text. It really is that straightforward!

Kerning Typography in Sketch

Styles in Sketch:

Styles are what we call typography presets when using Sketch. What’s more, you can create them easily from the style dropdown located just above type parameters on the right sidebar. Making your own styles is fairly common practice when using this tool. However, not everybody knows that their styles can be cataloged just like symbols. (Read more about this process in my previous article here.)

To create a folder with typographic styles, the naming steps are as follows: folder_name / style_name or even folder1 / folder2 / folder3 / style_name. Take a look at this example below so you can see just what I mean:

Typographic styles and fonts in Sketch

In this example, I grouped my styles inside the contract folder and then created another folder for different sizes of text and one more for different colors. So the naming of the style looks like this: *contract / h1 / dark *.