7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 14Length: 1.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.3 Creating Shared Styles for Typography

In this lesson you’ll learn how to create shared styles for typography. Again, this is something you should do when you’re in the early stages of a web design project.

3.3 Creating Shared Styles for Typography

Hey, welcome back to practical UI design with Sketch. In this lesson, you'll learn how to create shared styles for typography. Again, this is something you need to do in the early stages of a web design project. So let's get started. Grab the art board tool and create a new art board. Gonna call it typography. And let's position it something like this, maybe. Resize it to something like that. Okay. Now inside, you need to do a few things. Heading styles, paragraph styles and link styles. These are the basics. So let's start with the headings. With the text tool, I'm gonna say heading 1, color is going to be 171D24 helvetica neue, we're gonna use bold for this one. And also, 64 pixels for font size. And then I'm gonna align this 50 from the top and 50 from the left. And then, create a new text style called H1. Next is going to be H2, and this one will have 44 pixels font size. And next is the H3, and also don't forget to create a new text style here for H2. Now this will be for H3, and it has medium weight, and also 32 pixels font size. Next is an H4. This one is 22. Regular. So create style for H4. And then we have the H5 and H6. So, H5. This one is a bit different. It's going to be 16 pixels. Color is going to be ACBOB3, B0, I mean B3. It's going to be uppercase. We use a two pixel character spacing and creating our style for H5. Next is going to be H6. And this one will be 12 pixels, same color, character spacing reduced to 1.5. H6 here, creating a text style for H6. Okay? And then what I am gonna do is select all of these and evenly distribute them. So now we have all the headings. Let's go ahead and add the color swatches. So first of all, let's start with this color. Which will be called light text, okay? And then another one for heading text and that one will be 171D24. And after that, we need a paragraph. So in here, let's actually group these together as headings, and then I'm gonna do a paragraph with the text tool, simply draw a box like this, and I'm gonna paste in some text. I'm gonna use Helvetica New, regular 16 pixels. For the color, I'm going to use 58626E and the line height should be 24, like that. Okay, so creating your text style, paragraph, and using this color, also creating your swatch. Right here. Okay. So, with the headings and paragraph done, let's create a simple link. So I'm gonna say this is a link, and the color that we're gonna use is 2E95D1. Helvetica neue 16 pixels. I'm gonna place it right there, and then under that it's gonna be a hover-link. So on this, create new textile, link, and then this is a hovered link. For color, I'll actually use the heading color, so grab that. And let's make it underlined and then that is link hover. Okay and that's basically it for typography. Now we have all the necessary styles to actually begin building more complex elements. So next time on Practical UI Design With Sketch, you'll build the sidebar. This will be converted into a symbol so it can be used later on in the project. See you there.

Back to the top