Beautiful type for your emails, extendable with web fonts

Pine uses the golden ratio for both desktop and mobile, in order to deliver content width-tailored typography that is easy to read. Just like you're used to from reading a book.

Golden ratio #

Font size and line height in Pine are set based on the maximum content width that can be achieved with one column: 640px.

Following the golden ratio formula for typography, we reset body text to a 16px font size, with a 26px line height. For mobile devices, the line height is reduced to 23px.

Native Font Stack #

Pine uses the same beautiful system font stack that you're used to from Bootstrap 4. Even in the absence of web fonts support, this helps create beautiful emails across the board, by taking advantage of the operating system's fonts:

Google Fonts #

For email clients that support web fonts, you can customize Pine further with our Google Fonts technique.

In order to avoid Outlook's TNR bug ↗ and still keep our code short and clean, we import the fonts and apply them in a media query, before the native font stack reset. All clients that support web fonts also support media queries, but Outlook will just ignore it.

In this example, we import one webfont: a display font called 'Bangers', that we apply with the .display-font class. The rest of the text will use the native font stack, but the paragraph on the lower right will use the system's monospace font: being defined inline, it overrides the default font family.

Tip: use a length value for defining font weights, i.e. font-weight: 700; for bold. It's shorter, you can easily cross-check with what you imported from Google Fonts, and it allows for more granular control instead of relying on keywords that are relative to the parent element.

Next Up: Images →

Current Version