PSD Mockup
Typography is an extremely important part of effective brand communication, especially on the web, where people’s attention spans are short and their screen sizes are small. Great typography happens when you arrange text or copy on a page and make it both readable and legible.
Harnessing readability and legibility on the web will help you create content that offers a better user experience for your leads and customers. And that will boost your site’s conversion rate.
Readability vs. legibility
What is Readability?
Readability is how easily your audience can read and understand the written copy on your website. This all depends on the difficulty of your words and sentence structure. Great readability comes from simpler words, sentences and paragraphs that are easier to digest.
Readability also depends on how your website’s typeface actually looks to readers, which takes into account things like font size, font style, line length and line height.
What is Legibility?
Legibility describes the features of a text that enable the reader to recognize and distinguish between the individual characters and words. Legibility is a result of the chosen typeface and font, its size, spacing, and the contrast between text and background. It can also be affected by the layout of the text, e.g. the text orientation and length of lines.
The components of readability and legibility
Let’s dig into the different pieces of readability and legibility. And don’t forget: readability includes all of the elements of legibility, too!
Readability
Line length: This is the amount of space between the left- and right-most edges of a block of copy. Shorter line lengths are easier to read because your audience can simply read them faster. With longer line lengths, their eyes have to travel farther across the screen, which makes it harder to track vertical progress as they read down the page.
Kerning: This is how much space is between one or more pairs of adjoining characters. Kerning should be adjusted to be more visually pleasing. A great example of this is the letter “V” next to an “A”—due to their shapes they need to be brought closer together than other letters in words.
Tracking: Often confused with kerning, tracking is the amount of space between all letters in a word or line of text. Again, this should be adjusted for the purpose of achieving a visually pleasing result. Words whose characters aren’t so close together—or sentences whose words aren’t too near each other—are easier to read.
Alignment: This is how margins are set at the ends of a block of text to better distinguish your copy from surrounding elements on a page. Text can be justified, centered, flush left or flush right.
Leading (line spacing): This is the distance between adjacent baselines of copy (the lines where your characters sit). Leading that’s too close makes your lines of copy look squished and therefore difficult to read. More generous spacing allows your readers to get a much better sense of their reading progress. If leading is too far apart, it creates big spaces between lines, forcing readers’ eyes to travel too much to follow along.
Legibility
Point size: This is the distance between the bottom of a descender to the highest ascender in a type. On the web, recommended point size is between 15 and 25 pixels. Anything smaller, and it gets too hard to make out the letters.
Font style: Your font selection greatly affects the legibility of your copy. For instance, if the font on your site is Lime Blossom Caps, then good luck having your visitors actually make out the individual letters! Try to use the most legible web fonts—like Courier, Arial and Verdana—or find another with characters that are easy to recognize.
X-height: This is the distance from the baseline to the midline of lowercase characters. Your x-heights should be big enough so that lowercase letters can be read comfortably on any screen. Don’t make the x-height too tall because it can cause confusion with uppercase letters.
Serif or sans serif: Serif fonts have that little “foot” at the ends of the strokes of their characters. Sans-serifs don’t. Historically, serifs have been used in print due to a belief that they’re easier to read, but studies on this are inconclusive. A review of studies going back decades determined that there’s really no difference between serifs or sans serifs when it comes to legibility. It’s really more about aesthetic preference.
Character shape: The shape of individual characters has a huge impact on legibility. Going back to Courier, Arial and Verdana font families, note that their characters all exhibit qualities like tall x-heights and lots of negative space, which boosts legibility.
Tips on Better Readability and Legibility
1. Use clear subheadings
It is very important to split your text into chapters using h2 and h3 subheadings.
These subheadings should be worded clearly so that users can immediately understand what the chapters are about.
It is also important that your chapters are well organized and listed in an order that makes sense.
If an important fact about your topic needs to be explained for the rest of the article to make sense, then make sure to cover it in a chapter that’s close to the beginning.
Also, make sure that the styling of your subheadings is clear and that they are discernible from regular paragraphs. They should have bigger fonts than the rest of the text and possibly even a different color.
2. Don’t write very long paragraphs
Few things on the web are as unpleasant as text with very long paragraphs.
This type of text is a nightmare for people who are just looking for a quick answer to their question.
In many cases, people will not even try to make sense of these massive blocks of text. They will simply leave immediately and never return to your site.
For this reason, you should try to keep your paragraphs shorter, rather than longer.
3. Use a clear, readable font
Choosing the right font for your text is one of the most important ways to improve readability and scannability.
There are thousands of different fonts available on the web. Some are great for reading, but others are downright terrible.
There are generally two types of web fonts available:
- Serif fonts: A font with small lines called serifs attached to the ends of larger lines in a letter.
- Sans-serif fonts: These are fonts that don’t have these small lines attached.
4. Use an appropriate font size and content width
Nowadays, we must design for a wide range of devices and screen resolutions. So while a fixed font size, defined by pixel, might look great on a large desktop screen, it is probably way too big for mobile. What’s more, people prefer different font sizes depending on their age, eyesight, and personal preferences.
The minimum font size that is comfortable to read is 16px, but please keep in mind that different fonts have different base sizes
It’s also important to make sure that the width of your content is appropriate for your font size.
If your font size is small, your content should be relatively narrow. If you have a big font then your content should be wider.
5. Make your site mobile-friendly
Reading on a smartphone can be a terrible experience on websites that aren’t optimized for mobile.
For this reason, it is absolutely crucial for sites to have a mobile-friendly design.
6. Use lists in your text
If you need to list items in your text, then it is much better for both readability and scannability to use lists.
There are two types of lists:
- Ordered lists: These display a number before each list item.
- Unordered lists: These have a bullet as the symbol before each list item.
If the order of the items matters, use ordered lists. If the order is not important then unordered lists are more appropriate.
7. Use black or dark gray text on a white background
Your text and background need to contrast properly.
It is best for readability to have black or dark gray text on a white background.
At the same time, if parts of your website (like the menu or header) have a solid color, then you should use a font color that contrasts properly.
8. Keep sentences clear and concise
It’s also important to consider the structure of your sentences.
Don’t make your sentences too long. Instead, use commas and periods to break them up into smaller pieces.
Also avoid constantly listing many items in your sentences, since this can be hard to read and make sense of.
Here’s an example:
- Bad: Writers face a ton of options when considering readability, scannability and legibility of their online text.
- Better: Writers have many options to improve the readability of their text.
Also use transition words and phrases to link sentences together, such as “however,” “in fact,” “also,” etc. This improves the flow of the text.
9. Use emphasis sparingly
It is sometimes useful to style parts of your text to increase emphasis.
Examples include bolding, italicizing, underlining or highlighting.
Depending on your writing style, you can use this to emphasize key pieces of text that you don’t want your readers to miss.
However, this should definitely be used sparingly. Too much can look spammy.
10. Use blockquotes when quoting
When you quote another website or person in your text, then you should use the blockquote element.
This generally changes the style of the text inside the blockquote tags, making it clear that it is a quote.
11. Don’t use complicated words when you don’t have to
Using obscure and complicated words may make the writer feel smart, but they aren’t really helpful for readers.
If readers need to stop and decipher what words mean, then that will completely ruin the flow of the text for them.
Make sure to consider your audience and use words and phrases that most people understand.
11. Don’t use complicated words when you don’t have to
Using obscure and complicated words may make the writer feel smart, but they aren’t really helpful for readers.
If readers need to stop and decipher what words mean, then that will completely ruin the flow of the text for them.
Make sure to consider your audience and use words and phrases that most people understand.
12.Use Images to Break up Text
Walls of text can be intimidating and difficult to read. Website visitors love photography that compliments what they’re reading. The photos help give the reader a visual break while keeping them engaged. Plus the visuals help them better understand that content they’re reading.
