Typography

Typography

Basic type settings for your emails

Being desktop-first, Pine doesn't come with lots of typography settings or helpers.
Things like individual element font sizes or colours should be defined directly inline, we don't provide any class for that.

There are, however, a few basic settings:

  • a system-font font-stack - applies to all elements, and ensures fallback when using webfonts
  • a 16px default font size, with a 26px line height
  • a font-weight of 400 - this is preferred over 'font-weight: normal', because webfonts services such as Google Fonts also work with an integer weight, so you're covered out of the box
  • some resets for preventing text resizing and improving rendering


Webfonts

If you want to use webfonts in email, please check our Google Fonts design pattern.


Headings for Mobile

It's common to use large font sizes for emails on desktop, to create beautiful typography. This can be a problem on mobile, if not resized properly.

Pine doesn't come with any helpers for resizing headings for mobile, but you can use this example CSS if you need - we find it works pretty well.

Example: Resizing Headings For Mobile
                
                  
                
              
Theme Mountain

Current Version