Superscript and Line Heights!

A lot of the designers that I've worked with fail to understand that it's pretty much impossible to make an email render like a print piece in all of the different clients. There is a way around this, just slice it all out as an image and boom, exact in all browsers. However I think emails that are just images are lame, and know that there are chances of it not making the inbox if it's too image heavy. PLUS, you can't really read the content (excluding use of alt tags). In my opinion it's just sloppy.

Today I'm going to share a line-height / superscript fix that I found that works pretty well in all client's.

<td style="font-family:Verdana, Geneva, sans-serif; font-size:10px; line-height:12px; color:#000000;">
Copy, Copy, Copy<sup style="font-size: 8px; line-height: 0; vertical-align: 3px">&reg;</sup></td>

I recommend making the line height 2px larger than the font size, and then for sup's making them 2 pixels less than surrounding font. Defining the line-height for the sup as 0 prevents the uneven space between each line of copy, and the vAlign moves the superscript up just enough in all of the diff clients (including Outlook 2007).

Here's an example:

Copy, Copy, Copy® Copy, Copy, Copy Copy, Copy, Copy Copy, Copy Copy, Copy, CopyCopy, Copy Copy, Copy, CopyCopy, Copy Copy, Copy, Copy®

W/out the fix:

Copy, Copy, Copy® Copy, Copy, Copy Copy, Copy, Copy Copy, Copy Copy, Copy, CopyCopy, Copy Copy, Copy, CopyCopy, Copy Copy, Copy, Copy®

One last suggestion is to take advantage of the mso-line-height-rule:exactly; within each of your TD's this will be ignored by all clients except outlook, but forces outlook to keep the line height you defined.

Here's an example of how to use it:

<td style="font-family:Verdana, Geneva, sans-serif; font-size:10px; line-height:12px; mso-line-height-rule:exactly; color:#000000;">

Copy, Copy, Copy<sup style="font-size: 8px; line-height: 0; vertical-align: 3px">&reg;</sup></td>

Hope this helps someone!