For HTML email development: How can I assign a different font-size for mobile and desktop views?

48 views Asked by At

I'm trying to make a responsive email for a client but they want different font- seizes for desktop and mobile. Normally I would use a media query for this and it works on my Dreamweaver view but when I plug the code into Litmus, MSO (go figure) does not respect either. Any insight on this?

I have tried the media query route and the inline css/style route but those either leave me with errors on mso or negate the font-size switch all together.

1

There are 1 answers

0
Adam M. On

Depending on the specific email clients you need to satisfy, you can work around the limitations in MSO Desktop clients by assuming that only your inline styles will be used in MSO Desktop, then your media queries that change your font size should work for most mobile platforms (iOS, Android, etc).

So you need to structure your code with your desktop styles that do not rely on anything that MSO does not support. This means no media queries.

You can use media queries to change styles for many mobile clients though. So this is where you specify your font-size change.

<style type="text/css">

/* Mobile only */
@media (max-width: 600px) {
  .mobile-20px {
    font-size: 20px !important;
    line-height: 24px !important;
  }
}

</style>

<body>
  <!-- All Desktop/Web clients including MSO -->
  <span style="font-size: 16px; line-height: 20px;" class="mobile-20px">Email Content</span>

</body>

This may seem like a heavy-handed solution but if you need to support MSO/Outlook clients, then it is most likely necessary.

If instead you are trying to make a responsive email in MSO clients exclusively, for example by resizing the window in an Outlook Desktop App. There is no solution for that in my experience, since there is no support for media queries in MSO desktop clients.

Your baseline email css should be desktop / MSO friendly (if you need to support MSO/Outlook):

  • Lean heavily on inline style attributes for styling desktop.
  • No desktop CSS should rely on media queries
  • Use !important in css media queries to change styles for mobile.