Thursday, June 2, 2011

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!

7 comments:

  1. Thanks. I was having problems with ® and ™ moving to the center when I would shrink the font-size of the sup tag, but had not tried adjusting the vertical-align attribute. Especially helpful with larger font-sizes, though I prefer to use a percent value for SS'ed font-size.

    ReplyDelete
    Replies
    1. Thanks for the comment! Yah, the exception here is Outlook. I've never been able to get it where the "designer was happy" everywhere, but I found that this was the best way when line-heights are so important. I actually don't see too many emails where they sup/span rballs, and I always use ™ even if the reg; is a bit higher using this v-align. What I've found best is 2 pixels smaller than surrouning text, or using the font-size:smaller for the sup works about 95% of the time...

      Delete
  2. Thank you, this worked great!

    ReplyDelete
  3. Great thanks... you give me right to go to bed !!! thanks
    George

    ReplyDelete
  4. Awesome fix and EXACTLY what I needed to make Outlook do the right thing! Just sorry I wasted so much time on my own ineffective "fixes" before I tried yours. Thanks!

    ReplyDelete
  5. Thanks for this. Id like to add that not just in "sup" styles, LINE HEIGHT MATTERS. especially with tricky table nesting 2px line-height is the bare minimum for text not getting strangely chopped in older versions of Outlook. Source: litmus tests.

    ReplyDelete