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, 3 years 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, 3 years ago

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


Gmail app apologist
Stig Stig, 3 years 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, 3 years 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


Gmail app apologist
Stig Stig, 3 years 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, 3 years 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, 3 years ago

Excellent, hopefully it'll do the trick!


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

Join 150,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098