Making lines of headings have no space between them

Hey all,

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:

http://i.imgur.com/lPT1Q.jpg

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.

Any ideas?

Stig Stig, 1 year ago

Hey bjbk,

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!


The Campaign Monitor Blog – HTML email smarts to go with your good looks.
Redferret, 1 year ago

how does this render across clients? and whats the benefit of mso-line-height over just line-height?

Stig Stig, 1 year ago

Hey Redferret,

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.


The Campaign Monitor Blog – HTML email smarts to go with your good looks.
Redferret, 1 year ago

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

Stig Stig, 1 year ago

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 :)


The Campaign Monitor Blog – HTML email smarts to go with your good looks.
bjbk, 1 year ago

@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

Stig Stig, 1 year ago

Excellent, hopefully it'll do the trick!


The Campaign Monitor Blog – HTML email smarts to go with your good looks.

Sign up for free.
Then send campaigns for as little as $9p/m

Create an account