A Visual Guide to the Ampersand (Infographic)

Oct 13 2011 by Jacob Gube | 42 Comments

A Visual Guide to the Ampersand (Infographic)

The ampersand symbol (&) has a long and rich history, dating as far back as 63 B.C. To this day, its use can be witnessed in a wide range of situations, from being a key component in a Fortune 500 company’s logo/brand identity materials to casual SMS/text messages between old friends.

Below is a visual guide to this beautiful and artistic symbol.

Click here to enlarge.

This infographic is sponsored by Squarespace, a website builder for creating and managing beautiful websites, blogs and portfolios. Learn more about this flexible, fully managed platform by taking the tour.

Related Content

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

42 Comments

Shannon

October 13th, 2011

This is great! I LOVE the ampersand and use it whenever possible! It’s definitely one of the most beautiful and underrated characters.

Thomas McGee

October 13th, 2011

Very nice infographic and information. Nice too that you’ve included information about the first printing press of Johannes Gutenberg—definitely a starting point of publishing and a milestone of typography. The HTML character guide is helpful as well. Thanks for the article!

Priyadarshi Kunal

October 13th, 2011

Awesome Jacob,
Beautiful article and very informative.
Thanks a lot.

Rafe

October 13th, 2011

Your infographic on the amphersand is well done. However I do believe that the amphersand for at&t has also been customized to fit the typography of the mark – it may better fit with those that follow.

coderbay

October 13th, 2011

good and informative article.

Tasha

October 13th, 2011

Thanks Jacob. I really enjoyed this, as I do with all your posts!

Johnny

October 14th, 2011

Cool,& thanks!

Jacob Gube

October 14th, 2011

Thanks for all the kind words!

Evan Skuthorpe

October 14th, 2011

nice collection of &

Jay

October 14th, 2011

Nice infographic with lots of tasty data! I noticed that in the “Ampersand to Ampersand > Traditional” section the Goudy Oldstyle ampersand is incorrectly labeled as Akzidenz Grotesk Light.

Raul

October 14th, 2011

Love this!! Excellent piece and (note I didn’t use “&”) now I know the proper usage too :)

Jessica

October 14th, 2011

This is great! So cool. Thanks for this.

Shikeb Ali

October 15th, 2011

Never gonna knew that much about it, if you havent… thanks Jacob.

P.S. I still feel hard to draw this sign.

Saeed Neamati

October 15th, 2011

OMG! can you believe that for a simple symbol like &, this vast amount of work and information be presented?
I liked this article. Thanks.

Theo

October 15th, 2011

Great infographic nice and informative!

Morgan & Me Creative

October 15th, 2011

Superb study of the ampersand. We’re in the mist of possibly re-designing our logo and this will come in handy!

LD

October 16th, 2011

All I know is that its one of the few symbols I have to look at the keyboard to locate…

donat

October 16th, 2011

nice, i think every letter in english has a history from rome to greek

Tom Ross

October 17th, 2011

Haha I love the confusion with the treble clef :P

Laurenne Dorgan

October 17th, 2011

I love typography! thanks for the great article!

Michelle Cutler

October 18th, 2011

Great job!! Looks fabulous and I really enjoyed reading it :-)

sandy bassett

October 19th, 2011

I love the ampersand, and use it as a personal (and business!) icon. It reflects my philosophy in life — and, more, additional — and it’s the middle of my name! I even drew one of my own and have a tattoo of it on my ankle, to remind me. THANKS for this great article, I enjoy knowing the etymology as well as the illustrated ampersands.

Margaret Buchanan

October 19th, 2011

Very fun and interesting. I have always enjoyed ampersands thoughtfully used in logo design. One point of clarity: In the section towards the bottom, Ampersand to Ampersand, there is an incorrectly identified font. In the second row (Traditional), far right, the ampersand is identified as Akzidenz Grotesk Light. It is Goudy Old Style. Thanks.

Charles Forster

October 19th, 2011

Nice infographic about my favorite character in the english language. Interesting about how the name came about, but you didn’t go very in-depth about how the shape of the character came to be. Otherwise it’s awesome.

Brad Ball

October 19th, 2011

I dont know why, but I love the ampersand! I think when its used correctly it can really tie pieces together. I don’t know if it is because of its visual characteristics or it’s implied meaning, or maybe both together! Either way, thanks for the fun read!

Tessa

October 19th, 2011

When I studied design at Stanford, one of the first projects in Art Design 101 was to design an ampersand to communicate an idea. I focused on “sexy” and designed one that looked like it was ready to shimmy off the page.

vikram sood

October 20th, 2011

Hey, our new identity is out on http://www.facebook.com andthn, we have meddled in designing old into the new :-) Do give us your feedback…

Gwen

October 20th, 2011

I have a tattoo of an ampersand on my back. It’s in Clarendon. It would appear that I draw them the opposite way to the directions in the infographic. The end result is the same though.

Frank Nichols

October 20th, 2011

Since it is common in handwriting, an ampersand can be used in the middle of a sentence, as long as the text is presented within quotes. This exception is allowed to accurately represent the author’s writing style.

Kiwi Don

October 21st, 2011

Great article on a wonderful subject, but please correct the ‘Akzidenz grotesque’ in the ‘Traditional’ section. Akzidenz it aint!

Jan Willem Kooijmans

October 21st, 2011

Hi Jacob,

Great article. I love the ampersand. And your guide is really great.
Thanks for the work.

Ciao,
Jan Willem

Linda Keane

October 25th, 2011

Wow! Really informative and interesting. Thanks for sharing! Will try to share this with kids!

adam

October 26th, 2011

beautiful & highly informative thank you Jacob! (see what i did there)

wow originated from Marcus Tullius, i didn’t see any reference to it in the awesome HBO series, if indeed it’s the same guy: ) http://www.youtube.com/watch?v=EirntGCylDY

Sarah

October 26th, 2011

What a wonderfully designed post on our friend the ampersand. I totally got out my pen and paper and tried to imitate the fancy ones used in your post. Loved learning the history of this little guy. I find the “8c” put together to symbolize the character some really clever thinking on thier part.

Larry Miller

October 26th, 2011

One ampersand in the “Traditional” group of three is mislabeled. You label the third one as AkzidenzGrotesk Light. It is not. I believe it is Goudy Old Style.

Henk Wittenberg

October 27th, 2011

Ampersand is the only character representing a meaning instead of a sound.
It’s like a Chinese character.
Typographers love it because they can use it more freely as the 27th character.
Thanks for the historical info.

Pam Blittersdorf

October 27th, 2011

Great piece for graphics geeks and editorial geeks as well. I look forward to your next tutorial.

Ovidio

November 3rd, 2011

The “ampersand”…hum, what can be said about its seductive weirdness? Et (latin for and)…&. A writing construct bridging the servitude of the comma to the tirany of the period, masking as it does with its roccoco compoundness a deceitful beauty, in print alone, but, still reviled as a boring adjunct in the art of rhetoric, lingua activa.

Colin

November 8th, 2011

I love articles like this! Incredible job at making the article very readable and aesthetically pleasing. I don’t know why flow charts make things so much more understandable. Anyway, thanks for the history of &.

Martin

November 12th, 2011

Nice overview, even for an old hand like me. However, please do change the description of the ampersand labeled Akzidenz Grotesk light to Goudy. Also, it is comic (and embarrassing) that the word “EMBARASSMENT” is missing an “R”.

Leave a Comment

Subscribe to the comments on this article.