Prefer to read? The transcript is below. Slides are here.
Let's talk about typography! Typography is the way we arrange letters and text on a screen. I'll give you some tips that are going to help you be more user-friendly on your website.
Tip #1 Add White Space
From research, we know that we can get a significant improvement in reading comprehension using white space. The increase can be 20 percent - that's a lot!
So when I see a with a long paragraph and little white space (also called negative space,) I cringe. I feel squished just looking at this! It's way too much information. It comes off like a wall of words. There's very little white space, which sometimes designers will call negative space.
Look what happens if I just add a little white space, all I've done is add in some spaces, just hit enter a few times. I've also added in some bullet points, and this seems like a much more accessible passage. And I do know that reading comprehension of this will improve. Remember that online line, that a paragraph could be just one sentence. That is extremely different than other kinds of writing.
On the web, things are different, so every kind of inch, inch and a half, I look to try to break up the writing. This could be with bullet points, a space, a callout quote, or something so that it never feels like a wall of words.
Tip #2 Pay Attention to Line Length
Line length is important, and it's sometimes called “measure.” If you hear somebody refer to it like that, you'll know what they're talking about. It's how far the words go across your screen.
You don't want them to go all the way across the whole width of someone’s browser. We don't want something like that. We want a line length of forty-five to 90 characters.
In the slides, I have about forty-five characters across, so 90 — it gives you a little bit more room. And here you can see this paragraph is about five hundred fifty pixels wide. So I'm usually somewhere around this seventy, seventy-five characters wide range. Anywhere in there will be good.
The main thing is to remember to not have text go all the way across the screen. This should make it easier to read for people.
Tip #3 Have Good Color Contrast
Also, keep in mind the colors you are using. Look at this screen. (See slides here)
Are there certain text phrases that are easier for you to read than others? I can easily read, let's see, the darker one and the black one and even the darkish, burnt orange one. But some of the other ones are more challenging for me. So it will depend on everybody's eyes. And some people who are colorblind are going to have a different experience than maybe I might.
There's been a trend in the last 10 years to use grey a lot more on websites. Instead of black on white, it's been common to see grey on white. And that's interesting. People have said, "Oh, it's easier on the eyes." I actually don't know if there's research on that. There may be. But what I do know is the text at the bottom here totally fails accessibility tests. That's going to be problematic.
We want to be sure we are accessible to as many people as possible. That requires good color contrast between the foreground color and the background color. So you need to test your text. I go over to the WebAIM Contrast Checker, it's a free website.
I can put in the foreground color, whatever the color is that I'm using for the grey font on my website. Next, I can put in the background color of my website. I can then see, you know, does it pass what I'm looking for, that it passes this kind of test. And if that one passes (WCAG AA), I'm like, "OK, that's good. I have a good contrast ratio.' Definitely important to do - make sure your greys are dark enough. That's typically where I run into issues. I'll have designed something, and then I'll go, "Oh, wait, I think some of that text is a little bit too gray." It's too light of a grey and needs to be darker. So keep an eye out for that.
Tip #4 Size Text Properly
People want to read your writing and not have to squint or lean forward and look into it or anything like that. Typically 16 pixels is the size that we expect on most websites. It's kind of standard text body size. Developers will size it in something called "ems" so that somebody could increase the font size as well. We want to give people that possibility. So don't be too small, and you don't want to be gigantic or else you're going to take up all the room on things like mobile.
Tip #5 Use Decorative Fonts with Care
There are also different kinds of fonts. I've got some examples of decorative fonts which are really fun. I enjoy looking at them, AND we definitely don't want to use them for body text. Fun for headlines, not for body text.
As you can see on the left, when I'm using Arial, it's much easier to read. It's harder to read when I'm using Bangers on the right side, which is more like a comic book kind of font. So we just need to be mindful that online we really want to stick to more traditional fonts for the body text. Open Sans, for example, is a very common font to use. In our titles maybe could have a little bit more flair with a decorative font. But we always want to make sure that things are readable over everything else.
In Summary
Use white space to increase readability
Keep your line length (measure) short
Provide good contrast for your text
Ensure fonts are large enough
Use easily readable fonts
Follow these tips to improve the typography on your website, make your writing easier to read, and satisfy your website visitors.
Want to learn more? Check out Birdcall’s affordable UX classes for further learning for non-technical professionals!
