Typography

Bojler includes simple and easily customized typography for headings, table cells and lists.

Getting started Grid system

System fonts stack

Bojler defaults to the system font of a particular operating system. This method can boost performance because the browser or email client doesn’t have to download any font files, it’s using one it already had.

The beauty of system fonts is that it matches what the current OS uses, so it can be a comfortable look.

html,
body,
table,
table td {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

Table cells and headings

We’ve updated default typography values for all table cells and headings.

Default values are defined in px instead of em to work properly in all email clients (Different email clients use different baselines, which makes pixel-perfect work near-impossible when using em).

Element Font size Line height
Base (Table cells) 16px 23px
Heading 1 50px 58px
Heading 2 38px 46px
Heading 3 28px 36px
Heading 4 21px 29px
Heading 5 16px 23px
Heading 6 12px 20px

Heading utility classes You can use specific heading utility classes to apply heading styles to any element you want in your email template: .h1, .h2, .h3, .h4, .h5, .h6.

Lists

Lists will not work properly in Outlook 2007/10/13 unless you wrap them with table cell (td) that have class .have-list.

Outlook 2007/10/13 don’t support padding by default on lists so we have to add it manually.

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td class="have-list">
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
                <li>Item 4</li>
            </ul>
        </td>
    </tr>
</table>