I recently got some pointers from an Instagram expert on how to tell stories with pictures. People connect intensely with images and learning how use them is an important communication skill. But I’m a text guy and it got me thinking about how we interact with text on a visual level, apart from what the words say. We get a sense of the story from the way text is styled, its format and color. Text is also affected by the mechanics of our eyes, as well as the devices on which it is displayed.

Readability vs design

Aesthetics are important but aren't the ultimate goal of design. Light gray text on a white background may look nice on the designer’s high resolution monitor in a well lighted studio, but completely disappear on mobile device in bright sunlight. The key to readability is contrast, which can be achieved using a wide variety of colors.

The W3C recommends a minimum contrast ratio of 4.5:1, which takes into account the “loss in contrast that results from moderately low visual acuity, congenital or acquired color deficiencies, or the loss of contrast sensitivity that typically accompanies aging.” In other words, old people’s eyes. Exceptions to this recommendation includes:

• Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
• Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
• Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

Juicy Studio provides this handy Luminosity Colour Contrast Ratio Analyser. Just plug in your background and foreground color values and it spits out the contrast ratio. For reference, pure black on white has a ratio of 21:1.

Fonts tell a story

Fonts have a considerable effect on the mood of a page (or more precisely the mood of the reader). Fonts have been around for hundreds of years, so they are often classified by age. They are further divided into serif and sans-serif families. Serif fonts have the little feet thingys attached to their strokes.

Older font designs convey a more serious or traditional tone. Examples include Goudy Old Style (serif) and News Gothic (sans-serif). More modern fonts are often lighter and can be more “playful”. One clue to a font’s age is the difference between the thinnest and thickest parts of a letter (known as the font’s modulation). This difference tended to increase over time.

Fonts are often combined, using a serif font for headlines and a sans-serif font for body text, or vice versa. When combining fonts, it’s usually best to use fonts from a similar time period and limit the number of fonts to two. A large library of free web fonts is available from Google Fonts.

Formatting

Formatting includes the alignment of text and variations such as bold and italics. The trick with formatting is using it to convey meaning consistently across the entire site. For example, using bold to emphasize words or phrases and italics to denote words being defined. Each site will have different requirements. I always recommend against using underlines on websites for anything except to indicate a link. Clicking on underlined words has become an ingrained behavior and your visitors will expect them to be links.

Body text is most easily read when it’s aligned (aka justified) to the left margin only. Trying to justify both left and right margins will cause uneven spacing between words, making the text less legible. Other types of formatting can work well for special cases like pull quotes or forms, just make sure to use them consistently throughout the site.

Make design decisions early

You will want to consult with your website designer about all of these design decisions before building out an entire site. One or two pages containing sample content should be used to judge whether the site is communicating effectively to its intended audience. Remember that you are designing for them, not yourself. Informal feedback from members of this audience can further inform your textual design choices.

Until next week.