Using The Best Ampersand Available

I really like one of the typographic tricks Mark Boulton makes in his “Better Typography” presentation. (Slideshow of the presentation here. Around slide #109) He suggests “using the best ampersand available”. This just means that on some typefaces, the ampersand character can be a little lackluster and it can make a big improvement in style and readability to swap it out for another typeface. His (great) example is from SimpleBits:

Now that’s a nice looking ampersand. You might even think it an image at first glance, but that’s pure text. The trick is just to wrap ampersands in an span with a unique class like so:

<p>Tips <span class="amp">&amp;</span> Tricks</p>

Then apply styling to the class. You should compile a list of your favorite ampersands and then list them in order in your style. Even if the fonts are not exactly common web fonts, if you list several you have a decent chance of one of them working. Or at worst, it just defaults to a serif:

span.amp {
   font-family:Baskerville,"Goudy Old Style","Palatino","Book Antiqua",serif;
   font-size:110%;
   font-style:italic;
}

Check out some simple examples of how this can make text more pleasing:

I should mention that the excellent wp-typogrify plugin automatically adds this span/class to ampersands on your WordPress blog, which is pretty slick and just one of it’s many nice features.