Managing text typography styles in sketch

In VIA GO (now known as Studio Standard) we are using iOS and tvOS default typography as it’s recommended by Apple, now users can use text size change option for better readability.
That’s why templates and tutorials are for Native text sizes.

In this chapter we will create automated text styles

How to Start?

To start the tutorial you can download the iOS or tvOS template listed below, or you can create your own set that you’re more familiar to work with. A possible reason to do this is maybe you need just web or Android platforms.
Text sizes in sketch templeate are copied as reference from apple iOS Typography user interface link.

How to Organize?

To start with Sketch file, first copy the alignments you need (Left, Center, Right) and then to that group you can copy the number of colours you have.

Tip: Use Rename it plugin so you can save a lot of time.

My personal approcs is: Text size name / Alignment / Colour ( example: Title 1 / Left / Blue Colour ).

How to Generate Styles?

After you created and renamed all the text layers select them all and use Styles Generator to generate all the styles from the layer names of selected layers. Do not forget to use ” / ” in names so you group styles.

Watch video for demonstration

How to share text styles between team files?

With plugin Shared Text Styles you can easily export and import text styles. This process is little manual but it is the best practice for now.
Store it on a shared Drive next to the Sketch file so others don’t have a problem finding it. If you update some text styles export it once again and notify the others to import it once again.
After a new import is done it will update all text layers in the file automatically.

Resources

iOS Typography

tvOS Typography

Plugins list:

Ready for a new project, or not?

Do not worry let’s schedule a meeting or friendly chat and see.