How Text Alignment Affects Online Readability

Improper use of text alignment is one of the most common and overlooked mistakes of web design. Yet the impact that it has on online readability simply cannot be overlooked. Surprisingly, very few people talk about it or understand its significance.

From the birth of the Internet, people have been taking the rules of text alignment for print and applying them to the screen. But onscreen reading is up to 25% slower and causes more eye strain than reading something in print. Therefore, the text alignment guidelines that work beautifully for print almost always cause readability issues when used online.

How People View / Scan / Read Web Pages

In order to understand why a certain alignment works and others don’t, we first need to understand how people view web pages, scan web pages and read web pages.

Eyetracking studies have shown us that when someone arrives at a web site, their eye is immediately drawn to the upper left hand corner of the web page. From there, the eye moves down the left side of the page, occasionally moving horizontally towards the right. This particularly occurs towards the top of the page and less so while moving further down a page. The result is an “F” shaped eye movement pattern.

This is really no surprise, is it? From the time we sat on Mom or Dad’s lap with our first book, we have been programmed to start reading in the upper left corner of the left page. We read from left to right. This learned behavior carries over from print reading to screen reading.

The primary difference between the two is that people tend to scan web pages and only read what they’ve determined to be of importance to them, rather than reading straight from beginning to end as they do with a book.

Why Left Alignment Rules Online

When text is aligned to the left on a web page, the eye can easily and comfortably follow the straight edge as it moves down the left side of the page or column. Therefore, it is the alignment that is preferred for both scanning and reading online.

Most likely, you are sitting there with a smug look on your face and patting yourself on the back for being smart enough to use left alignment. But are you really? What about headings and subheadings? Are you left-aligning those as well, or have you fallen into the trap of centering them so they “stand out?”

In addition, what alignment are you using for navigation links, ads and testimonials? Most people find themselves using center alignment for these things. Why? The reason is three-fold:

1. It feels comfortable.
2. It’s a way to make these elements “stand out,” or to draw attention to them.
3. It’s what everyone else is doing.

Yes, center alignment does feel comfortable. And quite frankly, it will be more than a mite uncomfortable to break away from using it. But it interrupts the flow of people who are scanning when their eye has to jump to a section in the middle of the page. As a matter of fact, your readers may be intentionally skipping over those center-aligned headings and subheadings that we all know are such an integral part of web site copy. GASP!

Here’s a suggestion. Instead of using center alignment to make your heading, subheadings, etc. stand out, align them to the left and use a larger and bolder font size for them. Using a different color is also a consideration, but use caution. Colored text can also cause readability issues.

Sure, everyone else is center aligning like crazy. That means a lot of web sites are difficult to read and causing unnecessary eyestrain on their poor visitors. But by left aligning your text, you’ll keep your web site visitors blissfully reading and sticking around, which is exactly where you want them.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.