Foundations

Bojler includes basic reset styles and simple, easily customized typography for headings and table cells. Lets take a look at bojler foundations.

Getting started Objects

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. Read more about it here.

We’ve updated default link styles to make them prettier. Underline is removed and new default color is applied.

You can change default link color in settings/_core.scss, look for $link-color variable.