TEXT HIERARCHY

"And the first thing we want to do here is just focus on the text here, what we call our text hierarchy. So let's break it down and let's have a look at what we've got. Look at the contrast between the sizes of this text. We've got our large, and then we've got our medium text here for the sub headline, and then we've got a smaller text. So the size difference between this large heading and this small subheading, and then we've got this headline here. So this is quite a nice text format. I want you to think about your text hierarchy and be consistent across all of your pages and get into that consistency. There'll be different edge cases where you go, but I want you, first of all, to create a text hierarchy. Maybe jot it down and think of it like this, and you can all work together as a team in that text hierarchy.

If everyone in the content team does the same thing, the website will look nice. If everyone in the content team does different things, it's going to start to look inconsistent and messy. Inconsistency is not a great thing, really. But if you're not a designer, you do just want to keep it consistent as possible. So let's see how this one's broken down. I'm going to just put my cursor in here to see what this is. Well, this is a heading two. It's the second layout down. So that's a heading two, which is nice. And then let's put the cursor back in there. Sorry. It's a heading two in style one. It's the big font here. So what about this sub-headline that's going in here? Well, this is a heading three in style five. And then breaking down the hierarchy here. What do we got? We've got a heading four in style six.

Now, I like style six for these category links. And look at that, it's always in a different Colour. So if your category, what we see sometimes with style six is it might be a bit bigger. So if you are the designer, it's a good idea now, if your style six is too large, maybe bring it down to 0.89 or something like that. So just do that now. And then everyone can use style six for this one. And then you're using these styles in this way. This is my style five, my style one, which I think looks okay.

Now in terms of contrast, you could in here, I'll just show you Colours actually. Let me show you what's going on in here. This is our neutral Colour, our off-white, right? And this is our white, our absolute white. And you can use these in pairings in pretty cool ways. So if white is the main poppy one, I could make this the neutral. On a dark background, you can't really tell the difference, but it is there, bringing more emphasis onto the white. And then this is less emphasis. So I could do that in here on this dark background. So I could make all of this off-white. And then I could just change the first few words in here to white. And notice these first few words are bold.

So even though it's not doing anything, it doesn't feel like it's doing too much. It is just bringing an extra bit of emphasis there. So what I'm going to do is just save, and then click view to open this as a new window. And let's go and have a look at that without the red line spell check so we can see that a bit clearly. You can see there, it's kind of okay, but I like that in the pink on this dark background.

So we've learned a few things there. Designing on a dark background, in this case, full Colour background, you're just working with the off-white, the neutral and the white in different ways, but you can have a punchy accent Colour. In this theme, typically, the way it's set up is this is our accent one, which is the kind of punchy one. But in different categories, then I use pink for the punchy one. So that's the way I'm looking at that. And for this particular theme, I actually like the sharpness of that white, because I don't think it's too overwhelming. I'm not looking to break that down anymore, but I'm just thinking about these rules.

And that's all I want you to do. I want you to think about what I've just said in terms of contrast between your main three headings and then how you want to introduce your text. And you can do that both on a light and a dark background. So what I'm going to do now is just jump in here. And in the layouts, they tend to come in light and dark, you'll notice this. So what I'm going to do now is get the light version, and I'll just hold the option, I'm on a Mac, or alt if you're on a pc. I'm just going to drop this one to the bottom of the page here. And you can see here that this layout already has some text styling for us. But what I'll do, I'll just highlight all of this. I'll just show you Colours on a light background. So I'm going to highlight all of this and clear the Colours, and then I can make it all lowercase. Well, let's just go and have a look, get our eye into some of these swatches.

Well, we've looked at the neutral and they're off-white there. Well, these two are also used for text. This is the main text one here. So you'll find that you're looking around this like sevens and eights. It begins with a seven and eight there. You can see the first letter is seven, like a high seven. Well, that's what we call a middle grey. So our bot has actually chosen these Colours for you in most cases. So this is kind of what we call a middle grey. It's called middle because it works on both the dark and a light background. You'll still be able to see it. And then this one as well just sort of works like a middle grey that you can see it on a light and a dark background, but it's a bit lighter. So you can actually draw contrast on a light background with the main and then this middle grey text Colour.

So let's just have a look at that. If we were to make this one the main, and then you've got the text Colour. But you could go down again with those two text Colours. So I'm just drawing your attention to that. I want you to think about those Colour swatches. These Colour swatches are not there by mistake. It's not like they've gone and been randomly chosen. Our bot has helped us design these Colours so it can work on both a light and a dark background. But so just get to know that styling.

In this particular theme. I'm not using the text Colour so much in these. If it was a big blog post, I'd definitely be using this text Colour. But in the titles, I'm actually being a bit more edgy. I'm going with main, and then I'm using one of our accent Colours just to pop the text there. So again, that's my choice for this particular theme. Now, for your design, it's okay what you choose, just decide what you like and then stick with it and then just keep running with it. And what you'll find is now you're looking at this for the first time, you'll start to see it everywhere and you'll get better.

So we're looking at the Colour contrast and we're looking at the font contrast. And that's all I really want to show you for this episode. We're looking at just thinking about our text styling and thinking about being consistent with it. So have a play with that. And if you're working alone, go and decide how you're going to start and what that text styling is. And if you're working as a team, maybe just decide some three different header types and then how you're going to set up your content and do that for light and dark backgrounds."