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