Menu Search
Jump to the content X X

Today, too many websites are still inaccessible. In our new book Inclusive Design Patterns, we explore how to craft flexible front-end design patterns and make future-proof and accessible interfaces without extra effort. Hardcover, 312 pages. Get the book now →

Ampersands With Attitude

By Huw Wilkins

Ampersands have long been the character in a typeface1 with which typographers2 can indulge themselves. Sweeping curves, flirtatious finishes and bold statements – these are the things that make ampersands an exciting character to use and, better still, to design. [Content Care Oct/20/2016]

Ampersands with attitude?3

Can you spot what typeface is used to display the ampersand in the image above? Large view4

There are, however, two problems. The first is that the English language gives us few situations to use such a daring character. We seldom get to show off these beautiful examples of typography. The second is that the poor little ampersand so often goes unnoticed.

Allow me to share with you my top 10 different styles of ampersands. Some are similar, but each have their own personality. In an effort to limit my sample selection, I have only chosen ampersands from freely available sans fonts.

1. Nilland Link

Nilland

Here we have a pretty run-of-the-mill ampersand. It comes from the font Nilland5. You see this style in common fonts like Helvetica and Arial. It has the classic one piece figure-of-eight body. The little horizontal tail finishes this character off nicely, it seems to give a certain perkiness that it otherwise might have lacked.

2. Bitstream Vera Sans Link

Bitstream

You might recognise this style as well. This particular character comes from Bitstream Vera Sans6. There are a few ways to look at this ampersand, and this is one of the reasons this character works so well. It looks like the ampersand above, only with the top right side of the figure-of-eight cut out (yet it actually ends up not looking very much like the above character). It also looks like a sweeping back-to-front 3 with a extension from the middle (you can see this better if you turn your head so your left ear is pressed against your shoulder).

3. BPmono Link

BPmono

This is where things start to get a little weird. Is it a ‘g’ gone wrong? Is it a swan? Is it a fishing hook? Actually it’s the ampersand from BPmono7. I probably shouldn’t have likened it to a swan and a fish hook, because now you’re probably having a hard time seeing it for what it is… a sweet little ampersand with a cute tucked in style.

4. Kontrapunkt Link

Kontrapunkt

Here we have another style entirely. It’s an evolution of what you might see in handwriting. However, on paper the line would be drawn down the middle of the ‘E’ shape. This is the font Kontrapunkt8, so it’s been given angles and a lovely boldness.

5. Diavlo Link

Diavlo

Diavlo9 is a great font with nice tips, and this character is no exception. At this size it looks like it has an oriental brush stroke style.

6. La Peruta FLF Link

LaPerutaFLF

Oh! I’m glad someone managed to prop up that eight before it fell over… wait let’s make that into an ampersand. LaPerutaFLF10, with a name like that, you have to be cheeky.

7. Skia Link

Skia

Another more classical approach from Skia11. The nice variation here is how the two halves intersect in that off-set way.

8. Tuffy Link

Tuffy

And. There’s no confusion here. It knows what it’s there to do and does it. Somehow, though, in this font it looks great. Nice one, Tuffy12.

9. Lacuna Link

Lacuna

I’ve decided to finish off with two italicized ampersands. This one is from Lacuna13 and looks like some kind of crazy ‘e’. Somehow, with that cross bar and the horizontal plate at the end, it still ends up feeling like an ampersand.

10. Fontin Link

Fontin

And last, but certainly not least, here is the italicized ampersand from Fontin14. It has a cheeky bulbous bottom and that classic plate finish.

So there we have it. 10 interesting takes on the ampersand. I hope you’ve been educated, I hope you have fallen in love with typography a little more, and I hope that next time you are creating a typeface you will be inspired to make an ampersand with attitude.

About the author Link

Huw Wilkins is the lead creative for a digital agency. He has a passion for user experience, usability, interfaces and good design. He also has a background in development. His little corner of the web is at huwshimi.com15.

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2011/03/how-to-choose-a-typeface/
  2. 2 https://www.smashingmagazine.com/2014/06/hands-on-sigmund-freud-typeface-making-fonts/
  3. 3 https://www.smashingmagazine.com/images/ampersands/main-large.gif
  4. 4 https://www.smashingmagazine.com/images/ampersands/main-large.gif
  5. 5 http://www.dafont.com/nilland.font
  6. 6 http://www.dafont.com/bitstream-vera-sans.font
  7. 7 http://www.abstractfonts.com/search/bpmono
  8. 8 http://www.kontrapunkt.dk/news/ddprize_typeface_of_the_year_2004#downloads
  9. 9 http://www.exljbris.com/diavlo.html
  10. 10 http://www.abstractfonts.com/font/12371
  11. 11 http://www.abstractfonts.com/font/7083
  12. 12 http://www.dafont.com/tuffy.font
  13. 13 http://www.dafont.com/lacuna.font
  14. 14 http://www.exljbris.com/diavlo.html
  15. 15 http://huwshimi.com/

