Improve UX by fixing these common typographic issues

We spend a lot of time on our screens. Because of that, making text as readable as possible is extremely important for optimal user experience. This article gives easy-to-implement fixes for five common typographic problems seen on many websites:

• Line lengths too long
• Not enough line spacing
• Font sizes too small
• Text doesn’t provide enough contrast
• Content too dense

Line lengths that are too long

When line lengths are too long, readers will find reading tedious because the long lines make it hard for their eyes to effortlessly leave the end of one line and find the beginning of the next. Any stumbling block to ease of reading is a recipe for users abandoning a web page. 

Line length is determined by the width of the column containing the text. Responsive websites don’t have a single width for a column of text. Rather, the width varies with the size of the browser window. Because of that, when I talk about long line lengths, I mean the maximum width of a column of text viewed in a desktop browser. (Mobile views—at least in portrait orientation—rarely suffer from this long line length problem.) So to control the line length, a maximum column width constraint should be set so that no matter how wide the browser gets, a column of text can’t get any wider.

How wide should that constraint be? Back in the day I learned a rule of thumb for print design that can be applied to website typography:

A comfortable line length for reading is about 2-1/2 lower-case alphabets:
abcdefghijklmnopqrstuvwxyz|abcdefghijklmnopqrstuvwxyz|abcdefghijklm

Like most rules-of-thumb it’s a guide, note an absolute, but it’s a good starting point. Some sources say 50-75 characters is a good guideline for optimal line length. On a responsive web page, once a column gets as wide as about 75 characters, it should be constrained and not allowed to go any wider, no matter how wide the browser window or other page elements become.

Look at this egregious example on a website that should know better. (Click images to view larger.)

Determining the maximum optimal line length can’t be done without also considering line spacing at the same time.

Not enough line spacing

Line length and line space work together to create comfortable eye flow. Line spacing is the vertical distance between lines of text—what used to be called “leading” in typesetting lexicon (because back when type was set in hot lead using a linotype machine, thin slugs of lead were placed between the rows of type to space the lines vertically).

An astute reader may notice that my own website violates the 75-character maximum line length rule-of-thumb (in desktop browsers). The columns of text on this site are constrained to about 85 characters. The reason that’s ok is that extra line spacing has been added.

Many websites can benefit from adding line spacing. There are two key factors that affect how much to add:

• Longer line lengths (as in the AARP example above) need more line space.
• Fonts with larger “x-heights” require more line space.

The x-height of a font is the height of lower-case letters relative to the total height from the bottom of the descenders to the top of the ascenders.

When you look at four lines of the Questrial font (lower left above) place side-by-side with four lines of the Josefin Slab font (lower right above), you see that fonts with smaller x-heights have more visual white space between the lines. Thus, they require less added line space than large x-height fonts.

Font sizes that are too small

Usability and readability—especially for older audiences—can be negatively impacted if the text is too small. As NNG points out, most web designers are young with good eyesight and don’t think about readability for those on the “other side of 40.” Plus, designers tend to have large, high-quality screens and they don’t view their designs on the lower quality, smaller screens that many users do.

W3C accessibility guidelines say that users should have the ability to resize the text on web pages. They say that this is primarily the responsibility of the user agent (the web browser). All modern web browsers allow for this. But do all users know how to easily increase the font size in their browsers? Perhaps a better question is, why should they have to?

W3C does not provide an absolute font size guideline, but 16px is a good starting point. It’s not the same in all cases because, as with line length and line spacing, it depends on the typeface. A 16px font in one typeface may look larger that a 20px font in another typeface. (See the Questrial vs. Josefin Slab example above.) There’s a simple way to avoid the problem of font sizes being too small: ask older people with poor eyesight to review designs when they are in development or ask them to give feedback on published sites.

Text that doesn’t provide enough contrast

Another W3C usability requirement is to make sure text has enough contrast to be easily ready by people with “moderately low vision.” The W3C guidelines give a lot of specific detail, but you can easily check your text contrast with this WebAIM Contrast Checker or this Experte accessibility checker. There are a few examples below. If you have good eyesight, you may have no trouble reading the text that fails to meet the WCAG AA and AAA contrast guidelines. Keep that in mind and remind yourself that you are not the user.

Text content that’s too dense

When I say text that’s too dense, I mean web pages packed with long paragraphs of text that are not broken up into a form that’s more visually “bite size.” Generally speaking, website visitors don’t read, they scan. There are exceptions—such as when someone intentionally chooses to read an in-depth article—but most of the time people just scan web pages. When you conduct testing sessions or simply observe people looking at web pages, you’ll see that they quickly scroll up and down the page, glance here and there, and click buttons or links before reading surrounding text. Research has proven that improvement in the scanability of text greatly improves engagement and user experience.

There are very simple solutions to this:

• Break up long text with subheads
• Use bullet lists as often as possible
• Use illustrations (a picture is worth a thousand words)
• Simply reduce the total amount of text

That fourth point can sometimes work against packing pages with keywords for SEO, but nonetheless it definitely makes for a better user experience. It improves the likelihood that your content will be read, which after all is the point of putting text on the page.

That last point also allows me to close this post with one of my all-time favorite UX quotations. In his must-read book, Don’t Make Me Think: A Common Sense Approach to Web Usability, Steve Krug says, “Get rid of half the words on each page, then get rid of half of what’s left.”

(If you think I violated Steve’s rule with this post, please comment below and tell me where I should cut!)

---

---