The History of the Ampersand and Showcase

The ampersand is one of the most unique typographical characters out there.

Typography designers can exercise a lot more artistic freedom in the design of the ampersand, ranging from very traditional representations to those that bear little resemblance to the original form.

But many designers have little knowledge about the origin and meaning of the ampersand. The ampersand has a long and rather interesting history, though.

And with all the variations available out there, there are a whole host of design possibilities presented by this particular character.

Read on for more information, a history of the ampersand, and a gallery of ampersand designs from a variety of different typefaces.

 

A Brief History of the Ampersand

The ampersand can be traced back to the first century AD. It was originally a ligature of the letters E and T (“et” is Latin for and). If you look at the modern ampersand, you’ll likely still be able to see the E and T separately.

The first ampersands looked very much like the separate E and T combined, but as type developed over the next few centuries, it eventually became more stylized and less representative of its origins.

You can see the evolution of the ampersand below (1 is like the original Roman ligature, 2 and 3 are from the fourth century, and 4-6 are from the ninth century).

The modern ampersand has remained largely unchanged from the Carolignian ampersands developed in the ninth century.

Italic ampersands were a later ligature of E and T, and are also present in modern fonts. These were developed as part of cursive scripts that were developed during the Renaissance. They’re often more formal-looking and fancier than the standard Carolignian ampersand.

The word “ampersand” was first added to dictionaries in 1837. The word was created as a slurred form of “and, per se and”, which was what the alphabet ended with when recited in English-speaking schools. (Historically, “and per se” preceded any letter which was also a word in the alphabet, such as “I” or “A”. And the ampersand symbol was originally the last character in the alphabet.)

The ampersand is a part of every roman font. It’s used in modern text often, probably most frequently in the names of corporations and other businesses, or in other formal titles (such as Dungeons & Dragons).

It’s experiencing a bit of a resurgence in general usage, as it commonly replaces “and” in text messages and Twitter updates. Ampersands are also commonly used in programming, particularly in MySQL, C and C++, XML, SGML, and BASIC.

 

Ampersand Designs

The original ampersand designs reflected their origins as a ligature of E and T. Even as the ampersand has evolved and become more stylized, it still retains the basic shape of E and T combined.

The standard ampersand most of us are used to seeing is the Carolignian variety, and is featured in many commonly-used fonts. Here are some examples:


Andale Mono – A very traditional, sans-serif example.


Apple Chancery – A fancier, serif example.


Kingthings Petrock - A gothic example.


The other common ampersand design is the italic ampersand, featured below:

Monotype Corsiva – A traditional script example.


Scriptina - A less-formal script example.


Aller Dispay – A modern, sans-serif example.


Hill House – A craftsman-style example.

 

Ampersands in Websafe and Web-Common Fonts

Some websafe and commonly used fonts on the web have excellent ampersand designs. Others, not so much. Here are the ampersands from a variety of web-common fonts:

Arial – Arial has a very basic, sans-serif ampersand.


Georgia - A very traditional, serif ampersand.


HelveticaHelvetica’s ampersand is slightly more refined than Arial.


Palatino – Another very traditional example.


Times New Roman – A heavy, somewhat bulky-looking ampersand.


Verdana – The verdana ampersand is more squat and square than many other sans-serif examples.


Trebuchet MS – The only web-common font that uses an italic-style ampersand.


If you’re unhappy with the ampersand in a font you’ve chosen for your website, there are ways to use custom ampersands. The Typogrify plugin for WordPress makes it incredibly easy to use a custom ampersand on your WordPress blog.

 

The Ampersand in Design and Art

Ampersands have become a bit of an obsession for some. There are blogs that focus on ampersands (some within larger typography blogs, others focusing solely on the ampersand). There are t-shirts. And there are a surprising number of people out there who have ampersand tattoos. Here are some examples of ampersands in real life:

 

Using Ampersands in Your Designs

Whether for a web project or a print design, ampersands can play a prominent role in the look and feel of your website. When used in titles or headers they can add some extra graphic impact without images.

Italic ampersands, which are generally formal and fancy, can add extra elegance to a design that otherwise remains minimal. Carolignian ampersands in a sans-serif font are often bolder and have a modern feeling.

Carolignian ampersands in a serif font have a very traditional feeling, though depending on the specific font they can become more formal or more modern. A few more examples:

 

Italic Ampersands

Lucida Handwriting


Papyrus


Windsong


Goudy Bookletter 1911


Bernhard Modern


Caviar Dreams


 

Carolignian Ampersands

Lithos Pro


Tahoma


Optima


American Typewriter


Regency Script


 

Further Information

Here are some additional resources, and sources used in the crafting of this post.


Written exclusively for WDD by Cameron Chapman.

Do you use the ampersand in your designs? Feel free to share some examples below…

0 shares
  • http://circleboxblog.com Callum Chapman

    What can I say.. You learn something new everyday! Great post ;)

  • http://www.productivedreams.com Gopal Raju

    Never knew, there was so much behind ampersands origin!

  • http://www.jilliz.com Daniel

    What a wonderful article!

  • http://www.moinid.com Creative ideas

    Great info. Thanks for the lesson

  • http://cottage-industrialist.com Cameron Blazer

    Great article—one ampersand you missed, though…the ampersandwich: http://shop.simplebits.com/product/ampersandwich-tee

  • http://virtua-gallery.com Klaus

    Now that’s an article with substance! Good job!

  • http://lowieke.posterous.com/ Lode

    House Ind. uses an ampersand as its logo. You can find some beautiful pieces of artwork here and order some T-shirts or objects containing the ampersand.

    http://www.houseind.com/objects/accessories/castironampersand/

  • http://webdesigns-rosenheim.de michael

    How come one writes a whole article about an ampersand sign? :-) Did you sit on your couch one day and said “hey no one knows where this sign came from, let’s do an article” ??
    Nevertheless it’s a really nice article and very interesting.
    Can you do some article about the ‘A’ as well ;-) ??

    • http://www.webdesignerdepot.com Walter

      Sarcastic uh? Don’t push me or we’ll post an article on the letter A sooner or later ;)

      • http://www.creativeindividual.co.uk Laura

        Personally I really love reading ANYTHING about typography… It’s a hangover from studying graphic design. So I really enjoyed reading this article and examining the differences of the ampersand in each typeface.

        I enjoy trying to work out which font has been used in a design by recognising the key/unique characters, such as the ampersand. It may sound very sad to some people but it has saved me MANY hours when designing, being able to go to exactly the right font without having to go through my (very large) list of fonts.

        I look forward to the letter A article ;)

      • Jon

        Before you do the “A” I’d like to see all the common symbols… !@#$%^* ?

      • creative_blondes

        Hahaha :) !

  • http://aeonbeat.net Martin

    Great collection indeed!

  • http://www.jordanwalker.net/index.php Jordan Walker

    One sign to rule them all!

  • http://web-patterns.net Samoo

    Really enjoyed your showcase: I think ampersand is the sexiest of all glyphs:)

  • Rae

    Good article. However it has wrong title! There was no history of the showcase as you say in the title. It should be: Showcase and the history of the Ampersand or The history and the showcase of the Ampersand.

  • http://www.underworldmagazines.com julio

    I didn’t know that the Ampersand had a history I just also saw it as (and) pretty cool to know that this Ampersand go’s back in time.

  • http://www.sarareffler.com Sara R

    Cool! I never knew that an ampersand was the combination of letters E & T, and I love how diverse typeface usage of the character is. Thanks for sharing!

  • http://www.potter.com Héman

    What about the “france télécom” logo…
    hmmm, check that one out.

    cheers

  • http://jurusgrafis.com Richard Fang

    it’s so refreshing! I’m accidentally in love with Goudy Bookletter 1911 ampersand :D

  • http://mediatemple.net Scott DeSmet

    Great lil’ article. Thanks for the history lesson.

    :)

  • http://www.web4half.com Latia****I LOVE WEB DESIGN***

    Wonderful stuff. Awesome :D

    Many of us never had a thought of so many variations in ampersand. Am one of them.

    Thanks… For Great Collection.

  • Edison A. Leon

    Wow, it’s always good to learn

  • http://www.mrkuzio.com/ Mr Kuzio

    This post is very interesting I think; thanks.

  • http://www.mattaebersold.net Matthew Aebersold

    Thanks for this post! I love all the found type. Keep this up!!

  • http://www.doublejdesign.co.uk/ Jack

    This is very interesting! Thanks for the article.

  • http://bit.ly/5RQv0e Dumm

    great article. thanks

  • http://sexidesign.com Melody

    The designs with the balloons are genius..

  • http://www.knechtology.com Alan K’necht

    Thanks for sharing this. Brings back memories of when I was involved with typography in the early days of desktop publishing.

    Even remembering trying to explain this to a translator who didn’t want me using a “&” in a French document. I then explained it and showed him a custom “Et” with lots of kerning so he then approved it.

  • Shaymein

    Don’t think you made the images big enough.

    Shame on you for using Papyrus as an example.

  • http://www.tandemantiques.com Hilary

    What a fun, informative article!
    I love the ampersand, both visually & as a writing element. Some of my twitter friends and I have an ongoing ampersand joke/discussion and just the other day I tweeted this photo, taken in my antiques shop:
    http://twitpic.com/vdsih

    So thanks for writing this & I hope you have a nice day. :-)
    Hilary

  • http://aext.net Lam Nguyen

    Something new to me! This is a very interesting one worth seeing. The Ampersand is so creative. Thanks for this article!

  • http://www.crearedesign.co.uk James

    That was a very interesting read, and some lovely examples towards the end there.

    It’s very interesting to read about how a character developed, I’d be interested to know about how some letters within the alphabet have developed over time and where they originated from.

    Keep up the good work!

  • http://www.squiders.com Maidstone Web Designer

    I feel suitably educated!

  • pesho

    Thanks 4 this great post

  • http://espresso-online.info theamoeba

    really cool. it never occurred to me that there is so much history behind the ampersand. i suppose most characters have some kind of story :).

  • rolturn

    Great article

  • http://www.monsieurcabinet.com Monsieur Cabinet
  • http://www.stargraphicdesign.com Jessica

    I LOVE AMPERSAND’S, thanks for the article :)

  • http://ampersand.gosedesign.net stephen

    Hi. 



    Would you mind giving my site credit before doing a post that just grabs a bunch of images from my site? I noticed there is a link to my site, and I appreciate that, but when I see a number of images from my site (in pretty much the exact same order!) it feels a little weird without at least a “via” or something. Most of the images I have on my site are user-submitted and I always give credit when I can. I hope other can follow this practice instead of blindly copying and pasting the first thing you find on a google search.



    Thanks.

    • http://www.webdesignerdepot.com Walter

      We’re giving credit through each image as well as at the end of the article. I hope that’s ok.

  • http://www.galernaestudio.com/ Galerna Estudio

    Curious post. Thanks for the information.

  • Me

    Has anyone seen Helvetica??!

  • yifan

    In french typography idiom it is called “esperluette”, which is really nice.

  • http://www.gtwm.co.uk Oliver Kogll

    Great article and examples, inspired me to create
    http://okohll.deviantart.com/art/and-yet-again-150509354

  • http://kubrakose.blogspot.com Kuba Kose

    wow, & is very interesting. Thanks for article!

  • http://www.classesandcareers.com/colleges/state_palau/degrees_liberal-arts/courses_art-design Teacher Teacher

    Here is an extra little tidbit. Did you know there is an Ampersand Appreciation Society? You can find them on facebook if you are interested. Who knew?

  • http://seowisedesigns.com Yheng

    very interesting indeed!

  • http://malleckdesignco.com Joe

    Great post. The ampersand is one of my favorite characters. Thanks for the great content!

  • http://www.alejandroperazzo.com Alvaro Hernandorena

    lots of info about &

  • http://www.rvandenbussche.nl Web Design Student

    I swear by georgia. I love that font! And the ampersand.
    :D

  • http://ampersandampersand.tumblr.com ampersandampersand

    We have a fantastic new blog we’d love the world to see!

    An ampersand everyday, for 365 days :)

  • http://www.pixmac.com Cathy

    Adobe Poetica has 58 different ampersand variations within the one font. Its hard to choose just one!

  • Ron

    Now a history please of the currently overused @!

  • Wende

    Thank you for giving the most beautiful typographic character the respect it deserves. In design school, I asked several teachers if they could tell me where the ampersand came from and no one ever knew. I had to do a bit of research on my own to find out, so it thrills me to see your article with all of those great examples.

  • http://www.kokathome.eu/ kok aan huis

    love the & in trebuchet

  • Drew Levitt

    I can’t believe an article on the ampersand doesn’t include the italic Adobe Garamond ampersand, one of the all-time most beautiful glyphs!

  • Christian Rutherford

    “The ampersand is one of the most unique typographical characters out there.”
    It’s either unique or it isn’t. There are no degrees of uniqueness.

  • http://www.sjlwebdesign.co.uk SJL Web Design

    I feel very educated after reading this post, really interesting. I have always liked the ampersand but never looked into where it came from.

    Thanks for sharing.

  • http://psysai.blogspot.com Sai

    never thought of the ampersand to have such a history.
    This has triggered interest in me to find the origins of the other characters!

  • http://enes.tutarli.org Shitic

    I wish to see all these ampersands in web-designs as web-safe fonts.

  • Sir Pennington-Smythe

    Damn you, foul Amperesand! Though you vex me mightily, you shall never be my master!

  • http://www.junowebdesign.com web design nottingham

    interesting history lesson, nice pics too. appreciated :)

  • http://www.saxyjorge.wordpress.com saxyjorge

    GREAT POST! Thank you for an awesome read and good history lesson! :DDD

  • http://rolling-webdesign.com Theo

    Nice history lesson, thanks for the informative article, great !

  • http://www.lead411.com/Lori_Austen_3115984.html Lori Austen

    Its nice post,interesting as well.Thanks alot for sharing.

  • http://ljdpaving.com/ block paving derby

    the ampersand is epic, but not the bread yucks

  • http://www.google.com samanta

    thanks for tis inf