Results appear at bottom of page

Paul Airy

Email Designer, Developer, Author and Speaker at Beyond the Envelope

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
Monday, 29 May 2017

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

Email automation is not the panacea for email marketing that many articles seem to suggest.

The story goes “buy a leading edge automation platform” and your email marketing is no longer spam and strategy is improved double quick.

I’ve never seen this to be true and have certainly spoken to too many email marketers who have found out it’s not true - the hard way.

Email strategy is not created by buying some cool tech.

The Big Lebowski

Google recently announced that they will be supporting media queries within their Gmail platform which is great news for the email community. I was ecstatic when I heard the news and I can only imagine the cheers (and tears) of joy when other email developers around the world were notified as well. Although this update has not been released just yet, Google has hinted that it will be in place by the end of 2016.

There were great minds, quality content, and inspiring discussions at the Email Innovations Summit in Las Vegas (May 17–19, 2016). Big kudos to Bill McCloskey and the Only Influencers community for creating a new space where trends, challenges, and opportunities in the email marketing world can openly be discussed.

Subscribe to the Only Influencers Newsletter
  • Email Marketing News
  • Latest Email Tool Reviews
  • Email Marketing Jobs
  • Top Email Thought Leaders