Developers Club geek daily blog

2 years, 1 month ago
How-to: Typographics in design of email-letters

Researches show that in mail programs to 43% of email-subscribers display of pictures is disconnected. It means that it is possible to inform to them the necessary information by means of email-mailing only if to use the real text in HTML versions of letters.

Thus, this fact does not mean at all that Arial can use only and the Times New Roman. In today's material we will consider the existing opportunities for work with fonts in email.

Fundamentals of typographics


One of the main tasks at imposition of mailing groups consists in that being convinced that e-mail clients and engines of rendering do not do with letters anything strange. When business concerns the text, it is possible to solve the most part of possible problems by means of adding of couple of styles. For example, when using approach <td> it is possible to apply them at the level of cell in the table:

<td>Здесь какой-то текст.</td>

It is possible to apply the CSS styles describing text color (color), the used font (font-family), its weight (font-weight) and height of line (line-height) to cells.

<td style=”color: #444444; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 20px;”>Some copy goes here.</td>

If to declare these styles, the text will be adequately rendered even in the most "hostile" e-mail clients. If to store each part of content in the cell, these components can be stylized without need to care of inheritance problems. If, for example, it is necessary to work with specific section of the text in the big block, this necessary text can be turned in <span> and to use inlayn-styles:

<td style=”color: #444444; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 20px;”>Здесь какой-то текст. <span style=”font-weight: bold; font-style: italic;”>Привлекаем внимание к контенту</span> с помощью стилей шрифта</td>

In examples above we used Arial (yes), but nothing prevents to go further. Let's look as it can be made.

Use of web fonts


This method was well described by the designer Paul Airey (Paulr Airy). Its essence consists in use of web fonts which are not set on the user's device. It becomes by means of their inclusion in CSS. In web this method is also successfully applied long ago, but among email-designers only gains popularity.

There are some ways of inclusion of web fonts, but Paul recommends to use the external file with styles which is used for "pulling" of fonts from the sites like Google Web Fonts.

<head>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
 </head>

Then in inlayn-styles it is possible to add the necessary font to the declaration font-family:

<td style=”color: #444444; font-family: ‘Open Sans’, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 20px;”>Здесь какой-то текст.</td>

Now in e-mail clients which support web fonts, the text will be displayed by means of the font selected in advance. Otherwise, the listed alternative fonts will be used — at us it is Helvetica, Arial or the set sans-serif font.
Support of web fonts in e-mail clients through the link to the external file of styles
Apple Mail 6
check-green
Lotus Notes 8
check-green
Outlook 2000
check-green
Outlook 2011 on Mac
check-green
Thunderbird
check-green
iPad
check-green
iPhone
check-green
Android 2.3
check-green
Android 4.2
check-green

Unfortunately, Outlook will not begin to display our alternative fonts (who would doubt, of course). Instead, he will ignore all styles relating to them and will display the text by means of the Times New Roman. But also with it it is possible to cope with the help of special CSS class — it will select the necessary text to transmit Outlook through conditional comments information on the used font set.

<!--[if mso]>
<style type=”text/css”>
.body-text {
font-family: Arial, sans-serif;
}
</style>
<![endif]-->

<td class=”body-text” style=”color: #444444; font-family: ‘Open Sans’, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 20px;”>Здест какой-то текст.</td>

Now instead of the Times New Roman by default letters will be displayed by means of Arial or other set sans-serif font.

Multicolumnar look without tabular cells


Paul also tells about undesirability of use for placement of the text some columns columns. However as the majority of letters is imposed in tabular format in which always there are columns, simple use of the next cells for display of the text arises. But what if we need to achieve text "overflowing" from one column in another, instead of content "hardkoding" in specific cells?

Here column-count CSS property comes to the rescue. But it is important to remember: from this point we enter on wild lands in which it is seldom possible to meet the application supporting column-count.

By means of this property it is possible to set number of columns, on between which the text will break. Here is how the code looks:

<td style=”-webkit-column-count: 2; -moz-column-count: 2; column-count: 2; color: #444444; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 20px;”>Здесь какой-то текст.</td>

Now regardless of text volume, it will be naturally broken between two columns. If the mail program in which the letter opens, does not support column-count, the message will be displayed in one-columnar look.

As it is told above, with support everything is just not really good:
Support by e-mail clients of mnogokolonochnost through column-count
Apple Mail 6
check-green
Outlook 2011 on Mac
check-green
AOL Mail (Explorer)
check-green
AOL Mail (Chrome)
check-green
iPad
check-green
iPhone
check-green
Android 2.3
check-green
Android 4.2
check-green

Sometimes by means of different layfkhak (for example, use of styles to paragraph tag) it is possible to force to display letters with column-count and some other clients. In particular, during tests the Floor managed to achieve it, for example, in Outlook.com in Firefox.

Read also other materials from "Pechkin":


This article is a translation of the original post at habrahabr.ru/post/259909/
If you have any questions regarding the material covered in the article above, please, contact the original author of the post.
If you have any complaints about this article or you want this article to be deleted, please, drop an email here: sysmagazine.com@gmail.com.

We believe that the knowledge, which is available at the most popular Russian IT blog habrahabr.ru, should be accessed by everyone, even though it is poorly translated.
Shared knowledge makes the world better.
Best wishes.

comments powered by Disqus