Using The Best Ampersand Available

Avatar of Chris Coyier
Chris Coyier on

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.

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:

simplebitsexample.png

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:

ampersandexample2.png

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.