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.
- iOS Typography – Read more about it
- iOS Typography.sketch – Download Sketch file – Soon
- tvOS Typography – Read more about it
- tvOS Typography.sketch – Download Sketch file – Soon
- Fontily: missing sketch plugin – Replace fonts
- Style Master– Batch text styles rename. Maxence Le Corre Thanks for sharing this one.
- Rename It– Rename files
- Styles Generator– Generates styles from selected text layers.
- Unused Style Remover– Removes unused styles
- Shared Text Styles– Export text styles as json file that you can import into new Sketch file. Jose Somolinos Thanks for sharing this one.
- FontBuddy – Install Missing Fonts In-App
Ready for a new project, or not?
Do not worry let’s schedule a meeting or friendly chat and see.