Seeing Typographic Details

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.

Dash Mac Windows HTML
en Opt + - Alt + 0150 &ndash
em Opt + Shift + - Alt + 0151 &mdash

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.

“That’s a ‘cool’ trick.” "That's a 'cool' trick."
Quotes set correct (top) and incorrect (bottom)
Quote Mac Windows HTML
single opening Opt + ] Alt + 0145 ‘ or ‘
single closing Opt + Shift + ] Alt + 0146 ’ or ’
double opening Opt + [ Alt + 0147 “ or “
double closing Opt + Shift + [ Alt + 0148 ” or ”

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-right: 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.

Hanging Bullets
Hanging bullets set at 1em (left) and 1.5em (right) on a mobile device.

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.

Kerning off
Adobe Caslon Pro without kerning
Kerning on
Adobe Caslon Pro with kerning

To turn on kerning in modern web browsers, you need one line of CSS:

	
body {font-kerning: normal;}
	

As of this writing, browser support for the font-kerning property is still limited. Refer to the State of Web Type for up-to-date status.

Letter-spacing

Unlike kerning, letter-spacing, 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 letter-spacing combined with loose word spacing results in a jerky rhythm and uneven flow. Conversely, loose letter-spacing 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 letter-spacing is often used in headings and all caps. Letter-spacing lower case, which reduces legibility, should not be used at all.

Letterspacing
Univers with letter spacing

Here’s the CSS to control letter spacing:

	
h1 { letter-spacing: 0.1em; }
	

Small Caps

Real small caps have their own characteristics: height, stroke weight, letterfit, and proportions. Often used for abbrs, 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.

x-height
Alegreya Sans SC (left) and scaled-down-full-caps Alegreya Sans (right)

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

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

As of this writing, browser support for the font-variant property is still limited, but that should not prevent you from using it in the approach of progressive enhancement. Refer to the State of Web Type for up-to-date status.

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:

Ligature off
Adobe Caslon Pro without ligatures
Ligature on
Adobe Caslon Pro with ligatures

For ligatures to work on the web, the typeface you chose needs to have OpenType features. To turn on ligatures in CSS, this is all you need:

	
body {font-variant-ligatures: common-ligatures;}
	

Drop Cap

A drop cap is a large initial uppercase letter that indicates the beginning of the first paragraph. Tucked into text, a drop cap can be set in a decorative typeface for a pleasing effect. For the web, consider performance when setting drop caps in a different typeface as opposed to the same text typeface. Is it worth loading the extra font file? To set up drop caps using CSS, you will need something like this:

	
article p:first-of-type:first-letter {
  font-size: 4.65em;
  padding: 0 .1em 0 0;
  margin: 0;
  float: left;
  line-height: .9;
}	
	

You have to play around with the font-size, padding, margin, and line-height to get the bottom of the drop cap to align on the baseline of the text and the top of the drop cap to align with the cap-height of the text. To give designers better control of the drop cap, the CSS Working Group has proposed the initial-letter property. Unfortunately, browsers have not adopted this new property as of this writing. For now, if you want finer control of drop caps, such as specifying the height and lining up the baseline, you may want to check out Adobe’s dropcap.js.

Implementing dropcap.js is straightforward. First, you need to specify the drop cap letter in the <span> tag:

	
<span class="dropcap">M</span>y beautiful drop cap…
	

Then, add the following script in the bottom of your page (before the closing <body> tag):

	
<script src='dropcap.min.js'></script>
  <script>
    var dropcaps = document.querySelectorAll(".dropcap");
    window.Dropcap.layout(dropcaps, 3);
  </script>
	

In the example above, the drop cap’s baseline is set to match the third line of the paragraph, but you can change the size of your drop cap. To learn more, check out the dropcap.js demo on Github.

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.

Ampersands
Italic ampersands from left to right: Adobe Caslon Pro, Bembo, Goudy, Hoefler Text, and Playfair Display

For more visual pleasure, check out my list of 32 selected ampersands from Google Fonts. Of course, you can download the source too.