Archive for August, 2008

Use the Best Available Ampersand

I love ampersands. And interest in this quirky character seems to be on the rise as of late. Case in point: Just last week, I purchased not one, but two t-shirts adorned with nothing more than an ampersand. That’s telling, no?

For much of last year, I had a little portion of a presentation dedicated to using CSS to serve up alternate, compelling ampersands. It’s also something I’ve done here on SimpleBits for quite awhile in our tagline. The simple little concept comes from one of Robert Bringhurst’s guidelines in his seminal typographic bible, The Elements of Typographic Style.

Guideline 5.1.3 offers this little tidbit regarding ampersands:

In heads and titles, use the best available ampersand.

Bringhurst explains that frequently the italic version of an ampersand is more decorative and interesting than its roman counterpart, and goes on to suggest:

Since the ampersand is more often used in display work than in ordinary text, the more creative versions are often the more useful. There is rarely any reason not to borrow the italic ampersand for use with roman text.

So why not apply this to the web? We can use CSS to cleverly specify a list of our favorite ampersands, with the reader getting the best one available. We’ll first apply a class wrapped around the ampersand we’d like to beautify like so:

<span class="amp">&amp;</span>

And we’ll build a list of cool italic ampersands that readers might have installed by default, while also specifying the italic version:

span.amp {
  font-family: Baskerville, Palatino, "Book Antiqua", serif;
  font-style: italic;

We can weight our list, putting our favorites near the front, understanding that the reader may get one or none, depending on which operating system they’re on, and if they have the font installed.

Thanks to the excellent efforts of our newly-hired help, here are some charts showing some of the more interesting italic ampersands available as default fonts on Mac and Windows. These’ll help get you started building your own awesompersand list.

These charts are by no means comprehensive, but were created from the default lists from each operating system. Pre-bundled or third-party applications may install other cool fonts that could be common enough to use as well. If you have a favorite that’s not listed, let us know in the comments.

Mac OS X (10.5)

OSX ampersands

Windows XP

Windows XP ampersands

Windows Vista

Vista added several new fonts, all beginning with the letter ‘C’. What’s nice is that Constantia nicely matches Palatino on the Mac and Palatino Linotype on Windows XP.

Windows Vista ampersands

For more Bringhurst-to-CSS goodness, see Richard Rutter‘s The Elements of Typographic Style Applied to the Web project. And be sure to grab Meagan’s wallpapers to ampersandify your desktop.