Design

What you need to know about typography in email

Arthur Koch, a creator and typesetter for emails, spoke on a blog 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

...

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 set for block elements of headings, paragraphs, lists, and table cells. You can format inline elements, but you should avoid it, since some antediluvian clients work 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 to bypass the “cut” of this property in some versions of Outlook.

All of the above also applies to paragraphs of text.

Links

The link looks like this:

Click Me

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

Inscriptions

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

Bold Text
Italic Text
Deleted Text

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:

Centered Text

Centered Text

Centered Text

Centered Text

Centered Text

Centered Text

And inline and tabular like this:

Centered Text
....

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 the use of right alignment – tabular data:

Black Dildo 80 USD

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



Leave a Reply

WorldOfWarcraft Shadowlands Boosting services