Every website communicates information to users through text. Headlines grab our attention while cluing us into what the following paragraph is about. Supporting text tells us a story about a good or service being offered, and why we can’t live without it. Given the weighty job that text performs on a website, it makes sense to take care in sculpting its appearance. The following is a quick walkthrough of the different tweaks that web designers (and do-it-yourself website updaters) can use to add readability and impact to website text.
Use an Appropriate Line Length
Paperback books, magazines and newspapers all have distinct column sizes for text to live in. On the outside of those columns is negative white space called a margin that gives your eyes a place to rest while reading from line to line. Having an overly wide text column can create fatigue on the reader as there is not ample space to rest. Conversely, having very narrow text columns also makes sentences seem confusing as the reader has to jump from line to line constantly. Determining an optimal line length for text is more of an art form than a science, and usually is a trial and error process. However, keep in mind that in general the larger the typeface (or font), the smaller you want your number of characters per line to be.
Choose the Right Font Family
Different typefaces (fonts) carry meaning, and should be picked with care. While sans-serif fonts are easier to read on screen, they may not be the best choice for your company’s message. Font choice should try to match your already established branding look and feel, along with effectively displaying your headlines, sub headlines, body text and call outs effectively. Learn more about font choice.
Use a Readable Font Size
The standard font size for print is 16 pixels (1em) which seems large when compared to most websites where 12px text seems to be the norm. It is important to embrace your audience and make sure that your website text is easily legible for them. An older audience (age 40+) will require and expect a larger font size than a younger demographic. Do a little research into our visitors to make sure you are accommodating their needs. For general body copy guidelines, 10px is too small for most users to read,while 24px seems more like a headline.
Control Line Height
Line height is the vertical space in between lines of words. Line height is usually referred to as leading, a term from actual printing presses where slabs of lead were inserted in between sentences to set the height. Line height aids in readability by having paragraphs, headlines, and sub headlines grouped together with space.
Use Contrasting Colors
Contrast is key to having text stand out and be easy to read. Traditionally, black text on a white background has been seen as the highest, and thus best level of contrast. However, screens are different from printed paper, as they create light and thus seem much brighter and more contrasted. A newer trend is to use a dark grey color on a white background to lessen the stark contrast. Whatever color palette your work from, it is important to have contrasting colors so that all users can see and read your text, including users with old, low-contrast monitors, or visitors with vision impairments like color-blindness.