Line spacing and width of emails

Hey Brienne-

Here's a good place to start with some helpful info: Email Editor line spacing

My best play here is to adjust the email editor settings as Joe Reitz points out in the link above. I set mine to <none> for both Email and LP. This piece of functionality will add in a <p> or <div> element inside your editable areas when there are none. I've run into issues with line spacing before when you place your styles on the container element (usually a <div> or <td>) and then Marketo adds in the <p> or <div> element inside the editor b/c of this setting. Unless you've changed it, <p> and <div> are the defaults.

All-together, I've had the most success with not using the <p> element at all in email. We test/launch on 46 different email clients in Litmus and none of them share a 'universal' base for what <p> means -- i.e. some put some space above, some above and below. In my experience this is a sure fire way to end up reasoning that there is a ghost in the machine who is out to make your life difficult, and for some reason, it's haunting your line-spacing.

In an ideal world, your HTML might look something like this on the template:

* for email 1.0 // use class="mktoText" for email 2.0

<div class="mktEditable" id="LargeText_Section1" style="font-size:20px; mso-line-height-rule: exactly; line-height: 26px;">

   Your content here<br>

   One 'br' is for a single line break <br><br>

   Two 'br's will create a blank line of space between "paragraphs" inside an editable area

</div>

... then all you'd see in the editor is the part between the <div>s (the text and the <br> elements).

If you'd like to add more spacing to your text, you can adjust the line-height on the top line. The mso-line-height-rule: exactly is the 'secret sauce' to get Outlook to respect your line-height rules (make sure it comes before the line-height declaration).

** Note: When setup this way, if you add a <p> or a <div> to the inside of the editable area (where the text/br's are now) it will "nest" and the styles you've set up on the template may/may-not come thru on delivery [best-practice is to style just about everything for email and not leave anything up to interpretation]. This however, is a way "override" the template styles locally from within the Editor using the editing interface or by opening the HTML view and adding the code there.

If you'd like to post your code, I'd be happy to take a look and try and help you understand what's going on there and/or Litmus is a wonderful resource for this type of thing.

Good luck!

-Dave

Hey Brienne-

Im not able to follow the link your provided, that points to your machine (file:///C://..... < that's a link to a folder in your "C" drive) but that should be ok. I like to use a program called Skitch to take screenshots (it's free and easy to use) for things like that, check it out when you've got some time, it makes communicating things like this sooooo much easier!

Here is a small section of your HTML code with some content in it. I'd assume this will give you issues in Outlook, so I'll dive in on this and if there is something else that's going on, we can have a look, but a similar solution should help there.

First, you'll want to jump over to that other post in the thread (linked in my original reply) and see about changing your settings for the email editor. You click Admin > Email > Email Editor Settings and should see a pop-up box with choices for your Email and LPs. By default these are set to <p> and <div> -- you'll want to make sure they are set to "none". I highlighted a spot in your code where a <div> may be getting added in this way? What's going on here is that you code up your editable section there (class=mktoText) and these settings go to work "helping" you by adding in a <p> or <div> or 'none' (nothing) around your content if it's not a "block-level" element. Block level elements are things like <div> and <tables> // the opposite in an "inline-element" which are things like <p><span> (content/words/text) and those are what gets "helped" by this setting -- if possible, you want to avoid that b/c it's not predictable unless you've got a sharp awareness for it and some know-how on HTML elements. With this setting set to "none", Marketo will NOT add in the <div> or <p> element around your content (which is now wrapped in the <span> tag).

<td class="primary-font title" style="hyphens: none;-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word; -webkit-hyphens: none;-moz-hyphens: none;-ms-text-size-adjust: 100%;font-family:'Roboto', Arial, sans-serif;font-weight: bold;text-align: center;font-size: 16px; color: #000;border-collapse: collapse;"> 
<div class="mktoText" mktoname="Title" id="title6f3c61bf9-4ef3-471f-b2c7-7bd7ddcba4d2"> 
<div>
<span style="color: #35792a; font-size: 16px;">Employer Solutions Portal (ESP) Newsletter</span> <br /> 
</div> 
</div>
</td> 

So what's this all got to do with line-spacing you ask?

Two things: 

1.  You can't depend on your styles "cascading" down to your nested elements (your content) in email like you can with website (LP) code. Best practice is to be as explicit as possible, as close as possible to the actual content. This would look like copying your styles from the <td> element into <div> that's around your <span> element. I suspect the highlighted <div> was not added intentionally so that can be removed and instead you can paste the <td> styles onto your "mktoText" <div> to modify all the text in that section or onto the <span> to modify just the text wrapped in that span.

2. Try using this "order" to declare your fonts, it's all I've needed to get pixel-perfect line-height in Outlook. Here's an example for a 15px font with 19px line-height:

<div class="mktoText" id="Editable-Text-Area" style="font-size: 15px; mso-line-height-rule: exactly; line-height: 19px;">your text here</div>

The mso-line-height-rule:exactly is the "golden goose" here - I've had alot more success with that than the other mso- and -webkit- declarations.  Here's an updated look at the code (what I'd do) - maybe you can check your editor setting and then put this into play on your template.

<td class="primary-font title" style="border-collapse: collapse;"> 
<div class="mktoText" mktoname="Title" id="title style="font-family:'Roboto', Arial, sans-serif;font-weight: bold; text-align: center; font-size: 16px; mso-line-height-rule: exactly; line-height: 20px; color: #35792a;>
      Employer Solutions Portal (ESP) Newsletter  
</div> 
</td> 

Let me know if you're able to check and update your email settings and what they are/were set to for some context about the extra <div> inside the editable area.

Thanks,

Dave