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:
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-size property:
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:
2 | 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.
[/xml]
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
body to 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:
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:
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:
1 | body { text-align: left; } |
2 | div#content p { text-align: justify; } |
3 | 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 colors 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:
3 | 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.
3 | background-color: #333; |
Closing
That’s it. Applying these principles should provide your text with
the elementary typographic goodness, as well as better legibility and
readability.
No comments: