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)

Windows XP

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.

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.

Meagan Fisher (talented designer, front-end coder and owl aficionado) will be joining us as a part-time assistant. Meagan has recently moved from sunny Florida to Salem, and will help SimpleBits become slightly less tiny than it's been for the past six years or so, beginning next month. I'm really excited about some of the new things this will allow us to work on.

Some of her recent work includes a wonderful Rails Machine redesign (where she worked with Dan Benjamin, who I owe for putting us in touch) and Halogen Guides Greener. You can read more about her big move over at her blog.

So, welcome aboard, Meagan -- and get ready to become a converted Red Sox, Patriots and Celtics fan (I'm omitting the Bruins since they have a bit of catching up to do).

Kerry and I welcomed the birth of our daughter yesterday. Tenley Murphy Cederholm was born June 25th at 1:22pm. Six pounds, eleven ounces of pure joy.

Where our 2 1/2 year old son Jack came six weeks early, Tenley decided to do it her own way, arriving 3 days late. Everyone's doing wonderfully though, and Mom and baby will be coming home tomorrow.

I'll be taking the next month off as much as possible as we adjust to newborn status once again. See you in a bit.