Type E: 07. The Mobile Issue.
Welcome to Type E: an email newsletter devoted to typography in email.

07. The Mobile Issue

iPhone

2017 marks the 10th anniversary of the iPhone.

The percentage of subscribers that open their emails on their mobile device continues to remain high, and HTML typography plays an important part in ensuring their mobile experience is a great experience.

In this issue, I’ll look at a few techniques to help you fine-tune your HTML typography for mobile.

Lay out your content within a single column grid.

Lay out your content within a single column grid, stacking each element – the headline, subheadings, paragraphs of text, lists, buttons and images, one above the other. If you’re including a data table, ensure its content will fit comfortably within the table data cells.

 

Insert typographic margins.

Even when laid out within a single column grid, content can be very difficult to read, particularly a paragraph of text, if it’s too close to the edge of a mobile devices’ display.

Insert typographic margins, of equal widths, to the left and right-hand sides of the content, using padding, to give it space to ‘breathe’.

HTML

<td style="padding-left:20px; padding-right:20px;">
Inserting typographic margins of 20px, using padding.
 
 

Why use padding for typographic margins and not margin for typographic margins?

Within the CSS Document Object Model, padding is the property that ‘wraps’ the content, and as such is the logical property to use for inserting typographic margins. margin, on the other hand, ‘wraps’ the border, the padding and the content, and while it can be used to insert typographic margins, doing so prevents you from using the border property, should you need to.

 

Group related content together.

Group related content together, and ensure the content in each group is relationally spaced as you scroll down. Subheadings should be closer to the paragraphs of text they relate to than to the content that precedes them. Buttons should be closer to the paragraphs of text they relate to than to the content that follows them. Each group of content should be separated enough to ensure the subscriber understands where it begins and where it ends.

 

It’s particularly important to bear this in mind when you’re working with subheadings or paragraphs of text that were previously positioned at the top of a centre, or right-hand column on tablet or desktop. As they’re unlikely to have any paragraph spacing above them, you’ll need to insert some by applying padding to the top of the <td> or <div> they’re contained within, utilising the @media query you’ve created to trigger responsive styling.

CSS

@media screen and (max-device-width:575px), screen and (max-width:575px) {

.rightColumn {padding-top:10px !important;}

}
Inserting paragraph spacing into a right-hand column, using padding, utilising a @media query.
 
 

Reduce the font-size of the headline and subheadings.

Reduce the font-size of the headline and subheadings to a point where the single column grid can comfortably contain their longest word. If a word is wider than the single column grid, it may break the layout and the mobile experience.

CSS

@media screen and (max-device-width:575px), screen and (max-width:575px) {

h1 {font-size:50px !important;}

}

HTML

<h1 style="margin:0; font-weight:lighter;">
Headline</h1>
Reducing the font-size of a headline, utilising a @media query.
 

Enlarge the font-size of paragraphs of text.

Enlarge the font-size of paragraphs of text, so that they’re legible on Retina or high-definition displays, which typically reduce their visual size.

CSS

@media screen and (max-device-width:575px), screen and (max-width:575px) {

p {font-size:16px !important;
line-height:24px !important;
}

}

HTML

<p style="margin:0;">
Paragraph of text.</p>
Enlarging the font-size of a paragraph of text, utilising a @media query.
 

Fix widows.

A widow is a typographic name for a word that appears on its own, on the last line of a paragraph of text. The space it creates to its right, combined with the paragraph space that follows it, can disrupt the subscribers flow, as they read down the email.

Paragraph of text with a potential widow at the end.

In this paragraph of text, the word ‘end’ appears as a widow on a viewport width of 545px.
 

To fix a widow, join the penultimate word in the paragraph of text to the widow using a non-breaking space (&nbsp;). This will force the last two words to appear together, and so resolve the occurrence of the widow.

HTML

<p style="margin:0;">
Paragraph of text with a potential widow at the&nbsp;end.</p>
Joining the penultimate word to the widow with a &nbsp;.
 

Paragraph of text with a potential widow at the end.

In this paragraph of text, the word ‘the’ and the word ‘end’ appear together on a viewport width of 545px.
 

Where I would be wary of applying this technique, and where your typographic judgement comes into play, is when the penultimate word in the paragraph of text is a long word, and fixing the widow creates a space on the penultimate line of the paragraph of text, that’s more disruptive than the original space it created. In such instances, I would recommend that you either edit the text, or leave the widow alone.

Paragraph of text with a long penultimate word.

In this paragraph of text, the word ‘penultimate’ and the word ‘word’ appear together on a viewport width of 505px.
 

The ‘widow fix’ works best on short words. You can identify potential widows quickly, using your browser, and on testing tools such as Litmus or Email on Acid.

 

Align text left.

Paragraphs of text are much easier to read when they’re aligned left, as the eye has a point of reference to start reading each new line. There’s a tendency to centre paragraphs of text on mobile, and while this is acceptable on the headline, subheadings and buttons, it creates difficulties elsewhere.

 

Fix Apple links.

While I covered this in the ‘Blue Link Issue’, there’s been some changes in the styling of these links in iOS 10. Some links that used to be rendered as ‘Blue Links’ are now rendered as ‘Grey Links’, but the same technique applies in restyling and disabling them.

In addition to these techniques, there are other ways in which you can enhance the subscriber’s mobile experience, by featuring web fonts for example, or leveraging a devices call functionality. Ensure you keep the subscriber at the forefront of your design and development process, and test on real devices as well as on testing tools such as Litmus or Email on Acid, so that your experience reflects theirs.

Type E: is an email newsletter devoted to typography in email, created by Email Designer and Developer, Paul Airy. Please email your thoughts, suggestions and questions. Thank you for subscribing!

Change your preferences
Unsubscribe
If you want to resubscribe, you know where to reach me!