Lay the typography foundation by reusing Sketch text styles across your pattern library.
- [Instructor] Without text, there's hardly anything substantial left in the interface. Your favorite app quickly becomes unusable. But it's not just the presence of text that plays a decisive role. Numerous different properties of text: size, color, line height, weight are crucial to the readability, usability, and overall look and feel of a digital product. So I just want to show you how crucial typography can be to an interface. So here we have a banking application that's pretty standard and I want to actually change this font in this banking application to comic sans.
So, I'm going to go over and change it here, so notice that I ended up with a playful and non-serious experience in the place of a plain business UI, that really needed to be serious for the user. Another example is if I'd actually just kind of decreased this line height from 32 to 16, consumption of the content might be extremely hard if not impossible. Making the text too large or too small is going to completely change the experience as well.
Typography really hangs on the tiny details. So let's go back to our design system and kind of dig into how I kind of set up my typography and how you can set up your in your organization as well. Every organization is different, so there will be different things to consider. Here are some things you'll need to think about when laying the typography foundation. One of the things you're going to think about is font family. So, are you going to need to account for localization or different language support? This is really going to affect the type face that you choose.
Are you going to need to license these fonts? Do you need more than one? Those are some of the questions that you're going to want to ask yourself when choosing your font family. Font weights, how much flexibility do you want to give your team? Do you want them to have bold, italic, regular, semi-bold, light, all of those? Or do you want to limit the font weight so that they only have a few options? The line height. The line height really depends on the context. For example, in the context of an enterprise application, the need for long form text is quite rare.
So if you're mostly dealing with small bits of data or data in a table view, line heights can be tricky and you might just want to set a standard of 1.5 times the font size. Providing a typographic scale. A harmonious progression of font sizes like the musical notes on a scale is a typographic scale. Exclusively using sizes from a particular type scale will create visual as well as hierarchical consistency throughout the product. The sizes of your headlines and your body text. Limited choice makes typographic design decisions easier and helps with building a consistent user experience.
If in a project, there's only a need for a strong, primary headline, then heading large is the only option. While definitely constraining for a designer's creativity, this approach is more bulletproof for consistency. The downside is the lack of flexibility. If a designer wishes to make a headline really prominent, she'll have to play with other design elements, rather than a font size. So now I want to show you how to set up styles in your sketch document. Notice that I have two font families chosen, open sans and montserrat, and appropriate weights and a link to download these fonts.
I also have a classification of whether it's an H1, H2, H3, H4, H5, et cetera. I've also noted the text size and the line height here and a sample of how that title will look. So I've set up a few of these already as textiles so that I can reuse these across my document. You can also set these up as symbols if you want, but I think it's easier to set them up as styles, in my personal opinion. Now you want to make sure that the color for the textiles for each instance is set up correctly before you start creating shared textiles.
So, for example, I have the link style as blue and underlined, so it will be saved as blue and underlined as a shared textile when I create it. Also note that I have a black box around the button text so that I can see it on a white background since that text will be white on the button color. So what you'll do is you will choose each one of your texts here, so you have the display title right down here on the side menu on your layers panel. So I'm going to make sure that I choose this and then what you'll do is you'll go to the side panel where it says no textile.
You're going to click it and then at the bottom you're going to press create new textile. And here we have the display title style. So notice that it says this by default display title because that's what the actual text says. So I'm going to actually remove style and make this H1 display title for more consistency. So you'll notice that it then goes into the H1 display title. I'm going to do this for, the same for the page title.
So I'm going to go over here, create new style. And I'm going to make this H2 page title. And that one's created. I'm going to do the same for the section title. It'll be H3 section title. Subsection title. Now we got to get, go a little bit further down here 'cuz now there's a few more styles here.
And this will be H4. This is subsection title. And then I'm going to do the small title here as well. Create new textile and this is H5 small title. You can also create groups of textiles. So, for example, we have large body copy, body copy, and small body copy.
So I'm going to click into this and create a new textile. You create the groups sort of like you create symbol groups with the overrides panel, so what you do is, I'm just going to do body backslash this is large. And then I'll go here to body backslash medium. And then you go here and body backslash small.
So you'll notice if I go into this, I have body and then I have large, medium, and small. So because I put that backslash in there, it will name it and kind of format it here so that I can easily see them within this body group. You can also organize or rename your textiles down here by going to organize textiles and all of your textiles will come up here. I can edit them however I want. You can remove them. Your layer styles are here as well, but we're really just focusing on textiles here.
Done. So now if I'm designing, what I can do, up here go to the top. Go to insert styled text. And you'll notice that all of my textiles that I have created here are here already formatted. So if I wanted to put a display title I can just go here and use this in my design. When we have a mess in styles, it becomes more complicated to communicate even basic requirements with anything that is font related.
With typography and textiles, we've created a standard set of type faces that designers can now use. This takes the guessing out of what font style should I make this and it standardizes all typography across products.