This is part of Frames for Sketch — series of tutorials about best practices we used to make Frames Kit truly useful tool. We’ll cover on how to keep your typography consistent across different projects so shared text styles stay clean and useful for you to work with.

Hello! We are back to you with a another tutorial so you can learn something new about using fonts in our favorite application. Not so long ago Sketch has introduced to us new text style managment menu, let’s take a brief look at it, and see how can we use it to maintain an accessible and harmonious typography system including a 2 separate typefaces.

Text styles with a strong hierarchy

You might have noticed that sometimes your fingers, bypassing the thought, manage to come up faster with a name for a new layer or style, so you might have noticed such menu options in your project as Title-2, subheader-small, header-3 etc so lets stop making and distribute poorly organised styles.

When we have a mess in styles it becomes more complicated to communicate even basic requirements when it comes to everything that is text or font related. A project text system must have a good place in any product designer mind, so our goal is to make an accessible and reusable typography system that can expand or collapse depending on the size of the project.

To do this, we will need to determine in advance the number of used text styles, for this example we will use the existing standard for web development, for us designers HTML offers six headings of different levels that show the importance of a section, title or text. Thus, the <h1> tag is the most important heading of the first level, and the <h6> tag is used to indicate the header of the sixth level and is the least significant.

Let’s look at how to apply this approach to text styles, and make some simple steps to organize them in groups so we can give them a structure and manage them.

Creating a Typography System

1. Open Sketch app, and start with writing all your text styles in a simple list, in order from the biggest to the smallest one, set all text layers alignment to the center. Hint — remember that the number of your styles can affect the overall feeling of typography in the project, so more does not mean better, try to constantly reuse same sizes instead of making a new one when designing a new web page or screen.

2. Now duplicate the column and make the left and right aligned columns to form a font table, and do not forget to change the alignment of each text layer to fit the appropriate column.

3. Copy the resulting table and duplicate the required number of times in accordance with your brand or interface status color, for example, Accent, Disabled or Active text status.

4. Now naming is really what matters on this phase, You need to assign names for each text layer according to their columns so same styles could form groups and style could have a menu structure, to do so, we will be using Rename It plugin.

Our menu structure look like this:

*/Font name/Alignment/Color
Where (*) is current layer name

(If you are not planning to add another typeface you do not need to include /Font name to the structure).

Use rename it plugin to quickly set name for your text layers.

5. Now you need to create a text style from each text layer, at the moment of writing this article I could not find a way to make this step more elegant because still no plugin out there which could help you to convert selected layers to a shared style. So you need to manually assign each layer to a shred text style from drop down menu. (Hope someone will make a plugin for this action someday).

After this you should have a text menu structure looks like this:

Feel free to download the template sketch file below, to use it as a starting point for your next project. You can set your own fonts to the file to speed up this process next time.

👉Download Text Style Template

Font pairing

So you really need a second font family in your project? 
The second typeface in your document will allow you to make your text more efficient and create cool looking combinations that you have might see on those fancy landing pages or you may use multiple fonts in terms of accessibility of your product for different user groups.

To connect a second typeface you will need to:

1. Duplicate the previously created tables, and change the font for all text layers. For example: from Arial to Roboto typeface.
2. Use the Rename it plugin to replace the /Font name in the menu structure, For example: from /Arial to /Roboto
3. Now, overwrite all the new text layers as new Shared Styles.

And it’s done, now you can kick back and look at a well structured shared text styles that will probably save your day someday. See the GIF check how the dropdown menu should look like:

Check the Frames Kit promo page to to find out more useful features.

Share and Import your Text styles

Now that we have a ready-made system of text styles, a normal person desire is to use this approach as quickly as possible for other projects, the Shared Text Style plugin will help us with this to be possible.

By using it you can export a JSON file that will exist independently from your current document, and that you’re able to save anywhere on your hard drive, or Dropbox. This file will contain all the information from you shared styles, so you can just drop it to a new project once again and have this well structured menu once again just in no time, and will keep your typography to new more consistent level.

Get Shared Text Style plugin.

Keep your head cold and typography clean.

More pro tips:

• Make different JSON files ready for mobile and web design typography.
• As your project may grow and change constantly make version control for your typography system file, keep it in sync with GitHub or abstract.
• You can re-import a JSON file to overwrite initial text style states, so you can reload playing with sketch.
• Here you can find a large number of different font combinations that you can try — http://fontpair.co/.

And before you leave

• Download the Text Style Template freebie.
• Visit Frames Kit promo page for more hacks and features, explore the most useful design system for sketch, and get a discount by sharing.
• Follow Robowolf on Twitter for more awesome freebies and tutorials.