Basic HTML for email templates

Table with two rows and one column/cell

   <table>
        <tr>
             <td>
                  CONTENT 01
             </td>
        </tr>
        <tr>
             <td>
                  CONTENT 02
             </td>
        </tr>
   </table>

Table with two rows and two columns/cells

   <table>
         <tr>
             <td>
                  CONTENT 01
             </td>
             <td>
                  CONTENT 02
             </td>
       </tr>
       <tr>
            <td>
                  CONTENT 03
            </td>
            <td>
                  CONTENT 04
            </td>
       </tr>
   </table>

Text structure

Most of Omeria's text is contained in paragraph tags <p> or heading tags <h1>, so will look something like this:

   <td>
        <h1>Heading 1</h1>
        <h2>Heading 2</h2>
        <p>Paragraph Text</p>
   </td>

But there may be some inside a <span> tag:

   <td>
         <p>Paragraph Text <span>text with different formatting</span> Paragraph Text</p>
   </td>

Or inside a link:

   <td>
        <p>Paragraph Text <a href="{{url}}">text link</a> Paragraph Text</p>
   </td>

In some places, it may even be directly inside the data cell (we do not recommend adding text inside cells without a <p>or <a> tag):

    <td>
         Paragraph Text
   </td>

For each of these tags you can make changes to the style of the text.

Styling text

Most of your brand’s text styles should display as default, as we will have already set them in code elsewhere in the template where you can’t see them. 

Changes that you need to make in the code should be minimal. 

If you find yourself making the same change repeatedly, ask your Customer Success Representative about either putting in a request to get the master template changed or for advice on how to set up a child template.

All the styles that you need to change will be inside a <style> tag:

   <td>
        <p style="">Paragraph Text</p>
   </td>

Here are some text styles that you might want to change:

Font family

   font-family:arial, sans-serif;
   font-family:'custom font', arial, sans-serif;
   font-family:times, times new roman, serif;

Font-family tries to use the first font in the list, and if that’s not possible, works through the list in order. 

A list should be made up of all serif fonts or all non-serif fonts, and they should be as similar as possible.

There should be just one custom font in a list, and it should always be the first in the list.

After that you can use a non-custom font, e.g. Trebuchet or Garamond, then a web safe font.

Lastly, an instruction for the email client (yahoo, Outlook, etc.) to use whatever standard serif or sans-serif font they have.

Web safe fonts

Serif fonts

• Georgia
• Times New Roman

Sans-Serif Fonts

• Arial 
• Helvetica
• Verdana

Font size

   font-size:14px;
   font-size:22px;

This controls the font size in pixels. 

Generally, this correlates with font sizes in points (pts) in designs, but you should always use px in your Ometria templates.

The minimum font size we recommend is 14px.

It’s best practice to use even numbers for font sizes.

Line height

   line-height:130%;
   line-height:20px;

This dictates the line height of the text (the space between lines of text):

Here, while you can use px, it's preferable to use percentage. 

This way, if you change the font size, the line height auto-adjusts. 

If you use px and change the font size you risk your line height being too small.

If the line height is smaller than the text size in Outlook it can cut off the text.

Margin

    margin:20px 10px 20px 10px;
    margin-top:20px;
    margin-bottom:20px;
    margin-left:20px;
    margin-right:20px;

While line-height affects the space between lines of text, margin dictates the space around the text tag.

You can either set each side individually using margin-top, margin-right etc, or use the combined margin.

The sequence is clockwise from the top, so:

• Top
• Right
• Bottom
• Left

Example:

margin:10px 20px 30px 40px; 

is the same as:

margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 4px;

Colour

color:#ffffff;
color:#f16b6b;

This controls the colour of the text, using a hex code.

Font weight

   font-weight:bold;
   font-weight:normal;
   font-weight:700;
   font-weight:400;

font-weight dictates how bold the text is, and accepts either a numerical value (e.g. 700) or the ‘friendly’ name (e.g. bold). 

When using numerical values, only enter the number, don't include a % or 'px'. 

font-style:italic;
font-style:normal;

You only need to use font-style:normal;if you're trying to override when italics have already been set.

Example:

    <td>
       <p style="font-style:italic;">Paragraph Text <span style="font-style:normal;">text with different formatting</span> Paragraph Text</p>
   </td>

Displays as:

Paragraph Text text with different formatting Paragraph Text

See also: Inheriting and overriding styles

Text decoration

    text-decoration:none;
    text-decoration:underline;
    text-decoration:line-through;

While font-style changes the look of the font, text-decoration adds further formatting, most commonly a strike-through (line-through) or an underline.

Just like font-style:normal; you only need to use text-decoration:none;if you're overriding an existing text-decoration.

See also: Inheriting and overriding styles

Text transformation

    text-transform:uppercase;
    text-transform:lowercase;
    text-transform:capitalize;
    text-transform:none;

These change the case of the copy in your email.

So if the code is this:

    <td>
         <p>UPPER CASE, lower case, Caps At The Beginning</p>
    </td>

Adding text transform into the <p> tag, would result in:

• uppercase - UPPER CASE, LOWER CASE, CAPS AT THE BEGINNING
• lowercase - upper case, lower case, caps at the beginning
• capitalize - UPPER CASE, Lower Case, Caps At The Beginning
• none - UPPER CASE, lower case, Caps At The Beginning

You only need to use text-transform:none;if you’re overriding an existing text-transform.

See also: Inheriting and overriding styles

Text alignment - Horizontal

   text-align:left;
   text-align:center;
   text-align:right;

This code sets the horizontal alignment of the text.

Text alignment - Vertical

   vertical-align:top;
   vertical-align:middle;
   vertical-align:bottom;

This code sets the vertical alignment of the text.

In most cases, where it’s a standard paragraph these codes will appear to have no effect. 

Alignment only works if the <td> your text is inside has a defined height which is larger than the text occupies. 

Custom Fonts

If you want to use custom fonts, you'll need to supply Ometria's Creative Team with your font files in any of these formats:

• ttf
• woff
• woff2
• eot 
• Otf,

The Creative Team can add these to your templates.

There will be a separate file for each font weight and font style. 

To display the file in bold, or italic, or light and italic etc, you'll need to have the relevant file added to your template.

Inheriting and overriding styles

When a tag is inside another tag, it ‘inherits’ the styles set out in the outside tag, unless another style is added to override it. 

In this example, the <p> is set to a colour of black (#000000), a normal font-weight and an underline. 

The <span> then overrides the font-weight, making it bold, but the text still inherits the colour and underline:

<td>
<p style="color:#000000; font-weight: normal; text-decoration: underline">Paragraph Text <span style="font-weight: bold;">text with different formatting</span> Paragraph Text</p>
</td>

Paragraph Text text with different formatting Paragraph Text

Overriding link styles

When using links, you must always set the colour, font weight and text-decoration, or else you risk the email client (e.g. Yahoo, Outlook, etc.) overriding it.

You will need to do something like this:

   <td>
   <p style="color:#000000; font-weight: normal;">Paragraph Text <a href="{{url}}" style="color:#f16b6b; font-weight: normal; text-decoration:none;">text link</a> Paragraph Text</p>
   </td>

Paragraph Text text link Paragraph Text