Typography On The Web

When it comes to creating a good web design, communication is key. You want your users to be able to understand and navigate your site as quickly as possible. One of the key factors in creating great communication on the web is typography. Typography is the study of text, with the goal of making it as readable as possible. By optimizing your text by using typography, you also optimize the readability, accessibility, and usability of your site.

Keep the Number of Fonts to a Minimum.

Having too many fonts on a site can create a messy and unprofessional feel. A good rule of thumb is to just have two fonts, three max. When you add a bunch of different fonts, they start to compete for attention, ruining the readability of your site. Choose a body font and a header font and use those consistently throughout your site. There is no good reason why your homepage should have a different font from your checkout page. Keeping your font consistent will help the flow and UI of your site.

Example of competing fonts

Example of how too many fonts start to compete for attention.

Line Length 

By controlling the number of characters on a line, you can increase the readability of your website. The layout of your site should not decide on the length of your text, it should be a matter of legibility. By following this simple rule of thumb, you can insure the readability of your site.

You should have around 60 characters per line for a legible experience. Having the right amount of characters can help create a neat, sorted look. This is the rule for desktops, for mobile devices you should limit characters to 30-40 per line.

ideal-font-length

Ideal character length for the web.

 

Use a Typeface that Works at Various Sizes. 

Your users are going to be accessing your site from different screen sizes and resolutions, so it’s important to choose a font that works well at different sizes and weights. It helps to maintain readability. Some fonts look fine at larger sizes but are unreadable at smaller sizes.

Example of fonts at smaller scale

Avoid all Caps 

All Caps are fine when you are using it in a limited context. For example, logos and headings. But if your text is around four or five sentences, don’t capitalize it. It greatly slows down reading compared to lower-case type.

Be aware of the space between lines.

In typography, this is referred to as leading. By increasing the leading, you are adding to the white-space between your lines of text. Using proper leading you can increase comprehension up to 20%. As a rule, leading should be about 30% more than the character height for good readability.

Make Sure to Have Sufficient Color Contrast

Make sure your text color contrasts with your background color. If the colors are too similar, it lowers the users’ ability to scan and read your copy.  The W3C recommends the following contrast ratios for body text and image text:

  • Small text should have a contrast ratio of at least 4.5:1 against its background.
  • Large text (at 14 pt bold/18 pt regular and up) should have a contrast ratio of at least 3:1 against its background.

Once you choose your color, be sure to test it. 

Conclusion

Good typography can help your website feel crisp and polished. Bad typography can make your site confusing and cluttered. By following these rules and making good typography choices you can maximize legibility, understanding, and readability of your website.

Want more graphic design tips? Check out our Graphic Design Tips for Making A Website.

One thought on “Typography On The Web

  1. Pingback:  Visual Hierarchy – zeckoShop Blog

Comments are closed.