What kind of font you use greatly influences your template’s style. A good rule of thumb is not to use many different fonts, it’s better to stick to one or maybe two – one for headings and one for content text. Setting default fonts for the template encourages this good practice, and saves a lot of time when editing by not having to set fonts over and over again for standard text or headings.
The default font sizes are generally good for almost any kind of template, but feel free to change them. The bigger the text, the safer that it can be well read on mobile devices.
For every kind of text you have the option to change the color and the line-height as well. Both of these settings influence your style and have an important effect on readability.
You can set generally whether the links in a text should get underlined automatically, and what color they should get.
It is important to note, that later when editing the content of the template, every one of these default settings can be overridden. So for example if you would like to get the links in the template’s content underlined, but at the same time you plan to make a menu on top where you don’t want underlining, you can do it. You just need to change the default behavior of the links in the menu and that’s all.
Right now you can choose from web-safe fonts only, because these are the ones, which render properly on all sorts of devices and in different email clients.
If you want a classic, book-like feeling, go for Times New Roman or Georgia, but if you want to have a modern touch Arial or Verdana should fit your needs.
Later on we are planning to support Google Fonts as well, but we need to do extended research in this topic.
Font color is an important factor in readability, together with the background of course. Try to choose a color combination with a comfortable amount of contrast – not too high and not too low.
Using different colors is one of the best ways of highlighting / emphasizing text, so setting different color for headings makes sense. The colors are independent, so if you want to change heading color generally, you have to change it in every heading.
If you have already chosen a custom color, do not try to match it next time by hand. Pick it from the last used section! This way you will not end up using more different shades of the color you wanted to use.
Headings 1-3 are available for you to use in your template. These are generally used in hierarchy, representing different levels of importance. That is what you see in their default sizes.
Heading 1 is usually only used once on a page, for the main title. Heading 2 would typically be used as the title of your emails sections, or articles, while Heading 3 for smaller blocks’ title.
Avoid using headings for emphasizing some part of a text. Headings are for titles. Emphasizing can be done with setting bigger size and/or different color or background.
Most of the time you would want your readers to make some action, so it is essential for them to see where to interact, what to click on. That’s why links should get some distinction.
Usual methods of making links distinct are underlining and/or different coloring. You can set these options generally for every link you create later.
In some places links are self-explanatory and does not need different styling, for example in menus, or block titles. Here you would set the link color matching the text color, and switch off underlining.
If you want people to convert, use buttons instead of text links. Buttons stand out and can be easily clicked on mobile screens as well.
Paddings, Margins and Borders in Modern HTML Emails
Throughout this tutorial series, we have been using paddings, margins and borders a lot. We haveRead more
Typography in Modern HTML Emails
In the last few weeks, we went through the main principles and limitations of HTML Emails.Read more
Background Images in Modern HTML Emails
This article uncovers the approaches how background images can be set in email HTML. Various emailRead more