logo
17
Aug

Your Laptop Is Not A Book or: why you should care about web typography

Let’s face it: most reading these days is done on a screen. Sure, you might crack open a book while you’re lying in bed at night, but the rest of your reading time is monopolized by digital displays.

The unfortunate truth, however, is that most type on the web is a pain to read. There are a number of reasons for this, but the primary one is that the text is simply too small.

In the early days of the Internet, designers didn’t give much thought to the difference between reading on a computer and reading on a printed page. So, they applied the basic principles of print typography to web typography. The result? The default font size of those early websites was set at 12pt.

The inherent problem with this approach is that reading on a computer is an entirely different exercise than reading a book.

Answer me this: When you read a book, where do you hold it? If you’re like most people, it’s probably about 12 inches from your face. But how often are your eyes that close to your computer screen? Hopefully, not very often. So, why should the text on your screen be the same size as that of a book?

The farther away you hold the text, the smaller it becomes visually. You need to make the text size bigger the farther away the text is read, to compensate for a larger reading distance. Source: Information Architects.

The farther away you hold the text, the smaller it becomes visually. You need to make the text size bigger the farther away the text is read, to compensate for a larger reading distance. Source: Information Architects.

When we think about web typography, we should consider not just what the user will be reading, but how they will be reading it. How far away is the user’s screen? How long is the piece of copy we’re asking them to read? How wide is the container that holds the copy?

All of these factors impact how we should design our web typography. An easy fix is to bump up all paragraph text from 12pt to 16pt, like so:

16-pixel text displayed on a 24-inch screen, next to 12-point text printed on paper. Source: Smashing Magazine.

16-pixel text displayed on a 24-inch screen, next to 12-point text printed on paper. Source: Smashing Magazine.

If we want to get more technical (and we do, because it’s our job), we’ll look specifically at the length of each line and aim to follow this rule:

“Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal.”

The result of implementing this best practice is a good reading experience across all devices (desktop, laptop, tablet, and mobile).

Will your users notice? Probably not. But, that’s exactly what we want. As usability expert Jared Spool said:

“Good design, when it’s done well, becomes invisible. It’s only when it’s done poorly that we notice it.”

At the Kestrel Co, we strive to make every website feel effortless and unobtrusive. Designing web typography that ensures users won’t have to zoom in or strain their eyes is one small part of that experience, but it’s a crucial one.

P.S. If you find yourself annoyed by small web typography after reading this post, try using a tool like Pocket to save articles and read them later in a cleaner format, or a browser extension like Evernote Clearly to improve font sizing in one click without leaving the page.