Typography in Sketch 3: Linked Text Styles
How I’ve been using one of Sketch’s greatest new features to create and edit content in a flash!
Design is dynamic and adaptability is key. Functions, features, and aesthetics are often likely to change.
It goes without saying that the latest version of Sketch is incredibly powerful. Agility, flexibility, and the ease of adaptation are all core attributes of Sketch 3. Amongst the newest enhancements is the heavily sought after feature, “Symbols”. But the magic doesn’t stop there — linked layer styling for shapes and text has been put in place. Defining text formatting and applying it globally has never been so easy.
The Typography
Text styles in Sketch 3 are…
Globally Linked
In a similar vein to “grouped symbols”, your text styles are able to be globally linked across layers and art boards. They can be created from scratch and managed in the styles window, then applied to text layers as needed—but I’ll elaborate on this below.
Systematic and Foundational
I think the most brilliant aspect of Sketch’s text styling is being able to have a “live” (working version) style guide pre-assembled and easily modified for any future iteration. With a foundation of predefined typography formatting, we can rapidly create succinct wireframes and mockups. The text style feature enforces upon us the good habit of keeping a structured and agile content style guide.
Simple, Fast, and Efficient
As I’ve mentioned, text styling magnificently simplifies our job of creating a style guide. But more importantly, with a live version of a product or company’s style guide it will be much easier to keep consistent typography across teams and iterations.
The Style Guide
Creating a style guide is not every designer’s favorite task but maintenance of a uniform style and the consistency of font formatting is critical. A style guide may be difficult to create if compartmentalized and left as an afterthought in the design process. It’s essential for developing a website or app.
“By developing a set of intellectual criteria, the designer is able to make ‘creative decisions’ which are based on a systematic approach instead of instinct.”
-Karl Gerstner
Let’s create!
To learn basics of text styling, I’ll take you through a recent experimental process with a web design project:
To begin, I open up Sketch 3 and load in the pre-made “Web Design” template.
Then, I navigate to the symbols page of the file and select the pre-assembled “Typography” art board (thank you Bohemian Coding!). Now, I can dive into the text layers on the art board and alter their provided text styles to my liking. I can also add a few more of my own.
I end up with an art board that looks like this:
The idea here is to set up my text styles before I begin designing. I believe there are two core reasons for this:
- To set up a foundation and identify my basic elements. When wireframing, the content architecture and page structure are key, such as relationships between elements and hierarchy of information. By implementing this set up I minimize the time I may spend formatting text for the sake of appearance and minor mishaps from having to alter text layers individually. I try not to reach for perfection or concreteness when creating the styles so early in the game…things are bound to change.
- To format text when necessary. For example, when it needs to be adjusted in regards to device resolution. If I am designing for a responsive experience I want to consider my tablet and mobile resolutions.
Later on, after I’ve laid out a page or two of content within the art boards I end up with a page titled “Article Styles” that looks like this:
Ok, so now you know how to set up your style guide and set your text styles. Let’s consider some changes now…
I decide it’s time to get some feedback so I review my work with the team. Thanks to the working style guide I’ve created in advance, I can quickly review the basics with the Development team so they are able to get a gist of the structural components. Let’s consider that I receive a critique about the paragraph text being too small…
A quick fix: All I have to do is select any “paragraph” layer to which I have attributed a “Text: Paragraph” style and alter the formatting to illustrate a larger font size.
“Remember, text styles are kept in sync, so the style changes you make to one text layer are propagated to all layers using that style.”—noted in the pre-made Sketch template: “iOS UI design”
A couple final tips:
Text styles can be renamed or deleted by accessing the symbols/styles management window. You can access this window by selecting the “Styled Text” toolbar item.
Text layers will retain their attributed text style if copied and pasted into a new or different Sketch file.
