Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
FREELessons:19Length:2.4 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

3.2 Sketch Text Styles

Sketch text styles allow you to define presets for text properties like color, font family, size, and so on. They work similarly to shared styles, except they’re just for text. So let’s check them out. You'll see how to create and edit text styles in Sketch.

3.2 Sketch Text Styles

Text styles allow you to define presets for text properties like color, font family, font size, and so on. They work similar to the shared styles we covered in the previous lesson, except they're just for text. So let's see how they work, let's create a simple text element. And let's change its font size. And let's add a nice color to it. Now, if I want to save all of these properties that I set here, so we can use them later on different text elements, we can go in here under Appearance where it says No Text Style, create new text style, give it a name, let's say H1. Now we get a preview right here, and then I can create something else, let's say Hello, and let's actually make this a little bit smaller. And I'm just gonna change its properties here somewhat, and then, if we decide, okay, well, I want this piece of text to be an H1, to have the exact same characteristics, I can go in here and I can click H1. And Sketch will automatically apply the saved set of properties to this element as well. And again, similar to the shared style, so if I'm gonna change something here. Like for example, the font family. Again, we'll have that asterisk. And then we can go in and hit Update Text Style. And those changes will be propagated to the rest of the elements that you used that text style. So, what properties affect a text style? Well, first of all, it's the font family, then it's the font weight, then it's the font size, then it's the letter spacing, so basically all of these. Line height. Paragraph spacing, and then the text alignment will also affect the text style, but not these resizing of properties, these will not affect it. All right, so as you can see, I can change these at will, but this here will not be changed. In fact, I can make this a very large text box like this, but this will stay the same, right? So this is not affected. But if I change the alignment here or the vertical alignment, that will also affect the text style. So just be careful about that. Apart from those, text decoration also affects the style and also text transform. The rest, if for example, we gonna take this layer and we're gonna add a fill to it and we do an update, we can see that the fill is also considered a style here that can be applied. And we can also add a border to the actual text, and that will also be applied. Shadows also trigger the update mechanism and also Inner Shadow, and Blur. So as you can see, this is not exclusively for text properties. Text styles use other properties as well. But these text styles can only be applied to text, so I hope that makes sense. And again, just like the shared styles we covered previously, these are very helpful for when you're defining styles for elements you want to reuse, like headings, or paragraph styles, or button text styles, right? You define them once then you reuse them in the rest of your document and then when and if you have to change something, you just change it in one place, update the style and all the other elements that use that particular text style will be updated. So that's very cool, that's a huge, huge time saver. Now, we saw how to define these shared styles and text styles separately. But Sketch actually gives us a way to combine these two and to define something called symbols, which are basically collections of elements and text styles. Let's learn more about symbols in the next lesson.

Back to the top
View on GitHub