Menu

This is because for many of our clients, designers want to maintain control over formatting and just allow the content to be edited. However some organisations need to expose text formatting controls to editors, and there are various ways to do this. 

To begin, we'll look at the common fields we might use to control text formatting:

 <field type="code" name="fontstack" label="Font Stack" default="Helvetica, Arial, Sans-Serif"></field>
 <field type="number" name="fontsize" label="Font Size" default="14"></field>
 <field type="color" name="fontcolor" label="Font Color" default="#111111"></field>

1) Apply font formatting to the entire rich text field

This approach is useful if you want to control all of the formatting at once, however any changes to the formatting will be applied to the whole editable.

This example uses a standard rich text editable, but it's been broken out into it's implied fields, as we need to add a few more fields. 

<editable name="bodycopy" label="Body Copy">
 <field type="rich" name="content" label="Text"></field>
 <field type="code" name="fontstack" label="Font Stack" default="Helvetica, Arial, Sans-Serif"></field>
 <field type="number" name="fontsize" label="Font Size" default="14"></field>
 <field type="color" name="fontcolor" label="Font Color" default="#111111"></field>
 <span replace="{{content}}" replace-style="{%if fontsize %}font-size:{{fontsize}}px;line-height:{{fontsize | plus: 8}}px;{%endif%}{%if fontstack %}font-family:{{fontstack}};{%endif%}{%if fontcolor %}color:{{fontcolor}};{%endif%}" replace="{{content}}"></span>
</editable>

Note that we're using control flow tags around the css values, because if a css property is left with an empty value, Gmail will ignore the entire style attribute. 

2) Apply font formatting as a rich text style.

The user can apply a style and control the font size of their selected text. This allows them to set the font size in multiple places. The rich text style example is only added once per Email Design System, and it is added as an option to each rich text field. Often the rich editable style tags are added at the bottom of the Design System.

<editable name="bodycopy" label="Body Copy" type="rich">
</editable>
<style-example-only>
<rich-editable-style name="bodytext" label="Body Text">
 <field type="code" name="fontstack" label="Font Stack" default="Helvetica, Arial, Sans-Serif"></field>
 <field type="number" name="fontsize" label="Font Size" default="14"></field>
 <field type="color" name="fontcolor" label="Font Color" default="#111111"></field>
 <span replace-style="{%if fontsize %}font-size:{{fontsize}}px;line-height:{{fontsize | plus: 8}}px;{%endif%}{%if fontstack %}font-family:{{fontstack}};{%endif%}{%if fontcolor %}color:{{fontcolor}};{%endif%}" replace="{{ rich.selection_text }}"></span>
</rich-editable-style>
</style-example-only>

3) Use multiple rich text styles

This approach can be extended so that there are multiple rich text styles, eg. a style for heading 1, heading 2 etc

<editable name="bodycopy" label="Body Copy" type="rich">
</editable>
<style-example-only>
<rich-editable-style name="heading1" label="Heading 1">
 <field type="code" name="fontstack" label="Font Stack" default="Helvetica, Arial, Sans-Serif"></field>
 <field type="number" name="fontsize" label="Font Size" default="24"></field>
 <field type="color" name="fontcolor" label="Font Color" default="#111111"></field>
    <span replace-style="{%if fontsize %}font-size:{{fontsize}}px;line-height:{{fontsize | plus: 8}}px;{%endif%}{%if fontstack %}font-family:{{fontstack}};{%endif%}{%if fontcolor %}color:{{fontcolor}};{%endif%}" replace="{{ rich.selection_text }}"></span></rich-editable-style>
    <rich-editable-style name="heading2" label="Heading 2">
 <field type="code" name="fontstack" label="Font Stack" default="Helvetica, Arial, Sans-Serif"></field>
 <field type="number" name="fontsize" label="Font Size" default="18"></field>
 <field type="color" name="fontcolor" label="Font Color" default="#111111"></field>
    <span replace-style="{%if fontsize %}font-size:{{fontsize}}px;line-height:{{fontsize | plus: 8}}px;{%endif%}{%if fontstack %}font-family:{{fontstack}};{%endif%}{%if fontcolor %}color:{{fontcolor}};{%endif%}" replace="{{ rich.selection_text }}"></span></rich-editable-style>
