What you need to know about typography in email

Arthur Koch, a creator and typesetter for emails, shared a blog post on Medium about why typography in email newsletters is so important and should never be forgotten.


At the moment I am working on a completely new version of my wonderful framework for typesetting letters and typography is a very important aspect. I’ll tell you about the main points.

Plain / text

There is a widespread belief among the tech-savvy population that html emails are to die for. But this opinion has several disadvantages:

  1. We cannot limit the line width for a more comfortable reading of the letter.
  2. We cannot use social media icons and photographs that facilitate communication with the reader.
  3. We cannot send marketing bullshit

Limiting line length while maintaining responsiveness without media queries

<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center"><tr><td>
<![endif]-->
<table width="600" style="width:100%; max-width:600px;" align="center"><tr><td>
...
</td></tr></table>
<!--[if (gte mso 9)|(IE)]>
</td></tr></table>
<![endif]-->

Fonts

Each platform (from which the letter is viewed) has its own default fonts, which is not always convenient and appropriate:

  • Windows: Times
  • Windows Phone: Segoe
  • iOS and OSX: Helvetica on older versions, San francisco on new
  • Android: Roboto

Leaving this set native is not very practical, since the Times gets out of the ordinary by the presence of serifs. Therefore, as a standard solution, usually the family is chosen Arial, Helvetica, sans-serif; But this option is rather stupid, since Arial is present on all platforms, and Helvetica is not present on Windows at all. Therefore, we will not get Helvetica anywhere.

I suggest using a more interesting option:

font-family: '-apple-system', 'roboto', Helvetica, Arial, sans-serif;

As a result, we get conditional nativeness without the disgusting Times.

Formatting

Text formatting should be specified for block elements of headings, paragraphs, lists, and table cells. You can format inline elements, but you should avoid this, since some antediluvian clients work out this moment poorly.

When specifying formatting, it is important to specify the maximum number of styles for elements in order to avoid native surprises.

Headers:

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: '-apple-system', 'roboto', Helvetica, Arial, sans-serif;
    display: block;
    font-weight: bold;
    Margin: 1em 0;
    text-align: left;
}
h1 {
    font-size: 24px;
    line-height: 27px;
}

Blockiness is set for this because, for example, in the light version of gmail, headers are inline. Margin is capitalized in order to bypass the “clipping” of this property in some versions of Outlook.

All of the above also applies to paragraphs of text.

Links

The link looks like this:

<a href="https://infogra.ru/design/#" target="_blank" style="color:#ff9900 !important; 
text-decoration:underline;"><span style="color:#ff9900;">Click Me</span></a>

This design protects links from being painted in the native colors of email clients.

Inscriptions

It is preferable to indicate outlines of the text with short html tags like , , while describing these faces inline using CSS

<b style="font-weight:bold;">Bold Text</b>
<i style="font-style:italic;">Italic Text</i>
<s style="text-decoration:line-through;">Deleted Text</s>

On modern platforms and email clients, the font-weight can be varied from 100 to 900 if the font allows it. For older platforms, it is recommended to leave the fallback:

font-family: '-apple-system', 'roboto', Helvetica, Arial, sans-serif;
font-weight: normal;
font-weight: 300;

Lists

We can use standard bulleted lists in letters with only one limitation. No need to try to format or hide bullets. It won’t work half the time. If it is necessary to make colorful lists, they need to be imitated with a complex transparent table.

Alignment

You can align block elements in the following ways:

<div align:center;>Centered Text</div>
<p align="center">Centered Text</p>
<p style="text-align:center;">Centered Text</p>
<h1 style="text-align:center;">Centered Text</h1>
<td align="center"><p align="center">Centered Text</p></td>
<td style="text-align:center;">Centered Text</td>

And inline and tabular like this:

<center>Centered Text</center>
<center><table align="center">....</table></center>

Right alignment is generally undesirable for the simple reason that it doesn’t fit in responsive emails. The problem will have to be solved by media queries. And to typeset letters on media queries is amateurishness.

There is only one pertinent example of using right alignment – tabular data:

<table width="100%">
<tr>
<td>Black Dildo</td>
<td align="right">80 USD</td>
</tr>
</table>

Block model

There is a legend that letters need to be typeset exclusively with tables, but this is not the case. One has only to follow a number of rules:

  • Formatting for block elements and table cells
  • Vertical Margin (capitalized) for block elements
  • padding for table cells only
  • All styles are inline

Questions?

If you have any questions, you can send them to me at [email protected], I will answer without problems. And with a large number of them, I will be happy to write an FAQ.

Source: medium.com

Author: Clark Douglas

Leave a Reply

Your email address will not be published. Required fields are marked *

2021 © Ganzio Design. All rights reserved.