Increasing Your Website’s Readability: Typography

You’ve been to websites before where reading the content was nearly impossible. The last thing you want is for someone to come to your site and get eye strain while looking at your welcome message. You want your site to be readable and legible. Readability is the way words and blocks of type are arranged on a page. Legibility is how the typeface is designed. Readability is what we want to focus on at the moment. Online content isn’t like writing an essay. You don’t need hanging indents and 1.5-inch spacing, but you do need to pay attention to how people read your content. You want the content on your site to be easy to read and visually appealing. You do this by emphasizing your key points and breaking up paragraphs into something that can easily be read on a mobile device.

Which of these is easier to read?

Example 1: Two paragraphs of content.

When setting up your site for readability, it’s important to pay attention to spacing, line height, size, line length, letter spacing, contrast, hierarchy, and consistency. Spacing and line height consists of the spacing within a paragraph, around a block of text, and the vertical distance between lines of text. The size of typography refers to font size. You want no more than three font sizes per article. Keep in mind that your headlines will almost always be much larger than the rest of your content.

Line length refers to how long a line is, and whether or not you have gaps at the end of the text (justified text is where it is a block of text that has adjusted spacing in the sentence so that the ends line up). One problem people face is not limiting the line length in your page development. Monitors come in different sizes and there’s nothing worse than going to a web page that has lines of text stretched out across the entire screen. This, alone, could lead to dangerous levels of eye strain. Letter spacing consists of distances between words or blocks of text. You want high contrast between the letters and the background color of the site. White with black text is universal, but there are other options. Hierarchy is a vastly underrated necessity in your web content. See the next example to understand why.

Example 2: Using all of the examples listed above.

6 Aspects of Readability

Spacing and Line Height

  • Spacing within a paragraph
  • Spacing around a block of text
  • Vertical distance between lines of text

Size

  • Refers to the font size.
  • Limit your fonts to no more than three sizes
  • Your headline will already count as one, so keep in-text sizes to two sizes max.

Line Length

  • Refers to the length of one line of text
  • If you use “Justified” format, this will ensure that the letter spacing expands to keep the ends lined up.
  • Make sure your site is formatted to limit the page size
  • Longer line length leads to eye strain
  • Too short and it’s obnoxious to read

Letter Spacing

  • Distance between words or blocks of text
  • Keep it consistent

Contrast

  • High contrast is preferred
  • Try to stick with neutral colors
  • Read your content on a smartphone to check readability

Hierarchy

  • Organizational technique that makes content easier to read
  • Uses Bold, Underline, Italic, and spacing to make it easy to skim

Of the two examples, which one was easier to read? Were you able to digest the content easier in the second example? If you want to know more about the different types of formatting options, check out these definitions at Vanseo Design.

Your website is the way your potential clients and customers connect with you. Making your content readable is key to your success.

We keep your website running efficiently, so you don’t have to. If you need help with building a custom, optimized website, visit our other site: https://qsoftdesigns.com. We offer flexible hosting service packages starting at $10.00 per month. With several packages to choose from that will accommodate your specific business needs. Find out more about us our web hosting at https://denversbestwebhosting.com/. We specialize in helping the little guy, small businesses, with their online presence.

Tagged with: , , , , ,
Posted in Website Design