<rich-editable-style name="bodytext" label="Body Text">
 <field type="code" name="fontstack" label="Font Stack" default="Helvetica, Arial, Sans-Serif"></field>
 <field type="number" name="fontsize" label="Font Size" default="14"></field>
 <field type="color" name="fontcolor" label="Font Color" default="#111111"></field>
    <span replace-style="{%if fontsize %}font-size:{{fontsize}}px;line-height:{{fontsize | plus: 8}}px;{%endif%}{%if fontstack %}font-family:{{fontstack}};{%endif%}{%if fontcolor %}color:{{fontcolor}};{%endif%}" replace="{{ rich.selection_text }}"></span></rich-editable-style>
</style-example-only>

4) Use Rich Text Styles with whole-email defaults

An additional approach is to set the default font sizes in a module at the top of the Email Design System, in a "formatting" module. That means you could set the text size for all body copy in the email, and then if you want to have additional control you could then apply rich text styles as required. 

One benefit of this approach is that the default text size can be edited in Taxi and you don't need to set anything with a rich text style unless you then want to change it.

<module name="formatting">
      <editable name="heading1" label="Heading 1 - document formatting">
    <field type="code" name="fontstack" label="Font Stack" default="Helvetica, Arial, Sans-Serif"></field>
    <field type="number" name="fontsize" label="Font Size" default="24"></field>
    <field type="color" name="fontcolor" label="Font Color" default="#111111"></field>
      </editable>
      <editable name="heading2" label="Heading 2 - document formatting">
    <field type="code" name="fontstack" label="Font Stack" default="Helvetica, Arial, Sans-Serif"></field>
    <field type="number" name="fontsize" label="Font Size" default="18"></field>
    <field type="color" name="fontcolor" label="Font Color" default="#111111"></field>
      </editable>
      <editable name="bodytext" label="Body text - document formatting">
    <field type="code" name="fontstack" label="Font Stack" default="Helvetica, Arial, Sans-Serif"></field>
    <field type="number" name="fontsize" label="Font Size" default="14"></field>
    <field type="color" name="fontcolor" label="Font Color" default="#111111"></field>
      </editable>
</module>
<table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td replace-style="{%if modules.formatting.editables.bodytext.fontsize %}font-size:{{modules.formatting.editables.bodytext.fontsize}}px;{%endif%}{%if modules.formatting.editables.bodytext.fontstack %}font-family:{{modules.formatting.editables.bodytext.fontstack}};{%endif%}{%if modules.formatting.editables.bodytext.fontcolor %}color:{{modules.formatting.editables.bodytext.fontcolor}};{%endif%}">
            <span replace-style="{%if modules.formatting.editables.bodytext.fontsize %}line-height:{{modules.formatting.editables.bodytext.fontsize | plus: 8}}px;{%endif%}">
                <editable name="bodycopy" label="Body Copy" type="rich">
                Body Copy
                </editable>
            </span>
        </td>
    </tr>
</table>
<style-example-only>
<rich-editable-style name="heading1" label="Heading 1">
    <field type="code" name="fontstack" label="Font Stack" hint="Leave this blank to inherit from the Formatting module" default=""></field>
    <field type="number" name="fontsize" label="Font Size" hint="Leave this blank to inherit from the Formatting module" default=""></field>
    <field type="color" name="fontcolor" label="Font Color" hint="Leave this blank to inherit from the Formatting module" default=""></field>
    <span replace-style="{% if modules.formatting.editables.heading1.fontsize !='' or fontsize !=''%}font-size:{{fontsize | default: modules.formatting.editables.heading1.fontsize}}px; line-height:{{fontsize | default: modules.formatting.editables.heading1.fontsize | plus:8 }}px;{%endif%}{% if modules.formatting.editables.heading1.fontstack !='' or fontstack !=''%}font-family:{{modules.formatting.editables.heading1.fontstack}};{%endif%}{% if modules.formatting.editables.heading1.fontcolor !='' or fontcolor !=''%}color:{{modules.formatting.editables.heading1.fontcolor}};{%endif%}" replace="{{ rich.selection_text }}"></span></rich-editable-style>
    <rich-editable-style name="heading2" label="Heading 2">
    <field type="code" name="fontstack" label="Font Stack" hint="Leave this blank to inherit from the Formatting module" default=""></field>
    <field type="number" name="fontsize" label="Font Size" hint="Leave this blank to inherit from the Formatting module" default=""></field>
    <field type="color" name="fontcolor" label="Font Color" hint="Leave this blank to inherit from the Formatting module" default=""></field>
    <span replace-style="{% if modules.formatting.editables.heading2.fontsize !='' or fontsize !=''%}font-size:{{fontsize | default: modules.formatting.editables.heading2.fontsize}}px; line-height:{{fontsize | default: modules.formatting.editables.heading2.fontsize | plus:8 }}px;{%endif%}{% if modules.formatting.editables.heading2.fontstack !='' or fontstack !=''%}font-family:{{modules.formatting.editables.heading2.fontstack}};{%endif%}{% if modules.formatting.editables.heading2.fontcolor !='' or fontcolor !=''%}color:{{modules.formatting.editables.heading2.fontcolor}};{%endif%}" replace="{{ rich.selection_text }}"></span></rich-editable-style>
