Broken line spacing when using superscript (Yahoo/Hotmail Issue)

Hey all,

Does anyone have any tips when coding superscript for email newsletters?  My client uses insane amounts of superscripted characters (usually to reference the legal fine print) and I've been having to resort to using images instead of just coding them with regular characters otherwise it will cause the line spacing to go crazy.

My code works fine in AOL Mail and Gmail, but seems to be disregarded in Yahoo Mail and Hotmail (I assume because they're stripping out the CSS?)

I have this in the <head>:

<style type="text/css">
sup {
vertical-align: baseline;
position: relative;
bottom: .33em; } 

Along with this In the <body>:


I've also tried inline code, but that still doesn't work (and causes issues in Gmail to boot!):

<sup style="vertical-align: baseline; position: relative; bottom: .33em;">&reg;</sup>

Any help would be greatly appreciated!


PMcKern, 4 years ago

This is an old one, but for those who go searching for this issue like I did: I'd leave this one alone.

I found a suggested fix of specifying different vertical alignment (top) and manually specifying a text size for <sup> tags in the CSS, but the results come out broken one way or another, depending on what different clients do.

With the change of alignment, some end up looking more like you're adding a digit to your numbers instead of multiplying them to a certain power or indicating a note.

If you adjust the size, some automatically shrink the type even more on top of that, resulting in illegibly small characters.

I think that to get this one universally right, it would require more client-specific hacks than what is probably available....

PMcKern, 4 years ago

And I guess that was pretty much what you were talking about.... Anyway, it does look like a bad idea.

BThies BThies, 4 years ago

<span style="vertical-align:super; font-size:83%; line-height: 0.5em;">&copy;</span>

That'll get as close to perfect as possible for most clients except Outlook 2003.

or you can try:

<sup style="font-size:90%; line-height: 0.5em;">&copy;</sup>

Brian Thies
Professional Email Developer
Thies Publishing

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free