Increasing Text Size

Using media queries to increase an email’s text size when it’s viewed on a mobile device is one of the easiest things you can do to make an email better for readers. Here’s the standard CSS for our email’s body copy:

<style type="text/css">
  .bodyContent{
    color:#505050;
    font-family:Helvetica, Arial, sans-serif;
    font-size:14px;
    line-height:125%;
  }
</style>

While a 14px font size is fine on a desktop, it can often be a struggle to read anything of that size on a small screen. We recommend a font size of at least 16px for main copy. Getting that to happen is a pretty simple proposition, since we’re only concerned with the font size:

<style type="text/css">
  @media only screen and (max-width: 480px){
    .bodyContent{font-size:16px !important;}
  }
</style>

When the media query is triggered on screens less than 480px wide, the text size is automatically bumped up to a readable size: