Typography

Text styles in Sketch allow you to save set text attributes. Once you define a saved text style, it can be reapplied to a number of different components. This reduces errors by having a set of named text styles that are consistent within your design system. It also makes the process for updating or scaling your system much more convenient.

What should be included in text styles?

All text in your Sketch files should be saved as text styles. This not only includes headings and paragraphs, but also placeholders, subtitles, footer text, labels, and more.

Here are a few things to include in a text style:

• Size
• Font weight
• Line height
• Character, line, and paragraph spacing
• Alignment
• Text decoration
• Text transforms (all caps, all lowercase, or default)
• Opacity Color

Text style best practices

Because Sketch styles require unique saved text styles to account for alignment, color, weight, etc., it’s common to see design systems that account for every possible version of a text style. We recommend you only create styles for what you need.

Don’t over-engineer by creating text styles that aren’t actually used within your system just because you think you might use it in the future. For example, if you never use right-aligned headers, don’t create H1–H6s that are right-aligned. Only create the styles that you'll actually use.

Need to update your H1? 

Simply update the text style and every component that uses the corresponding style will be updated as well. There's no need to go component by component to make updates; a single change in the source pushes to all instances of the text layer.

To update a text style in Sketch:

1. Adjust the text attributes in the inspector.
2. In the Appearance panel under the Text Style name, select Update.