This article is part of a series on the use of HTML for email marketing. Today we will see how to control text formatting and spacing.
Disclaimer: This article is rather long and can be considered a bit technical. However, it contains solutions to many common problems. Feel free to save it and come back if you have difficulties with your model!
- HTML 101 – the basics
- HTML 101 – text formatting (you are here!)
- HTML 101 – images
The principal properties we want control over are as follows:
- Font: font-family, font-size, font-weight
- Color: color
- Spacing: line-height1, margin, text-align
1) Unfortunately, the line height is not very well supported in HTML emails. You can set it, but do not rely it!
<h1 style=”font-family:Arial; font-size:16px; font-weight:bold; color:#010101; margin-top: 0; margin-bottom: 0; text-align:right;”>
<span style=”font-size:40px;”>15%</span><br />
<span style=”font-size:33px;”>de RABAIS</span><br />
<span style=”font-size:16px; font-weight:normal; color: #5c5c5c;”>sur articles sélectionnés</span>
<p style=”font-size:10px; font-weight:normal; margin-top: 0; margin-bottom: 0; text-align:right;”>*Dans la limite des stocks disponibles</p>
- The h1 tag contains spans.
They serve only to define where to begin and end the application of some properties. For example, the text will be gray for the portion enclosed between the opening and closing span tag highlighted in green above.
- It is possible to set multiple properties on each tag.
Each property is then separated from the next by a semicolon.
- margin-top:0; margin-bottom:0;
These two properties are used to reduce the spacing between the title and the paragraph in small print. These properties are fairly well supported, but may not work everywhere.
- br forces a new line
<br> means break line, unlike <p> which stands for paragraph. The space it creates will be smaller: a single carriage return.
Problems and solutions
- My text is all wrong. How can I unstyle it?
The easiest way is to go in visual mode, select all the text you want to unstyle and use the eraser icon to delete all formatting. You will then be able to start anew.
- My link is always underlined in blue…
If you want to change the color of a link, make sure to do it on the <a> tag or in a <span> inside it. If you do it elsewhere, eg on <p> that contains the link, the underline will stay blue (its default color)
- Titles are differents in Hotmail (or Outlook, or Gmail, etc)
You can avoid the hassle by stylizing paragraphs as if they were titles. Otherwise, h1 are ok to use, but you’ll need to set the font to prevent Outlook from turning it into Calibri (eg <h1 style=”font-family:Arial;”>)
Control over spacing
Do you abuse paragraphs?
There are some strange gaps in your model? Perhaps it is empty paragraphs. If you do carriage returns in visual mode, the editor creates paragraphs that look like this: <p> </ p>.
Note: entities beginning with an ampersand (&) and ending with a semicolon are special characters. The one above is a nonbreaking space (ps: these are very useful when you want to prevent a break between two words!).
Newline vs. paragraph break
In visual mode, when you press the “enter” key, you create a paragraph. But did you know that if you press the “Shift” key at the same time, you will create a line break instead? Here’s the difference:
Margins between elements
As we see above, a space is added before and after a paragraph to separate it from other elements. This space is called margin.
If your items do not align correctly, switch to source view and make sure they do not have different margin values!
Here, the second cell contains a title with a margin-top: 0, while in the former, it is not defined. It will therefore use the default value (which depends on the software).
The last word
To be continued in the third and final part of this serie: What you need to know about images in HTML emails.
The Cyberimpact team