Fine tuning your HTML typography for mobile S L link View in your browser heading level 1 Type E: heading level 2 07. The Mobile Issue graphic i Phone 2017 marks the 10th anniversary of the i Phone. The percentage of subscribers that link 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. heading level 3 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. heading level 3 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’. heading level 4 HTML less td style equals padding left:20px; padding right:20px greater Inserting typographic margins of 20px, using padding. heading level 4 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. heading level 3 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 less td greater or less div greater they’re contained within, utilising the at media query you’ve created to trigger responsive styling. heading level 4 CSS at media screen and (max device width:575px), screen and (max width:575px) dot right Column padding top:10px important Inserting paragraph spacing into a right hand column, using padding, utilising a at media query. link graphic A Type of Email' book cover. 10 percent OFF A Type of email. Use offer code typee 080217 star link Buy now star Valid until midnight GMT, 8th February 2017 heading level 3 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. heading level 4 CSS at media screen and (max device width:575px), screen and (max width:575px) h 1 font size:50px important heading level 4 HTML less h 1 style equals margin:0; font weight:lighter greater Headline less slash h 1 greater Reducing the font size of a headline, utilising a at media query. heading level 3 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. heading level 4 CSS at media screen and (max device width:575px), screen and (max width:575px) p font size:16px important; line height:24px important heading level 4 HTML less p style equals margin:0 greater Paragraph of text dot less slash p greater Enlarging the font size of a paragraph of text, utilising a at media query. heading level 3 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 ( and nbsp ). This will force the last two words to appear together, and so resolve the occurrence of the widow. heading level 4 HTML less p style equals margin:0 greater Paragraph of text with a potential widow at the and nbsp end dot less slash p greater Joining the penultimate word to the widow with a and 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 link Litmus or link Email on Acid dot heading level 3 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. heading level 3 Fix Apple links. While I covered this in the link Blue Link Issue’ , there’s been some changes in the styling of these links in i OS 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 link web fonts for example, or leveraging a devices link call functionality dot 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 link Litmus or link Email on Acid , so that your experience reflects theirs. black square Type E: is an email newsletter devoted to typography in email, created by Email Designer and Developer, Paul Airy. Please link email your thoughts, suggestions and questions dot Thank you for subscribing! Beyond the Envelope Trademark Copyright Paul Airy, 2017 plus 44 (0) 7962 177 477 (International) 07962 177 477 (UK) at Paul Airy link Change your preferences link Unsubscribe If you want to link resubscribe , you know where to reach me!