Continuing straight on from my previous post, this article will examine legibility and readability more closely by exploring the elementary typographic factors that affect them.
Typography gained its prominence in the print world. As such, the basics of good legibility and readability are well understood, but on a digital medium, we need to take a few additional considerations into account.
Typeface
As previously outlined, typefaces have a significant impact on the text they set. Selecting a good and applicable typeface that honors the copy, and caters for its requirements (e.g. if you know you’ll be setting mathematical symbols, ensure the typeface has glyphs for them) is paramount.
Chances are, you’re setting larger blocks of text. You’ll want to pick a good text font — one that’s designed for setting lengthier blocks of text. The best way to test a typeface as a text face is to set a paragraph of Lorem Ipsum in the basic Roman, at size 12px to 14px with a leading of 1 to 1.5 (see § Leading below), and see how it reads. Text faces can be either serif (e.g. Georgia) or sanserif (e.g. Arial).
Typefaces are declared in CSS with the font-family property and take descriptive values — either a generic family or specific font family. For example, here’s a transitional serif font stack:
p { font-family: Baskerville, Times 'Times New Roman' serif; }Sizing
When setting type, select a comfortable size: 14 pixels and up is a good rule of thumb for most screen text fonts. Not many of us have 20 – 20 vision, so better to display your text a tad large than too small.
Note: JavaScript-powered text sizing widgets ≠ accessibility.
Don’t size text arbitrarily; try to stick to a scale:
The “classical scale”.
Another scale.
A scale based on the Fibonacci sequence.
Type is best sized relatively, using ems. An em is the distance that’s horizontally equivalent to the type size in points (e.g. 1em of 12pt type is 12pt; 1em of 16pt type is 16pt). We set font size in CSS using the font-sizeproperty:
p { font-size: 1.2em; }Remember that font sizes are inherited within the DOM by children from their parent elements. This can make em sizing calculations for nested elements difficult. A good idea is to size everything in pixels first, and then convert the measurements over to ems. Pixels are easy to work with, but fall short as a fixed unit — particularly when you’re scaling a website (see § Measure below).
To calculate the desired value in ems, find the value of 1 pixel in ems, then multiply by the desired font size (in pixels):
1 ÷ parent font-size × desired pixel value = em value
For example, if the parent font size (as defined by, say, the body element) is 16 pixels, but we’d like to size a paragraph — which is a child of the body element — at 12 pixels, we calculate: 1 ÷ 16 × 12, which gives us 0.75em.
The 62.5% trick
There is a neat trick to simplifying these calculations. Consider the following CSS:
p { font-size: 80%; } blockquote { font-size: 80%; }That styles this markup:
This is a short paragraph, followed by a quote:
Block quotes are blocks of quoted material, and can hold a range of things, including paragraphs, lists, and even headings of course.
80% of 16px is 12.8px, so p and blockquote elements will be that size, but what happens when we put a p element inside a blockquote element? The parent (blockquote) is 12.8px so the p will be rendered at 80% of that: 10.42px.
Guh! This has the potential to be quite confusing. Richard Rutter developed a neat trick to simplify the sizing calculations of nested elements. Consider:
- Browsers have a common default size of 16px for text.
- Set the
bodyto a font-size of 62.5%, resetting everything to 10px.
From this point, the calculations are similar for _direct descendants_ of the body, for example, 12px = 1.2em; 8px = 0.8em; and so forth. Deeper nested elements are (still) relative, of course.
Measure
The measure is the line length. It’s important to keep lines at a comfortable length: not too long, and not too short.
The eye has difficulty going to the next line when measures are too long. A grand and almost infamous example of a website that could do better in this regard is Wikipedia, where the measure is relative to the length of the browser window; expand the window to full-screen on a widescreen monitor and notice how suddenly, where there was a comfortable 40 characters per line, you’ll have measures of 100 characters or more.
Conversely, ensure lines aren’t so short that the eye has to drop a line every few words. There are some publication styles where short measures are popular — for example, periodicals — but copy that’s set so short elsewhere begins to look cheap, as if, once read, it could be thrown away just like a newspaper.
Measures are set in CSS with the width property. Ideally, set the design or total page width in ems, and columns in percentages, such that columns, the grid, and the entire page design scale proportionately. For example:
body { font-size: 62.5%; width: 96em; margin: 0 auto 0 auto; } div#content { width: 75%; float: left; } div#sidebar { width: 25%; float: right; }In this example we’ve used the 62.5% trick to reset the base font size to 10 pixels in the body and defined a total design width of 960 pixels which is centered. Meanwhile, we’ve defined two div elements: one as a sidebar with a width of 240 pixels (25% of 960 = 240 pixels) and the other as a content container with width of 720 pixels (75% of 960 = 720 pixels). This design scales perfectly, even when only text-only zoom is available.
Leading
It’s important to provide ample space between lines so that the eye can read along and travel between lines with comfort and ease. A good rule is to give copy with short measures less leading, and longer measures more leading.
Leading is controlled in CSS using the line-height property. You can use it to set unit-less number values (e.g. 1.5), whereby it acts as a multiplier of the font size:
p { line-height: 1.5; }This means the leading will be one and a half times the size of the font-size. Unit-less values are easier to keep track of, and to work with when setting leading for descendent elements. They also scale nicely.
Alignment
Alignment refers to the placement and arrangement of text. When setting blocks of copy, align text to the left margin or “gutter”, and don’t be afraid of having a ragged edge (i.e. “left-aligned”, “flush-left”, or “ragged-right”). Justification is great if there is a sufficient measure to cater for the adjustment of the word-spacing and, ideally, if automatic hyphenation is accessible. Avoid justification in narrow columns of text.
Alignment is controlled in CSS using the text-align property, and takes descriptive values, for example:
body { text-align: left; } div#content p { text-align: justify; } div#content p.verse { text-align: center; }The culmination (contrast)
Legible and readable text has a high contrast with its surroundings without becoming an eye-sore. Good contrast is achieved by setting text with the above factors in mind, and by considering the color of the type and the background it’s placed on. A good guiding principle is dark text on a light background, or visa versa. Avoid clashing colous or a barely visible grey on a white background.
In CSS, the text color is controlled by the color property, while the background is controlled by the background-color property and takes numerical and descriptive values. Here’s an example:
div#content p { color: #111; background-color: white; }Pay attention to contrasts when working with light text on a dark background. Dark text on a light background generally has a higher contrast than light text on a dark background. Thus, when light text rests on a dark background check its contrast — increase leading and decrease font-weight as applicable.
div#footer p { color: white; background-color: #333; line-height: 1.8; font-weight: lighter; }Closing
That’s it. Applying these principles should provide your text with the elementary typographic goodness, as well as better legibility and readability.