<rich-editable-style name="bodytext" label="Body Text">
    <field type="code" name="fontstack" label="Font Stack" hint="Leave this blank to inherit from the Formatting module" default=""></field>
    <field type="number" name="fontsize" label="Font Size" hint="Leave this blank to inherit from the Formatting module" default=""></field>
    <field type="color" name="fontcolor" label="Font Color" hint="Leave this blank to inherit from the Formatting module" default=""></field>
    <span replace-style="{% if modules.formatting.editables.bodytext.fontsize !='' or fontsize !=''%}font-size:{{fontsize | default: modules.formatting.editables.bodytext.fontsize}}px; line-height:{{fontsize | default: modules.formatting.editables.bodytext.fontsize | plus:8 }}px;{%endif%}{% if modules.formatting.editables.bodytext.fontstack !='' or fontstack !=''%}font-family:{{modules.formatting.editables.bodytext.fontstack}};{%endif%}{% if modules.formatting.editables.bodytext.fontcolor !='' or fontcolor !=''%}color:{{modules.formatting.editables.bodytext.fontcolor}};{%endif%}" replace="{{ rich.selection_text }}"></span>
    </rich-editable-style>
</style-example-only>

One thing to note here is that in the rich text style, the default is empty - that way the default filter will kick in and then pull in the value from the formatting module. Also, on the table that contains the editable - you can set the font size on the <td>, but if you also set the line height on the <td> then Outlook (Word versions - 2007, 2010, 2013 etc.) won't read the line-height from the span in the rich text style, and instead will stick with the line height from the <td>. There is a chance you'd end up with a smaller line-height than the font size, so it's best to set the default line height on a span inside the <td>. 

Other custom styles

These rich editable styles will enable you to apply superscript, subscript, strikethrough and a background colour to specific bits of text within a rich text field. If you include these in your Email Design System, they will become available on all rich text fields or you can specify certain rich text fields if you don't want them to be used everywhere.

Superscript:

<rich-editable-style name="superscript" label="Superscript">
<sup style="font-size: 55%; line-height: 0;" replace="{{rich.selection_text}}"></sup>
</rich-editable-style>

Subscript: 

<rich-editable-style name="subscript" label="Subscript">
<sub style="font-size: 55%; line-height: 0;" replace="{{rich.selection_text}}"></sub>
</rich-editable-style>

Strikethrough:

<rich-editable-style name="strikethrough" label="Strikethrough">
<strike replace="{{rich.selection_text}}"></strike>
</rich-editable-style>

Text highlight:

<rich-editable-style name="text_highlight">
<field type="colour" name="colour" default="#FFF574"> </field>
<span replace-style="background-color: {{colour}}; padding: 4px" replace="{{rich.selection_text}}"></span>
</rich-editable-style>

Additional approaches

Adding CSS

If the organisation has access to features like Brands and Locked Fields, the Design System developer could add a code field where any css could be added (for example text-decoration, letter-spacing etc.) Be aware though, that this opens up the opportunity for HTML to be added that breaks your HTML, so you should be confident that this field won't be edited by less HTML savvy people.

This code could be added in any of the various snippets above:

 <field type="code" name="fontcss" label="Font CSS" default="font-weight:300px;"></field>

Controlling font family using a dropdown

If you'd like to offer different font options, but only from a limited selection, the font stack field could be coded as a dropdown field. 

Back to Advanced Syntax

← Back to /Code