Grow your CSS skills. Land your dream job.

Using The Best Ampersand Available

Published by Chris Coyier

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.

Comments

  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.

  2. Permalink to comment#

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

  3. Cool, cool and cool….

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

  4. Peter
    Permalink to comment#

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

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

  5. Adi
    Permalink to comment#

    It can be handled automatically by CSS:

    http://opentype.info/webfont-demo/ampersand/

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".