Content - Bojler

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.

Where to customize this?

To change default font family you have to update $font-family-base variable in src/sass/_settings.scss. Take a look at code example below.

$font-family-base: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif !default;

Headings and table cells

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).

Where to customize this?

To change default font sizes you have to update variables in src/sass/_settings.scss. Take a look at table below.

Variable name	Description	Value
`$font-size-base`	Updates font size on every `<td>` element.	16px
`$line-height-base`	Updates line height on every `<td>` element.	23px
`$font-size-h1`	Updates font size on every `<h1>` element.	50px
`$line-height-h1`	Updates line height on every `<h1>` element.	58px
`$font-size-h2`	Updates font size on every `<h2>` element.	38px
`$line-height-h2`	Updates line height on every `<h2>` element.	46px
`$font-size-h3`	Updates font size on every `<h3>` element.	28px
`$line-height-h3`	Updates line height on every `<h3>` element.	36px
`$font-size-h4`	Updates font size on every `<h4>` element.	21px
`$line-height-h4`	Updates line height on every `<h4>` element.	29px
`$font-size-h5`	Updates font size on every `<h5>` element.	16px
`$line-height-h5`	Updates line height on every `<h5>` element.	23px
`$font-size-h6`	Updates font size on every `<h6>` element.	12px
`$line-height-h6`	Updates line height on every `<h6>` element.	20px

Links

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

Where to customize this?

You can change default link color in src/sass/_settings.scss. Take a look at code example below.

$link-color: $color-blue !default; // #2b7fff

Lists

Lists won’t work properly in Outlook 2007/10/13 unless you wrap them with table cell (<td>) that have class .list-reset.

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

Example

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

Images

We’ve implemented .image-reset class which you can use to reset image font-size and line-height properties to display properly on every Outlook email client. Use this class only on your parent <td> element, not on <img>.

Example

<table border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td class="image-reset">
			<img src="example.png" />
		</td>
	</tr>
</table>