How to resolve AdBlock issue? Paul Airy: 5 HTML Typography Tips
Paul Airy is the author of "A Type of Email: A handbook for working with HTML typography in email" and will be presenting a Post-Conference Workshop in HTML Typography in Email (Advanced) at this year's Email Innovations Summit.
HTML Typography Tip #01: Use Semantic Tags for Typography
Using semantic tags for typography enables you to restyle text from an internal stylesheet in the <head> of your email, and more importantly, ensure it’s accessible for subscribers using screen readers.
<h1> for your headline:
<h1>Headline</h1>
<h2>, <h3>, <h4> etc. for your subheadings:
<h2>Subheading Level 2</h2>
<h3>Subheading Level 3</h3>
<h4>Subheading Level 4</h4>
<p> for your paragraphs of text:
<p>Paragraph of text.</p>
<ul> and <li> for your unordered lists, <ol> and <li> for your ordered lists:
<ul>
<li>Unordered List Item</li>
<li>Unordered List Item</li>
<li>Unordered List Item</li>
</ul>
<ol>
<li>Ordered List Item</li>
<li>Ordered List Item</li>
<li>Ordered List Item</li>
</ol>
Are you using semantic tags for typography in your email development? If so, have you encountered any challenges in using them? If you’re not using them, what methods do you use to introduce typographic hierarchy into your emails?
HTML Typography Tip #02: Fix the Microsoft Outlook line-height ‘crop’
Microsoft Outlook 2007, 2010 and 2013 will ‘crop’ large text, such as the headline and subheadings if there’s not enough line-height specified. Applying styling to large text, specifying more line-height, within an MSO conditional statement, within the <head> of your email, targeting Microsoft Outlook 2007, 2010 and 2013, will resolve this.
<!--[if mso]>
<style type="text/css">
.h1 {line-height:100px !important;}
</style>
<![endif]-->
<h1>Headline</h1>
Have you come across this issue before? If so, how have you resolved it?
HTML Typography Tip #03: Style Paragraphs of Text with a font-size No Smaller than 14px
14px is the smallest size I’d style the font-size of paragraphs of text, enlarging them to 16px on mobile.
<td style="font-size:14px;">
Do you work with a base font-size? If so, what is it? Do you change it for mobile?
HTML Typography Tip #04: Style Paragraphs of Text with a line-height, One and a Half times the font-size
As a guide (though this will depend on the x-height of the font), styling paragraphs of text with a line-height, one and a half times the font-size, allows enough space for the text to breathe, so it may be read easily.
<td style="font-size:14px; line-height:21px;">
How much line-height do you apply? Do you use pixels, or a different unit?
HTML Typography Tip #05: Use margin to create paragraph spacing
Create paragraph spacing by applying margin styling inside the opening <p> tag.
<p style="margin:0 0 10px 0;">Paragraph of text.<p>
How do you create paragraph spacing? Do you use a pair of <br> tags, or another method?
When you subscribe to the blog, we will send you an e-mail when there are new updates on the site so you wouldn't miss them.