Selecting the appropriate typefaces and setting comfortable reading text are, without a doubt, important tasks for designers, but paying attention to the typographic details sets the quality of one professional’s work above others. In this chapter we will cover these typographic nuances.

Hyphens and Dashes

Hyphens, en dashes, and em dashes all serve different purposes.

A hyphen (-) is the shortest of the three and is used to make any compound adjectives clear: e.g., down-to-earth type. The double hyphen (--), which doesn’t exist in punctuation, is often misused as an em dash (—).

The en dash (–) is longer than the hyphen but shorter than the em dash. The en dash is often used between numbers to indicate a range: e.g., 2000–2015.

The em dash (—) is the longest of the three and is used to interrupt a sentence, or in place of commas and parentheses. American style uses no spaces—like this—around em dashes, but British style does use spaces.

Quotes

Double and single quotation marks work as a pair: “like this.” Notice the opening double quote looks like 66 (“) and the closing double quote likes like 99 (”). Likewise, single quotation marks are treated the same: ‘like this.’ Oftentimes, double and single quotation marks are confused with the straight quotes (available on most standard keyboards) or the prime symbols (to denote feet and inches like I am 5′4″ tall). Notice below, the straight quotes or prime symbols are different from the curly quotes.

Apostrophes

In cases where an apostrophe comes before a word or number, make sure to set the correct apostrophe (’) rather than the single quotation mark (‘).

Hanging Bullets

Bulleted lists are unhung by default in all browsers. Unhung bullets disrupt the flow of running text. For an uninterrupted reading experience, bulleted lists should be hung to the left so that they can still serve as typographic gestures without disturbing the alignment. Here’s the CSS for setting hanging bullet lists:

	
ul { margin: 0; padding: 0;}
li li {margin-left: 1em;}
	

The first CSS rule sets the margin and padding of an unordered list (ul) to 0. As a result, any sub list will also be set to zero. The second rule pushes the child selector 1em to the right to make the distinction between the parent and the child in a nested list. On small screens, at least 2em of left padding is needed on the body copy’s container to make sure the bullets aren’t obscured.

Kerning

Kerning is the process of adjusting the space between particular pairs of letters to correct strange gaps. Compare and contrast the spaces in the pairs of letters below to see how kerning can improve legibility.

Letterspacing

Unlike kerning, letterspacing, or tracking, is the process of adjusting the space between all letters. Spacing can make or break a beautiful group of letters. Well-spaced letters, which create a consistent value of grey, help with readability by establishing a sense of rhythm. The flow of text depends on the right tempo between letter and word spacing. Tight letterspacing combined with loose word spacing results in a jerky rhythm and uneven flow. Conversely, loose letterspacing combined with tight word spacing makes the text unreadable—readers will have a difficult time distinguishing the beginning and the ending of a word.

Extra letterspacing is often used in headings and all caps. Letter-spacing lower case, which reduces legibility, should not be used at all.

Small Caps

Real small caps have their own characteristics: height, stroke weight, letterfit, and proportions. Small caps are designed to work well with lowercase text. They are slightly taller than lowercase letters but shorter than uppercase letters. To use true small caps on the web, you will need to add an additional subset of fonts, which increases the file size. Do not scale down full caps, however, to save on performance. They will look odd and fake next to lowercase text.

If the typeface you chose has small caps, here is the CSS you need to turn them on:

	
.smallcaps {font-variant-caps: small-caps;}
	

Ligatures

Ligatures were designed to prevent two or more letters from crashing into each other. The most common case is the fi collision. With ligatures turned on, the terminal of the f will reach into the i and the dot of the i will be eliminated. Study the two illustrations below to see the difference:

Ampersand

The ampersand is a mark that represents and or et in Latin. Because the ampersand is often used as a decorative element, the more flourished its design the better. Choosing a custom ampersand is a fun typographic activity. Finding an italic font with a gorgeous ampersand is like discovering a rare gem.