December 1, 2011

Making Superscript Tags Work In Email

Often in marketing emails we need to apply caveats to pieces of copy, linking to terms and conditions below or on a separate page1. However, just using the <sup> tag to superscript text can cause issues with line height in certain email clients and browsers.

The following style, when applied to <sup> tags, will fix these issues.

<sup style=”line-height:1; vertical-align:baseline;_vertical-align: bottom;position: relative;bottom: 1ex;font-size:11px !important;”>2</sup>

1 like that caveat there.

  • Ting Miao

    One problem though: some email clients often strip out any styles defined in tags like , or …

  • Guest

    I’ve my doubts about this… I’m curious to know which email clients have you tested and found this technique works on?

  • Duncan

    Doesn’t work on gmail or hotmail, just drops the superscripted text to the baseline.

  • http://www.facebook.com/jenashley04 Jennifer Cudmore

    This is the exact thing that I need help with right now. This is the exact code that I use and it doesn’t work. I wish someone out there could figure this out!

  • franio

    works fine on OE2007 but not quite as expected on new Firefox gmail

  • MAILER

    Why even bother using at all? Just use a span tag, with a font-size and a vertical-align set to about half of the font-size.

  • http://www.anythingimpossible.com David Condrey

    For extended compatibility you can dumb this code down even further without using CSS at all.

    Trademark

    TM

    Symbol.

    Or you can go the easy route.

    Trademark™ Symbol.

  • http://www.valeriopierbattista.com/ Valerio Pierbattista

    thanks!!! saved my day !! tested this on gmail, mail, yahoo, hotmail and some pretty outdated outlook