Become a Stylistic Typography Expert in Sketch
Last month I wrote about the finer details of text rendering 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:
- Go to the
Viewmenu. - Click on the
Show Fontsitem. - 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
OpenType is the modern standard for fonts. Besides an opentype font containing all the usual characters they can also contain a host of different OpenType features. These are basically pieces of code contained within the font file that enable certain functionality; either by default or after being turned on via that Typography panel I talked about earlier. Here is an overview of the most commonly used OpenType features that might be useful in your next design project.
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.
Other articles about Sketch
