Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:12Length:1.5 hours
Wordpress thing to check 400x277
  • Overview
  • Transcript

2.4 Well-Crafted Typography

On most websites, text is at the center of the content, so it’s super important that it looks great and is highly readable for your visitors. Learn how to identify well-crafted typography in this lesson.

Related Links

2.4 Well-Crafted Typography

Hi, and welcome back to WordPress Themes, themes to check before you buy. In this lesson, we're gonna be taking a look at how to identify a well-crafted typography. So, like I said at the end of the last lesson, unless you've got a site that's going to be completely based around videos and images, then it's really important that you have good typography, and what do I mean by good typography? I just mean text that is designed in such a way that it's conscious of making sure that the reading experience is easy and pleasurable. Some of this is gonna come down to personal taste. So some people will like certain fonts, other people will like other fonts, but there are few key things that you can definitely check out in each and everything that you look at. One of those things is the default text size, and this sort of connects back to what we were talking about before with making sure that a theme looks good on different devices. So you need to make sure that the text size is readable and comfortable to read, on both big screens and on little screens. It's not uncommon to find that a theme has a text size that's too small. So on a mobile screen you end up having to pinch to zoom it out to make it comfortable to read, and on a large monitor, sometimes the text doesn't take advantage of the space that's available and you end up with text that's too small to read, even though you have a lot of space to work with. So definitely look at that first, read some demo content on the theme, and make sure that it's comfortable to your eye. That's the best place to start, and have a look at that same test on multiple different devices. And what you see on screen here is an example theme that I've picked out, because it has excellent typography. The text here, the default text is just the right size. It's not to small, it's not too large, it's very easy to read, and that's the case on any type of device. And another perk of this theme that I'm showing you here, is I've gone to the trouble to assemble a style guide or a typography presentation, so you can have a look at all of the different aspects of this theme's typography all in one place. And that's something that you should definitely try to find on a theme demo. It's gonna make your life a lot easier if there is a presentation of the different aspects of the typography. If not, just browse through the theme, and try to see as many aspects of typography presentation as you can. All right so, the next thing after you checked the default text size, for just regular text, is the headings. There are six different heading levels, and here, you can see we've got an example of an H1 level heading, and then an H2, and generally speaking, each heading is gonna get smaller as you go through the different levels. So the things to look for here, are to make sure that it's clearly distinguishable that these are headings, that you like the graduation in size and style of the headings. And also that you have a good amount of space above and below the headings, in particular, the amount of spaces between the heading and the next text. One common problem that can come up is you might see a heading that looks great by itself, but then when you try to put a paragraph of text afterwards, it can be cramped up here with no space in between the heading and the text. So just check on that, and make sure that the spacing in between these headings works. Another thing to check on, if you can, if you get the chance, is that headings look good when they're put right above one another. So for example, you might want to have an article that uses a headline with an H1 heading, and then a sub-headline with an H2 heading, or it might be an H2 heading with an H3 subtitle. In some cases, a theme might be designed, so that if you stack one heading on top of another, there's way too much space in between. You won't always get to test if that's the case with a theme demo, but if you do get the chance, that's something that's really helpful to find out. The next thing that you wanna look at is line heights. So, you can see that we have a certain amount of white space in between each line in this paragraph here, and that doesn't just happen automatically. It's up to the web designer to decide how much space there should be in between these lines. And you wanna check to make sure that these lines aren't too cramped up, that you don't have lines of text sitting too closely together, which makes them difficult to read. And again, that's just a matter of taking a look there's no magic number of what the correct line height is, just take a look and make sure it's easily readable to your eye. And then after that, you also have some extras, things like if we scroll down here, block quotes. So have a look and try to find out if there's a demo of what a block quote is gonna look like if you use it with your theme. Also, ideally you wanna have a look at lists and see how those are gonna appear. Sometimes if you don't see a demonstration of how a list is gonna look in a theme, when you actually go to use a list, you might find that you have something like the bullet points are hanging off to the left side instead of being indented the way you might like them to be, for example. So definitely try to get a look at as many different examples of different aspects of typography in a theme as you possibly can. So this is one great example of typography. Everything's very neatly done, everything's very readable, the sizing is good, the styling is good. And when I say good I'm not meaning by a particular taste, I'm just meaning that you can comfortably read all this information without feeling that your eyes are being strained. Let's have a quick look at another couple of examples. So here we've got another thing that's showing off its typography. This is really convenient when a thing puts all of these in one place for you. So again, we have a comfortable size for the default text with a comfortable line height. We have very clear graduation of one heading level to another. You might actually argue that the fifth-level heading and sixth-level heading are a little bit too similar to one another. That certainly will come down to your personal taste and how much you see yourself using that sixth-level. And then if you scroll down further, we can see how the block quote is going to look when it's used. We've got some code formatting and some examples of lists. So these are the types of things that you wanna look for in a typography page, and that we have one more example. This is a really good demo, because it shows you multiple pages of different demonstrations of typography. So right here we've got the typography basics. It's showing us how bolding and underlining looks, how links look, and how light text looks on a dark background. And then if we head up to Elements and we take a look at Headings, then we've got a whole page just to show us how the different levels of headings look, and then we've got the same thing up here for Lists. So I've got all kinds of different list demos here, and this is exactly what you wanna try to find. So if you can't find all of those things in one page, then just have a browse around the demo of the theme and try to find as many of these things as you can. As I said, the main thing isn't that it adheres to any one particular type of design style, what really matters is how comfortable everything is to the eye. So those are the points that you need to consider in terms of well-crafted typography in a theme. In the next lesson, we're gonna take a look at how to make sure that your theme can cope without JavaScript being enabled in a browser. Sometimes people will deliberately disable JavaScript in their browser for security reasons. They may have restrictions at work, they don't allow them to run JavaScript. There can be all kinds of reasons that JavaScript may not work in a browser, and unfortunately some themes, if JavaScript doesn't work, that'll just fold over and fail to function properly. So in the next lesson, we're gonna go through what you can do to check that's not the case. I'll see you there.

Back to the top