Rustam K. Lead Designer

Typography in web design: 10 awesome tips

Communication plays a massive role in web design. It is crucial to create a strong connection between the website and the user and then help them achieve their goals. When we say communication we usually mean text at least when it comes to web design. Typography is an essential part of communication:

Over 95% of all information on the Internet is stored in writing.

Good typography is the key to easily accessible information, whereas with bad typography we have to make an effort to understand the text. As Oliver Reichenstein points out in his article "Web Design is 95% Typography:

Optimizing Typography is about optimizing readability, accessibility, usability, and achieving graphical balance overall.

In other words, by optimizing typography, you also optimize the user interface. In this article, I'd like to share a list of certain rules that can help you achieve maximum readability and clarity in your text.

1. The Less Fonts the Better

If you use more than 3 different fonts, your website loses structure and looks unprofessional. Remember that abusing font size and style can ruin any markup.

In general, keep the number of fonts to a minimum (two is more than enough, often one is quite ok) and stick to using the same ones throughout the website. If you decide to work with more than one font, make sure the font families fit together in terms of letter width. For example the combination of Georgia and Verdana have characteristics in common that allow them to harmonize with each other.

2. Use Standard Fonts

In services with fonts (such as Google Web Fonts or Typekit), you can find many interesting fonts that will add to your design something new and unusual. Plus, they're very easy to use. Take Google for example:

1. You choose any font you like. Let's say Open Sans.

2. Generate a code and insert it into the of your HTML.

3. Done!

But what could go wrong?

The real problem with this method is that users are used to standard fonts and read text in those fonts more quickly.

Usually the best solution is to use system fonts (Arial, Calibri, Trebuchet, etc.). The exception may be the need to stick to some fonts that the client has set himself: for branding, for example, or to create something memorable. Remember that good typography affects the reading of the text, not the visual perception of the font.

3. Limit the Length of the Line

The right number of characters per line is the key to making your text easy to read. Choosing the width of the text, you should be guided not by your design, but on the clarity of the written word. Consider this tip from the Baymard Institute:

"If you want your reader to feel comfortable, each line should contain no more than 60 characters. The right number of characters per line is key to making your text easy to read."

If a line is too short, your eyes have to change focus often, which thwarts the pace of reading. If the line is too long the reader's eyes will have to focus for a long time.

As for mobile devices, stick to a range of 30-40 characters per line.

In web design, you can achieve the required number of characters by reducing the width of text blocks with em or the pixels.

4. Choose Headsets that Read Well at any Size

Users will be accessing your site from different devices, which accordingly have different sizes and resolutions. Most user interfaces use text elements of varying sizes (copy button, field captions, section headers, etc.). You need to choose a headset that looks good and stays readable at all sizes.

Make sure the headset you choose is easy to read on small screens! Try not to use italic fonts like Vivaldi, though they look nice it can sometimes be hard to understand.

5. Use Fonts with Clear Letters

Many typefaces are designed so that it is sometimes easy to confuse similar letters, especially the Latin "I" and "L" . In some, the letters are so close together that the combination of "r" and "n" can be mistaken for the letter "m." So when choosing a font, test it in different contexts. That way you can make sure that because of the typeface, the reader will not have trouble understanding the text.

6. Avoid Captioning

Text written in caps - or in capital letters alone - is suitable for situations where the user is not involved in the reading process (such as in abbreviations or logos). But in other cases, don't torture your readers with capitalized text. As Miles Tinker points out in his famous Legibility of Print, such text is much slower to read than text written in lowercase.

7. Don’t Minimize Line Spacing

By increasing the line spacing you increase the vertical space between lines, thereby improving the readability of the text on the screen. As a rule of thumb, the spacing should be about 30% more than the height of the character to make the text readable.

Correctly spaced paragraphs increase reading comprehension. Designer's skill in working with white space allows users to assimilate the text in its entirety without missing any details.

8. Make Sure You’re Okay with Color Contrast

Don't use the same or similar colors for text and backgrounds. The better the text is visible, the faster users will be able to read it and catch the main points. The World Wide Web Consortium advises using the following ratio for main text to image text:

Small text should have a contrast ratio of at least 4.5:1 in relation to the background.

Larger texts (size 14 bold/from size 18 and up in standard font) should have a contrast ratio of at least 3:1 with respect to the background.

Once you've picked your color scheme, you need to give your text to real users to read, preferably on several different devices. If the test reveals any difficulty in recognizing the text, you can be sure that many users may encounter the same problem in the future.

9. Try not to Use Red or Green in the Text

Colorblindness is a fairly common phenomenon, especially among men (8% of the male population are colorblind). Therefore, in addition to color, it is advisable to use some other signs to highlight important information. Also, try not to resort to red and green, as these are the colors most often not recognized by colorblind people.

10. Try not to Use Flickering Text

Information that flashes or flickers can make susceptible users feel sick. In addition to causing discomfort, it can also be annoying for many readers because it will distract them from their reading.

Conclusion

Typography is a very important thing. By making the right choice, you give your website clarity. At the same time, the wrong choice can lead to an inattentive reading of the text, because it distracts all attention to itself. Typography should be readable, clear and understandable.