By Paul Airy on Wednesday, 22 February 2017
Category: Email Design

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?

Title: 5 HTML Typography Tips
by
About: Email Typography
Audience: Email Designers
Publisher: OnlyInfluencers.com
Copyright 2017, Only Influencers, LLC
Leave Comments