Using HTML symbol entities in email

At a time when a considerable percentage of email recipients choose to have images not display, or turned off by default in their email clients, some rather interesting techniques to combat image blocking have started to appear. None of these are capable of forcibly displaying images, of course, but all use good old fashioned HTML to create visual effects that would otherwise have you scrambling for Photoshop.

One of these curious techniques is the use of HTML symbol entities, as recently discussed on Web Designer Wall. Once the domain of unusual text and ASCII art, they provide a creative way to use symbolism and icons in HTML design without the overhead of images. However, a word of caution before you launch into filling your emails with ♘‘s and ☂‘s, as we discovered that they can be not only unreliable, but can render all aliased (read: nasty) in operating systems other than OS X.

HTML symbol entities are characters that are added to your HTML source code. The most commonly used (and misused) examples are quotation marks (eg. ’) and ampersands (&). However as Web Designer Wall pointed out, there are lots of other really obscure entities like ☣ that you may not know about, but are potentially an HTML alternative to images when used as navigation icons (eg. ✓) or illustrations. As well as avoiding the image blocking issue, characters are faster-loading than images, scale according to font size and can be styled using CSS effects like color and text-shadow. However, as cute as we found them to be, their behavior in email clients is sadly, quite unpredictable.

Testing symbol entities in email clients

As the holiday season has just passed, I decided to test out my favorite entity, ☃ (snowman) in a very simple holiday-themed email for our favorite company, ‘ABC Widgets’. Please don’t knock my 5-minute design skills here, we’re testing characters after all.

Things were looking fine in Apple Mail:

{title}

And perhaps even flamboyant in Windows Mail (due to font-substitution):

{title}

But as you can see, the moment I changed operating systems, my snowman and body copy weren’t looking so glamorous after all. Gone was the nice text-shadow css attribute, hello aliasing. But even worse was to come with AOL Web, which simply returned the ‘square of no comprende’:

{title}

What a bad look. The snowman didn’t render in Outlook 2000, 2003, Express and XP, but surprisingly, it did display in Outlook 2007. In a similar vein, things were grim for Lotus Notes 6 & 7, but fine for version 8.

Hope is not lost

Despite this early failure, I found that there were a few unusual HTML symbol entities that did persevere throughout the tests. These included ♂ ♀ ♠ ♣ ♥ ♦ . Sadly, the impressive chess symbols, ♔ ♕ ♖ ♘ didn’t make it. The good news is that the use of characters doesn’t seem to affect your spam score, so once you pick one that works across the major clients, use it at your leisure.

There are countless entities you can use, however we highly recommend using our email client test when using the less-common ones in your extended character-set masterpiece. In so much as the use of symbol entities may be largely trail and error, it certainly offers designers the potential to add imagery to their emails, without worrying about having them blocked. In all cases, your best bet is to stick to symbols featured in the W3C list and test thoroughly.

Do you use unusual HTML symbol entities in your emails? Let us know how you use characters to create interesting effects in your designs, we’re keen to see more examples of this in the wild. All the best with your image-free design! ♥♥♥

Posted by Ros Hodgekiss

12 Comments

  • Itransition
    7th January

    It’s rather interesting is it possible to increase the number of HTML-entities for graphic images in the text? These may be useful in case of printing formulas, it’s better than sending formulas via images or attached .doc files

  • Rich
    7th January

    I was thinking of giving this a try the other day.

    Once again Campaign Monitor got there first! ;)

    Thanks for the info.

  • Ros Hodgekiss
    7th January

    Hi Itransition, a lot of these entities are mathematical symbols, so yes, formulas are definitely a case in which they can be used.

    I’d love to see creative examples of their use, too - perhaps it’s because I’m a big fan of ASCII art!

  • Rene
    8th January

    interesting idea. Thanks for sharing!

  • Jeff Ente
    11th January

    ..wonder what the spam filters think of these symbols?

  • Ros Hodgekiss
    11th January

    Hi Jeff, the spam filters didn’t seem to mind. I ran a spam test on this email (with a whole bunch of random symbols tacked on the bottom) and I still passed 100%. Let me know if you receive a different result.

  • Meaux
    29th August

    When someone repeatedly uses an = mark after their name in an email, what does this mean????  Thanks!

  • Ros Hodgekiss
    1st September

    Hi Meaux, could you kindly give us an example? My only guess is that it could be one of those occasional glitches in MIME-encoded email, but I’d have to see an example to be certain of this.

  • David Crisler
    11th January

    Does anyone know if the ‘star’ symbol works across email clients? (★) I’d rather not have to pay $5 to run the test and find out if someone already knows the answer in advance.

  • Ros Hodgekiss
    11th January

    Hi David, the following character entities work in every client except Lotus Notes 6, 7 and Symbian S60. Remove the spaces and they should work.

    & # 9734 ; (white star)
    & # x2605 ; (black star)

    Enjoy!

  • Yepsen
    3rd May

    ✓ - I realize I’m late to the party here, but w/o spending $5 - does the “✓” (or other checkmark) work fairly reliably?

  • Ros Hodgekiss
    3rd May

    Hi Yepsen, it varies from client to client, but from memory, I remember this one working in most of the major ones. By the way, it’s free to start an account and send to up to 5 email addresses, so feel free to give it a shot :)

Sign up for free.
Then send campaigns for as little as $9/month

Create an account