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!
From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.Get started for free