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">&</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.
Dribbble What are you working on? 
Instapaper Icon design 
Sass For Web Designers Paperback + eBook A Book Apart
CSS3 For Web Designers Paperback + eBook A Book Apart
Bulletproof Web Design Third Edition New Riders 
Handcrafted CSS Book and DVD New Riders 
Web Standards Solutions Special Edition Friends of Ed
67 Comments
Using backend tools like Typogrify (http://code.google.com/p/typogrify/) can be a great aid toward setting the type of body copy as well as you can header copy, even when your client is using a CMS and never wants to know what a span is. In this context, it finds ampersands and adds the appropriate class around them, so you can just CSS and forget about it.
Huzzah for great ampersands on the web!
When creating brands or even just doodling, I find myself straining to come up with names that have ampersands. Sadly, it seems as though the most common occurrence is law firms. Thanks for the useful post, Dan.
If you’re looking for some more fawn-over-ampersand goodness, you should check out http://ampersand.gosedesign.net
Would have loved it if there were examples of some Linux default fonts. I know they are scant at best, but they are still there.
Still, a cool article. Thanks for publishing.
Great post. I love using Trebuchet MS but hate the ampersand, think I’ll do a little css tweaking.
Thanks
Nice post Dan. I’ve done this on my site. There is a nice plugin called wp-typogrify, it (among other things) pops class=”amp” on all your ampersands. Which lets you grab it with the CSS & funk the hell out of it.
I was having a little think about this technique recently and I was wondering to myself if perhaps and ABBR element would make a nice alternative to SPAN:
<abbr title="and" class="amp">&</abbr>Just a thought …a particularly nerdy and perhaps borderline semantically psychotic thought but just a thought nonetheless.
I have always loved italic ampersands as well. Sadly, ampersands are grossly overused online when the word ‘and’ should be used. I’ve even seen the argument that ampersands are only to be used with math operators when displaying code, but these statements come from engineering cretins who seem to know nothing of the origins of the character.
In your examples, Cochin and Hoefler Text have the closest to original Latin word “et” for “and”. (Ampersand comes from “and per se and”).
@Robert Gonzalez: Linux fonts would be tough, since it can be completely different depending on the distribution. SuSE might license a few, Red Hat might license others, but Debian-based distros usually don’t license anything, and only use freely-available ones.
So even if Dan’s list (and Meagan’s charts) covered some of the more popular Linux fonts, there’s still a solid chance that any given font wouldn’t be present on a given linux system.
Wishing there were a similarly styled ampersand to Hoefler Text in Windows base fonts. Time to go hunting!
There ought to be an “ampersand shoppe” that sells assorted ampersand goodness.
Nice lookin’ out for the ampersand addicts, Dan. Lovely charts as well.
Their is an air of elegance in the use of an ampersand. As you mention Jesse, they often exist in more traditional companies, often with a collection of partners names conjoined.
To me a few companies that demonstrates this elegance would have to be bang-olufsen.com and bowers-wilkins.com. The latter not so much elegant in their use of the ampersand explicitly, but being left with the simplicity of the typography and the nicest character at the disposal of a designer, the design really shines through and consequently instills confidence, richness and evokes desire.
Great article Dan, especially with the use of graphics to demonstrate the different fonts across platforms.
Dan many thanks for this post. Like you, I love the creative use of ampersands – so subtle, but brings so much life to any typography. These charts are so useful and absolutely delightful.
Great post Dan. Sites out there have to show the ampersand more love.
Nice post, Dan! Ampersands are cool and this chart surely is pretty handy, so thanks to you and Meagan for that!
This is good information to have. Thanks
I’ve always had some admiration for the ampersand. I hated it for a while when it was used in all the web 1.0 crap that was out there. I think the thing I like best about it is it’s ability to replace the a word “and” with a simple elegant character. Maybe the Chinese were on to something?
I’ve admired this technique ever since Messrs. Rutter and Boulton mentioned it (and your use of it) last year at SXSW.
One suggestion is to change the class name to “alt” (meaning “alternate styling”), so it can be used sparingly on other things.
Example:
The Elements <span class=”alt”>of</span> Typographic Style
@Jeremy Keith: That’s not a half-bad idea, and it shouldn’t cause any issues with any assistive technology either. Furthermore, you could drop the class in the name of progressive enhancement.
I note that the Mac defaults are much more interesting than their Windows counterparts. Sad (for Windows users)
As far as I can tell, on my XP the following fonts (mentioned above) are missing and I doubt that they count as defaults: Andalus, Frank Ruehl, JasmineUPC, KodciangUPC, LilyUPC, Sylfaen.
Which, if correct, would cut the XP options mentioned by 30%.
(At least some of these fonts seem to come with language extensions to XP though.)
Love the ampersand diagrams, Dan and Meg. They’re informative, inspirational, and, IMHO, nicely decorative for a humble designer’s desk.
I cropped them down with some nice padding of your background color and printed them out on heavy stock. The plan is to make little stands for them or frame them; I haven’t decided yet.
I could easily see them transformed into a poster. Maybe just 11 x 17… SimpleMerch?
@Jeremy: Really interesting. Is an ampersand an abbreviation of “and” — or just a shorthand symbol? Debatable, I guess.
Feels good (and nostalgic) to be mulling this sort of stuff over :)
@Eric:
I could easily see them transformed into a poster. Maybe just 11 x 17… SimpleMerch?
Heh heh. You may be onto something here.
Thanks Dan (and Meagan) for sharing the wealth on this one. It’s a simple idea that can be really easily implemented. These will certainly be printed out and pinned up before the week is out…
@Jeremy I’ve got to say, whether there was a more semantic element to use was the first thing that crossed my mind. I’m not as ferocious a Semanticist as some – for instance, if I had to choose between properly marking up a heading or saving a puppy, the puppy would probably live. That said, I do hate using spans, and would rather use something a bit less generic. Question is, does an ampersand actually count as an abbreviation?
@Dan Argh… Cross posted!
@Dan: Good post. Like the charts. Given me ideas for my new site design, an extra detail perhaps. It’s been far too long since you wrote a good debate-inspiring, full-length article on this site! :)
@Jeremy Keith: I like that idea. It would be more semantic than just a span tag, and could be styled using just the title attribute. No need for the class.
Stephen Fry & Hugh Laurie and their collection of ampersands: http://uk.youtube.com/watch?v=T2c7bJN7Kto
For the sake of clarity and disucussion, Bringhurst does say “In heads and titles, use the best available ampersand.” And then goes on to state “There is rarely any reason not to borrow the italic ampersand for use with roman text.” In my interpretation he is saying you should use the best available ampersand that is cohesive with the design, more than likely of the same font not “Pick your favorite one and toss it in there.” Obviously the ampersand is designed for and is part of the font it should be used with.
Dan, you use the Baskerville italic ampersand which works well on the web with Georgia. Does anyone have thoughts on interpreting Bringhurst’s meaning?
I can’t believe I never thought about changing the font and style of the ampersand in my headlines.
Seems so simple :)
You had me until the first sentence. I can’t stand ampersands. Cool post though.
Too bad you can’t get to the AAT/OpenType alternate glyphs in those fonts, on the Web. Besides that default italic ampersand you show, Hoefler Text has another very nice ampersand in its roman face & three more in its italic, Zapfino has four or five other options, & Apple Chancery has one more very stylish one, &c.
Travis: clearly you shouldn’t pull out ampersands that look nothing like the rest of the typeface: using the Didot ampersand with Times, or the Papyrus ampersand with Helvetica, is just going to look silly. But there’s no problem that I can see borrowing a nicer ampersand from a similar typeface.
@Davezilla
I don’t know about engineering cretins, but I’ve seen the avoidance of ‘&’ suggested by people who’s native tongue is not English.
In french for instance, it is frown upon to use the ampersand for anything other than the name of a commercial entity for which it is required — and that even though the word for ‘and’ (‘et’) still follows the Latin heritage exactly.
When teaching early American literature, I find that 95% of undergraduates do not know that an ampersand joins an “e” and a “t” to express “et” — latin for “and”
– & hence “&c.” (common in early American texts) = etc.
For this same reason, I am partial to the ampersands that look more like an “e” and a “t” — and would use the Baskerville one, for example, before the American Typewriter one.
It’s disappointing that there’s no Garmond/Cochin/Hoefler-style “et” ampersand available in Windows XP or Vista. It’s my favourite style by far.
Gary: Most windows machines have some sort of Garamond (not sure what its ampersand looks like), & also, Monotype Corsiva’s italic has a pretty stylish ampersand. I’m not sure if those are MS-Office-only fonts, or if they’re standard on Windows.
Jacob: I thought twice about posting as it did seem like the obvious observation. Bringhurst councils typographic thoughtfulness and restraint throughout his book. Something I thought may be a topic of discussion, interest and worthy of a comment.
It is the degree of historic and visual relevance that should be considered, not necessarily personal preference.
Here’s another ampersand shirt, from Service is Good, to add to your collection.
http://serviceisgood.com/product/01/ampersand_cinder.php
You can view all (or most) of the ampersands on your computer from your browser here, if you have flash.
Awesompersand is the coolest word I’ve come across since they stopped sending “Alf” in Denmark… :-)
First off, great article.
That said, I’m not a fan of using the class name “amp” for this declaration. It precludes the style from being used for any other purpose or symbol but the ampersand (which I know is the target of this article). This sort of literal naming of classes creates maintenance headaches when extended beyond this example. (I’m sure we’ve all seen developers add classes called “right”, “left”, etc.) I’d much rather the class naming be more semantic like “fancy.” At least then we would know that we are looking at a fancy ampersand versus an amp ampersand (although I guess it could be amp’d up).
Lastly, I think I’m not alone in saying that it would be great to see a multi-platform set of ampersands or mult-platform groupings (as you suggested with the Vista example at the end).
Great stuff.
Very nice article and I love the samples.
From the department of “Great Minds Think Alike”:
“Always Use the Best Ampersand”
I was hoping your love for ampersands would spill over to a write-up of the best available ampersands, including that great chart of default fonts for the 3 major OS options. I can’t believe no one else has done this yet, but I figured you’d be up to the task.
Thanks for putting this out there, Dan. I plan on doing a putting the info to use at some point in the future.
Most windows machines have some sort of Garamond Zapfino has four or five other options, & Apple Chancery has one more very stylish one, &c.
I feel sorry for Windows users with their limited font choices.
“Would have loved it if there were examples of some Linux default fonts. I know they are scant at best, but they are still there.”
As you wish: The ampersands of Linux. Based on a list of pre-installed fonts in Ubuntu Linux.
(BTW, the state of open source fonts has improved immensely with the maturity of FontForge, an open source font editor.)
I put together an image showing all of the interesting ampersands in OS X fonts, including those stuck in alternate glyphs. It’s significantly more complete than the list at this post. Link: <http://i37.tinypic.com/nxnnlu.jpg>
Amperstands looks cool when used at the right spot and now i must also say the right way too. i did not think about amperstands in this way. :)
What a wonderful contribution, Dan. Nice work.
Yes!
It’s great to see (good) typography become prolific on the web.
Another good way to take the guess-work from how your careful design renders on a client is to use something like sIFR
Of course, tools such as these wont help those who don’t pay attention to Bringhurst’s practical recommendations, but with a little effort, the results can be quite impressive.
Some developer’s frown at it’s dependancy on Flash, but I think this is an excellent use, because:
- Flash has +90% browser penetration
- If flash isn’t installed, the design degrades to normal CSS styles
- It is treated as normal mark-up, making it SEO friendly, and replacing the need to continuously cut graphics
- It has integrated controls (based on CSS) such that a designer can stay true to vertical rhythm
One complaint is that it can impact page-weight.
Generally though, it’s a great interim solution helping the web look better, until something more permanent arrives.
I’ve used it at Roger Wilco – perhaps not the most stunning example. Used here only for reliable representation of Gill Sans.
An amazing post, I will definitely be implementing an ampersand or two in my next project!
@Mark – Awesome, thanks for putting together The Ampersands of Linux!
@Jacob Rus – Yes indeed, some of the default typefaces have additional, interesting ampersands as alternate characters — but unless they’re mapped to the normal, bold or italic versions of the & character — they don’t really help us out here.
In other words, if we’re styling the & entity in the markup, how would one access the alternate glyph from a typeface using only CSS? Someone correct me if I’m wrong, but I don’t think it’s possible.
These charts were meant to show what’s actually possible based on those constraints: & character in the markup + CSS to serve the italic versions instead.
Dan: Yep. I realize, and was lamenting that in an earlier comment.… It is most unfortunate that the web has no way to take advantage of all the goodies locked up in the more interesting digital fonts, like extra ligatures, swash caps, text figures, &c. Then again, Safari can’t even manage proper kerning yet (or proper color management, or, or …).
I bet those shirts start up some really fascinating conversations. What else do you keep in the closet?
Very informative and cool. I love the idea of Robert Bringhurst’s classic applied to the web. Smashing magazine just published an article entitled “Ampersands with Attitude” that displays a bit of the design side of the ampersand.
http://www.smashingmagazine.com/2008/08/15/ampersands-with-attitude/
This is a wonderful compilation of ampersand. Thanks for sharing this.
I’m not sure if there’s an easy way to call it in CSS, but American Typewriter has an alternate ampersand if you use “Condensed Light.” It’s a little more fun than the regular one.
Yes, but be careful, there’s a catch. Most non-designers won’t know what it is they’re seeing; some ampersands don’t look like ampersands at all; you are breaking your font consistency; you are spending a lot of time on a tiny detail.
The Elements is my favorite book on typography but not all of these rules add up to the usability of a website when applied to the web.
After a lot of ampersand obsessing this evening, I finally wrote about using jQuery to automatically swap out boring ampersands with stylish ones, something I’ve meant to do for a while now (thanks for the kick in the rear, Dan). You can read more in my post entitled Automatic “Awesompersands” (giving credit where credit is due).
Ampersand should be simple & straight forward character.
Some other fonts included on Vista you might have forgotten about: the Segoe family.
Thanks for the ampersample book, if I can be allowed to coin a word. Very nice and useful!
I’ll toss in the factoid that the main character’s pet monkey in the fabulous comic series “Y: The Last Man” was named…. Ampersand!
Lovely, some enticing options there.
I’m wondering if you would extend your advice to quotes…I find that sans-serif fonts have quotes that tend to be inelegant slabs, while serif fonts tend to have more elegant, curving quotes that match what we commonly think of when thinking about the shape.
thanks a loyt.good idea
good character font.
Nice post, very useful. Thanks.
I wrote a follow up post at bluecomIT.com, taking Patrick Haney’s Automatic “Awesompersands” a step further, and explaining why I think it is better to use the Dojo Toolkit’s dojo.query to do this.
Also I’ve included a complete working examples of the Dojo and jQuery implementations, which I believe Patrick has missed =)
Much respect to the both of you. You’re true inspiration.