The Web Is Not Print

That simple principle is one that web designers have learned only of late, and somewhat begrudgingly. Granted, both are text-based mediums and serve similar roles in dispensing information. Yet there are fundamental differences in these communication mediums (at least for now) that demand a different approach in how design and page layout is handled.

legibility computers

When the Internet first became a 'thing,' web designers wanted to mimic the classic page proportions and font sizes seen in print design. It felt right to do things that way. So we created web pages that used body copy scaled to mimic the look of the printed page. If a paragraph of printed text used 12 point Times Roman, for example, we used the same 12 point type (or as close as it could be approximated) online. This created a problem, however.

legible text? Not in Mobile devices!

The Challenge of Online Text Legibility

Computer monitors used by most consumers do not have the resolution to match a page of printed text. Electronic text tends to smear and blur at smaller sizes, making it more difficult to read. The eye tires more quickly when trying to focus on electronically generated type on a backlit computer screen. These problems may be exacerbated by the reality of vision issues that increase with age for all of us.

The image above shows a page from my web design portfolio prior to a Mobile friendly design upgrade. I consider it one of my best content page designs ever. Elegant, clean and uncluttered despite having lots of copy. However, it is impractical for Mobile devices. The fonts are too small to be read comfortably, So, sigh... I had to create a more practical solution.

The Solution

There is a solution that designers have begun to accept, and it's a simple one. Use larger fonts sizes. A page of printed copy may look fine in 12 point type. The online equivalent of that content may need to be enlarged to 14-18 point type (or the equivalent in pixel height) to remain legible. Now, we could argue the benefits of sans-serif vs serif typefaces, but the fundamental problem of online legibility is best resolved by enlarging the default font size in a paragraph of online text. The requirements for online readability demand larger type sizes. If your text can be easily and comfortably read, it encourages readers to linger and return.

legibility web design

This solution is one that is especially useful in the age of Mobile Friendly web design. When creating responsive websites to meet the needs of mobile users, increasing the default type size enhances legibility across all devices.

Accepting this solution has been anathema for some web designers. It doesn't look right to the classically trained designer whose aesthetics are shaped by print design. Well, truth be told, it is not as elegant or refined as print design. It may even look a bit clunky in comparison to a printed page. Stop comparing. It works. It is a real world solution that makes the website usable for the largest possible audience. That's why we do it. -Web Design Portfolio | Don Peterson

How To Create Legible Text in Web De…