What I have is three lines of headings at the top of the newsletter - all three lines are different font sizes, but all in caps. What I'm wanting to achieve is that there be no vertical space between each line, so for a crude example, up the top is what I currently have, down the bottom is what I'm wanting to achieve:
The issue I'm hitting is that dropping down the line-height causes outlook to crop the text, and negative margins don't work there either.
This will indeed be a little tricky since Outlook likes to crop text if you reduce the line-height.
Since you've noticed that, it sounds like you may have already discovered the "mso-line-height-rule: exactly;" property, which will allow you to set a line-height in Outlook that's smaller than the font-size.
As you said though, this causes Outlook to crop the text. Usually the top of the letters will be cut off.
To avoid this, I found that you can apply the mso-text-raise property with a negative value, to push the text down a few pixel within the line height it's being cropped to.
Let's say you have this heading:
<h1 style="font-size: 28px; margin: 0; padding: 0;">HEADING 1</h1>
Add mso-line-height-rule: exactly;, set the line-height you want and then adjust the mso-text-raise value accordingly.
<h1 style="font-size: 28px; line-height: 22px; margin: 0; mso-line-height-rule: exactly; mso-text-raise:-3px; padding: 0;">HEADING 1</h1>
In my testing with upper case letters, it seems (line-height - font-size)/2 is a good rule of thumb for the mso-text-raise value, but you'll want to tweak it manually until you're happy.
Let us know how you go!
how does this render across clients? and whats the benefit of mso-line-height over just line-height?
Great question! I should have mentioned that, since mso-line-height and mso-text-raise are Microsoft Outlook/Office specific properties, they won't affect any other email clients. Other rendering engines will simply ignore them, and go by the line-height only.
In Outlook 2007/2010/2013, mso-line-height-rule: exactly; is a flag you can set to make the rendering engine respect the line-height property. Otherwise, I believe it will always use the font-size value as the line-height.
For instance, this screenshot is what
<h1 style="font-size: 28px; line-height: 22px; margin: 0; mso-text-raise:-3px; padding: 0;">HEADING 1</h1> <h1 style="font-size: 28px; line-height: 22px; margin: 0; mso-text-raise:-3px; padding: 0;">HEADING 2</h1>
looks like in Outlook 2007, and this screenshot is what you get if you add "mso-line-height-rule: exactly;" to each heading.
Nice tip, Outlook does support line height but only above the default value so increasing paragraph line height is simple but decreasing has in the past been a pain
You're right, that's a more accurate description. Without "mso-line-height-rule: exactly;", the font-size works as a minimum value for the line-height. Thanks for the clarification :)
@Stig - yeah I've been using "mso-line-height-rule: exactly", but hadn't seen the "mso-text-raise" rule - that's awesome!
Thanks, I'll give that a try today
Excellent, hopefully it'll do the trick!