↑ Back to top Tweet itShare on Facebook

Advertisement

Some contributors with just a single posting. To learn more look at our ebook.

  1. 1

    NIce Top 10 :) I really enjoyed it.

    1
  2. 2

    Well written and interesting. choices/topic. Really had the feel of a SM post. This post is a strong contender.

    1
  3. 3

    Really liked this, so many different variations on one little character.. Thats why I love typography..

    0
  4. 4

    Decent article, rated good for the typography exposure. Well-designed characters are always a plus in my book! :)

    0
  5. 5

    The first one is the only one that actually resembles an ampersand! The others either bear enough resemblance to other characters to cause confusion, or don’t look enough like an ampersand to be easily identifiable and could cause readers to wonder what character it actually is.

    Flash design is all well and good, but function must come first, no matter how funky the form is.

    0
  6. 6

    great examples
    i love the ampersand, and use it with fun
    also i do write them a lot per hand… just tried… i guess i failed… weird… first try came out a b…

    0
  7. 7

    You mention that number 9 looks like some kind of crazy e – it should! An ampersand is just a contracted version of the letters “et”, or French for “and”

    0
  8. 8

    Great article!

    0
  9. 9

    there must be dozens of these ‘ampersand’ articles, all of them simply copying the same ampersands from post to post.

    again, hard to believe these were among the ‘top 10’ articles selected?

    also, we’ve been seen these top 10 articles for days now, so it looks more like top 20 than top 10, is smashing magazine running on fumes now that it resorts to these quick, save the day kind of posts?

    hhmm…

    0
  10. 10

    Vitaly Friedman & Sven Lennartz

    August 15, 2008 7:41 am

    @Hector (#9): these are one of the last posts of the contest. Next week we’ll get back on track.

    0
  11. 11

    i was hoping for actually designed ampersand… not just characters from a bunch of fonts smashing mag has already posted…

    I do have my windows character map

    I’ve seen plenty of ampersands that have been modified and improved on in print / graphic design… why not focus on those

    1
  12. 12

    Is this the last guest article?
    I kinda expected better…

    0
  13. 13

    Gordon [#3] is right on. Typography can be a wonderful way to make a statement. But when that statement is muddled by your typography being nearly unreadable or confusing, you’ve lost the whole point. Only a few of those ampersands even seemed like ampersands, and that’s to someone who knew this was an article on ampersands.

    0
  14. 14

    not French, but Latin

    0
  15. 15

    not wothy of my digg…

    0
  16. 16

    @hector, its the top 20 top 10 lists week ;)

    0
  17. 17

    I kinda disagree with Gordon & Josh. I’d admit that, on their own some of those ampersands are funky enough to be a little confusing. But I believe that all of these are readily identifiable as ampersands when viewed in context.

    I’m drawn to ampersand as an easy, fun, & funky way to give your content a bit more of a personal & casual feel. I’ve tried not to overdo it, but the ampersand is peppered throughout my 2Dolphins site and used often within my blog posts.

    0
  18. 18

    “Can you spot what typeface is used to display the ampersand in the image above?”

    So what typeface was used on the large orange ampersand…did I miss the answer to this??

    0
  19. 19

    Actually, the second from the bottom most closely resembles the “traditional” ampersand, which is nothing more than a ligature for the latin “et al”. The word ampersand comes from ‘and per se and’.

    In a well designed font, the ampersand can be as “funky” as one wants, but should still fit in with the basic structure of the font (contrast, proportions, shape, etc…). If done right, one will be able to perceive it is an ampersand from context and from the shapes of other glyphs in the font.

    To myself, and from what I’ve heard from several type designers (of which I am not…yet), the ampersand is one of those glyphs that can be a personal “signature” for a font. Not to say one should sacrifice the function of the font (which may not always be just for reading in books), but it is a glyph designers tend to like having fun with.

    0
  20. 20

    I like this article. One of the more uncommon topics.

    0

↑ Back to top