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!
Posted by at
Labels: , , ,

11 comments:

  1. BillMalcolmFebruary 25, 2013 at 8:45 AM

    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. The Email DudeFebruary 25, 2013 at 9:46 AM

      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. AnonymousApril 6, 2013 at 9:07 PM

    Thank you, this worked great!

    ReplyDelete
  3. UnknownMay 16, 2013 at 1:39 PM

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

    ReplyDelete
  4. Tim KurzJune 11, 2013 at 8:59 AM

    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. UnknownNovember 14, 2013 at 9:35 AM

    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
  6. AnonymousApril 28, 2015 at 2:46 AM

    Thanks for this. I'd just started to get to get to the point I was trying lots of random things like span tags when I came across this. It saved me a lot of work.

    ReplyDelete
    Replies
    1. AnonymousApril 28, 2015 at 2:58 AM

      Ohh and I forgot to mention. If you use media queries and increase the font size on mobile like I was doing you also need to increase the sup vertical-align value.

      e.g :
      <p>Some content<sup>2</sup> goes here with a disclaimer tag</p>
      <style>
      @media only screen and (max-width: 480px) {

      p[class=bodyContent], p[class~=bodyContent], font[class=bodyContent], font[class~=bodyContent]  {
                font-size: 22px !important;
                line-height: 125% !important;
              }
         p[class=bodyContent] sup, p[class~=bodyContent] sup, font[class=bodyContent] sup, font[class~=bodyContent] sup {
            vertical-align: 8px !important;
         }

      }
      </style>

      Delete
  7. RockvilJune 9, 2016 at 8:47 AM

    This was a great help. I used elements of it to create mine. Since this is an old post, here is my new code:

    tr
    td align="left"
    div style="font-size: 34px; color: #007dc3; font-weight: bold;">All, for your one.sup style="font-size: 12px; line-height: 0; vertical-align: 12px;">SM/sup>/div>
    /td>/tr>

    I had to remove some of the starting inequality symbols to post to this thread. Won't accept html.

    Ran through litmus and there are some font-size differences, but expected when using 'em'.

    ReplyDelete
  8. BoydMay 17, 2017 at 4:49 PM

    What about subscripts ?? Any solution for this? Any update to this code now that the year is 2017?

    ReplyDelete

Subscribe to: Post Comments (Atom)