Using The Best Ampersand Available

By: Chris Coyier on December 29th, 2007 — Posted in: Quick Tip / Trick

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.

Theoretically Related Articles:

Discussion Elsewhere

CSS: The Best Ampersand Available | David Bisset: Web Designer, Coder, Wordpress Guru — January 3, 2008
Improve Your Blog Typography with Typogrify — January 4, 2008
Links of Interest - CSS-Tricks — February 4, 2008
Trying OpenID… and My Other WordPress Plugins - CSS-Tricks — March 8, 2008
Full Clout » Trying OpenID… and My Other WordPress Plugins — March 11, 2008
Autodesign » Trying OpenID… and My Other WordPress Plugins — March 15, 2008
“Always use the best ampersand” — May 1, 2008

Responses

1

Wow. I never make use of the ampersand. Though now I know how cool and elegant a simple thing can look. I’m having a hard-time believing the SimpleBits instance you’ve laid out in the top is not an image.

Comment by MindBlogger — December 29, 2007 @ 8:25 am
2

Ok that the ampersand is made with Baskerville is really exciting to me.

Comment by Nah — December 31, 2007 @ 2:50 am
3

Cool, cool and cool….

Only possible problem is the limitation of fonts not on certain browsers

Comment by Jermayn Parker — December 31, 2007 @ 3:04 am
4

Your wp-typography plugin link is incorrect : it points to the original ( Django ) plugin.

Correct link : http://wordpress.org/extend/plugins/wp-typogrify/

Comment by Peter — February 4, 2008 @ 4:04 pm