Become a stylistic typography expert in Sketch

Today I want to point out some more practical tips and tricks for you to use use to improve your typographic skills within Sketch. We’ll go over a few things:

• How to access hidden typographic features within Sketch

• How to change the appearance of a bullet list

• How to use glyphs within a font as icons.

Accessing the hidden Typography panel

Apple has been a pioneer when it comes to digital typography. The multinational played a big role in making quality typography accessible to the masses. They did so partially by including a collection of great fonts installed on macOS by default and by adding great typography tools into their OS.

One of those tools is the Typography panel. It’s a native feature of macOS that any app can incorporate. What this panel does is it shows you the typographic features for the currently selected font.

Sadly it’s been burried within the OS. To get to it you have to go through a few steps:

1. Go to the View menu.

2. Click on the Show Fonts item.

3. Open the cog menu in the top left and click on Typography….

To change any typographic feature you need to select the text first. Let’s go over some of the most used typographic features.

OpenType features

Ligatures

A ligature is a single glyph that appears when two or more characters are combined. Most often this happens when there are two letters next to each other that may intersect. fi fl ffl are common since the top of the f and the dot on the i are intersecting.

By default Sketch already has common ligatures like these enabled, but some fonts provide extra ligatures in the form of discretionary ligatures. These are most often used to combine two characters in a stylistic way instead of fixing overlap issues. A common example of a discretionary ligatures is the pairing of the letters st in which there is a elegant arc added to connect the two letters together.

Stylistic Alternatives

Have you ever really liked the look of a font, only to find out later that it has one really weird looking letter? If so you might want to take a look at that font’s Stylistic Alternatives. Many fonts include an OpenType feature called Stylistic Alternatives. These options that let you swap the glyph used for a specific character. Here are a few examples:

Small Caps

Do you like to put your whole message in uppercase text? Then small caps are the thing for you. Small caps are lowercase letters that give the impression as if they are uppercase. This isn’t the same as just using the uppercase characters, these are actually designed seperately by the type designer to fit in all-caps words within a sentence of lowercase words. They’re smaller than actual uppercase letters, but they’ve been tweaked so they still got the same stroke thickness and the right proportions.

This setting is also quite handy for when you’re using all-caps text in navigational UI as they aren’t as tall as regular uppercase characters.

Oldstyle figures

Oldstyle figures are numbers designed with varying heights to look like a normal sentence. Normal lining figures are designed in a way that looks more like an uppercase character. Oldstyle figures can be toggled via your OpenType settings and are useful if you use numbers within a sentence.

Tabular Figures

So, you’re designing a table, or a checkout flow and you want all the numbers to line up vertically? Then you’ll need Tabular Figures. These are numbers that have a fixed width, in contrast to proportional numbers which have a variable width. Often these characters look the same, but the tabular figure 1 will often have serifs applied to it to make it look wider and fill in the space, making it easier for users to compare tabular numeric data.

Fractions

Some fonts support an option to automatically replace fractions that look like 1/2 with ½.

Numerators/Denominators

You’ve probably already used this OpenType feature before: this allows you to change the text to a smaller size and place it above or below the baseline. These can be handy for creating fractions, mathematical exponents or referencing to footnotes.

Note that these aren’t just scaled down glyphs, but are actually often designed specifically for this size.

Ordinal

Ordinals automatically convert 1st, 2nd, 3rd, and 4th and so on to the appropriate style.

Customize the bullet appearance

So, you probably know that there is an option in Sketch to change the list type of a text layer to numbered or bullet. But did you also know that you can change the appearance of it? To do this apply a list type to your text layer and go into edit mode by selecting the text layer and double clicking or pressing return. After that you right click on the text enabling the menu item “List…”. When you click on this a dialog pops up with a handful of settings:

Prefix/suffix

The prefix or suffix allow you to add characters before or after the bullet or number.

Bullet/number

The Bullet/Number dropdown allows you to choose between a variety of different bullet styles. But you can also use your own charachters as bullets by setting this dropdown to None and adding a character to the Prefix field by using the Character panel in macOS by hitting control + command + space.

Starting number

This setting allows you to enter what the first number of the list should be.

Prepend enclosing list marker

I’ve tried to find out what this feature does but it doesn’t have much practical functionality. Apple’s Documentation has this to say about it:

“prependEnclosingMarker: Specifies that a nested list should include the marker for its enclosing superlist before its own marker.”

Not very useful.

Using font glyphs as icons

Many fonts include icons and symbols as part of their character set. You can use these in interface design as well. They’re especially useful if you need to use icons within a line of text since they are designed to be the same size, weight and style as the text. Note that it depends on the font you use which icons it supports.

To see which characters (and also icons) are supported by a font you can open Font Book, select a font and switch the view mode to Repertoire (command + 2). This gives you a full list of all the characters within a glyph. You can even click on them and copy them with command + C.

Another way to find out which fonts support a specific icon is to open the Character panel in Sketch with control + command space. If you haven’t already, you can expand this panel by scrolling up and clicking on the icon the top right. When you select a character it will show you all the fonts that support it via the Font Variations section in the bottom right of the panel.

Conclusion

As you can see, there are loads of typographic options hidden under the Typography panel in macOS. So, the next time you’re designing something in which typography plays a big role, look if the font you use has some creative stylistic options.