Achieving good legibility and readability on the Web
Published • 22 Mar 2011My last piece on web typography provided an exhaustive look at getting type to the Web, covering the ins and outs of the @font-face technology. Now that we can get the fonts we want rendered on the Web, let’s examine legibility and readability more closely by covering the elementary typographic factors that affect them.
At first, typography can seem like an inherently dull field — dealing with fonts and sizes, bolding this, and italicising that could come across as rather arbitrary, or as difficult: where does one start?
Definition and purpose
Definitions avoid confusion, and purpose gives us a light at the end of the tunnel. Quite simply, typography is the art of creating and setting type with the purpose of honoring the text it sets.
You will have already made a “typographic” decision by selecting an adequate typeface (digitally, a font) for whatever project you have in mind. The next step is dealing with the headings, subheadings, paragraphs, lists, tables, excerpts, quotes, and their many siblings (the micro) by making choices about how they are organised on the page (the macro: grids, columns, and margins). Then we can highlight how they relate to each other (§ Highlight relationships and provide navigation).
Typography exists everywhere where there is set type (i.e. movable type): it pertains to financial reports, the local newspaper, cereal cartons, the novels on our bedside tables, religious scriptures, and by extension, “movable type” on the web.
Each of us probably has a good grasp of what we think constitutes good typography. Looking at the local newspaper, or cereal carton, or the books on the bookshelf, you’ll probably be able to list a range of properties that make it “good”.
The merits of our typographic choices are immediately apparent, and two of the most important are a text’s legibility and its readability.
Legibility
Legibility refers to the recognizability of individual glyphs (the individual markings that signify the semantic character(s)). A range of factors influence a glyph’s legibility: stroke, width, angle (of the stroke), style (e.g. roman, full-capitals), slant (of the whole style), color (actual color and typographic color, i.e. contrast of the letterform to its background), background color, and more.
Readability
Legibility is distinct from readability. Readability refers to the recognizability of whole words, sentences, paragraphs, tables, or whatever the text en masse constitutes. A range of macro factors affect readability: the measure (line length), the leading (line height or spacing), justification or alignment, the style of the typeface, the kerning and tracking, the size of the type, and more.
Of course, both are interrelated; changes to the point size will impact the legibility of both the individual glyphs, and the words they compose.
Highlight relationships and provide navigation
Just like WCAG’s (WCAG 2.0, § 2.4) accessibility guidelines on ensuring that hyperlinks can be understood out of context, typographic hierarchy gives the text a certain “skimmability”. Good typographic hierarchy allows the text as a whole to be navigated with ease, such that readers can find their places again, or skip superfluous introductory information and get straight to what they are browsing for.
A good typographic hierarchy will provide visual cues to readers: headings are sized and styled in a way that makes them immediately identifiable as headings; paragraphs are uniform in styling, and their beginnings and ends are well marked out; quotations are recognizable, separate from the paragraphs they are enclosed by, and so forth.
Such hierarchies will also highlight inherent relationships between elements on the page: labels are placed in proximity to graphs, charts, and graphics, and through their proximity, are identifiable as descriptive notations.
In another example, imagine a more complex, two-color design. A table holding quarterly profit figures could feature a light-blue background, whereas the nearby table of detailing the quarterly loss could have a soft red background, and the aggregate of the two, superimposed on top of one another in a line graph, would have the profit line in a strong blue, and the line depicting losses in a hard red. Graph notations should provide a legend, but color can also be used to signify the relationships.
Colour, font style, spacing, position, indentation, and a range of other stylistic variations can be used to signify a relationship between elements on the page or across pages — and over the entire website as a whole.
Earned or unearned qualities
As noted earlier, we consciously (and subconsciously) judge the typography of texts. Look back to the newspaper, or pull out a book from the bookshelf, and describe what the text looks like. The newspaper might be bold and almost cheap looking, whereas a book on social psychology might be clean and organised, complete with footnotes and easily looked-up references.
Typography imbues set text with qualities, or a certain interest. A text can appear inviting, graceful, serene, cartoony, dodgy, unbalanced, and/or boring, and importantly these qualities can be both earned and unearned. A good typographer will humbly honor the text they are setting, in honor of the meaning of that text. Bad typography or a lack of care can discourage readers with a sense of boredom, inaccessibility, or cheapness.
Inducing a state of interest
Finally, good typography can induce interest among potential readers. Simply, grace the text with the respect it deserves; if the text is good, and intended to be read and understood, give it the typographic respect it is entitled to. In doing so you will induce a state of interest in browsing readers.
Achieving good legibility & readability
Let’s now focus on achieving the first two core goals of good typography: legibility and readability. The basics of these are well understood given that typography is well over 400 years old in the world of print, but in a digital medium there are a few additional considerations to be made.
Typeface
As previously outlined typefaces have a significant impact on the virtue of 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 will want to pick a good text font: faces that are 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 both serif (e.g. Georgia) or sanserif (e.g. Arial).
Lorem Ipsum is a useful placeholder text when testing stylistic attributes. For testing actual readability it was pointed out to me that one should select a text that has meaning and is intended to be read. Stuck for something to use? Grab an article from Wikipedia or from Project Gutenberg. Thanks to David Owens for this suggestion.
Typefaces are declared in CSS with the font-family property and take descriptive values, either a generic family or specific font family, for example, 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 for most screen text fonts is a good rule of thumb. Not many of us have 20-20 vision and better a tad large than too small.
Note: JavaScript-powered text sizing widgets ≠ accessibility.
Don’t size text arbitrarily; try to stick to a scale:
6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72.
The “classical scale”.
9, 10, 11, 12, 13, 14, 18, 24, 36, 48, 64, 72.
Another scale.
8, 13, 21, 34, 55, 89.
A scale based on the Fibonacci sequence.
Type is best sized relatively using ems. An em is the distance horizontally equivalent to the type size in points (e.g. 1em of 12pt type is 12pt; 1em of 16pt type is 16pt). We can do this in the CSS using the font-size property:
p { font-size: 1.2em; }Remember that font sizes are inherited within DOM from parents → children. This can make em sizing calculations for nested elements difficult. A good idea is to size everything in pixels first, and then convert over to ems. Pixels are easy to work with but fall short as a fixed unit, particularly when scaling a website (see § Measure below).
To calculate the desired value in ems, find what 1 pixel is in ems and 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%; }which styles this markup:
<p>This is a short paragraph, followed by a quote:</p>
<blockquote>
<p>block quotes are blocks of quoted material, and can hold a range of
things, including paragraphs, lists, and even headings of course.</p>
</blockquote>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! Potentially quite confusing. Richard Rutter developed a neat trick to simplifying the sizing calculations of nested elements. Consider:
* browsers have a common default size of 16px for text;
* set the body to a font-size of 62.5%, resetting everything to 10px.
From here now 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; not too short.
The eye finds difficulty in going to the next line on measures that a 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 and notice how suddenly where there was a comfortable 40 characters per line expand to 100 or more.
Conversely ensure lines aren’t too short that the eye has to drop lines 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, the entire page design all 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 for the eye to 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, and can 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 too keep track of and work with when setting leading for descendent elements, and scale nicely.
Alignment
Alignment is 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, with the addition of the color of the type to the background it is placed on. A good guiding principle is dark on light or visa versa. Avoid clashing colours 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. For 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
Robert Bringhurst once articulated: ‘well-chosen words deserve well-chosen letters’. Good web typography should seek to invite readers by revealing the tenor and meaning the text, and highlight relationships through a uniform hierarchy for ease of navigation.
In other words, web experiences that feature good typography are easier and more pleasurable to read and use. Applying these principles should provide your text with the first step towards this goal: elementary typographic goodness through better legibility and readability.
This article is a consolidation of two articles originally written by me for, and published on DesignFestival.com (Setting Type On the Web: An Introduction and Achieving Good Legibility and Readability on the Web). They have been been republished here with permission.