2 minutes reading time (475 words)

Paul Airy: 5 HTML Typography Tips

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
 

Comments

No comments made yet. Be the first to submit a comment
Already Registered? Login Here
Guest
Sunday, 16 December 2018
Supercharge Your Email Marketing Programs

Stay On Top of Your Game

The Free OI Newsletter Delivered to your Inbox Each Week

Subscribe to Get:

  • Cutting-Edge Email Marketing Tips and Tricks
  • Product Reviews
  • The Latest Email Marketing Jobs
  • Industry News