'Is it OK to use vw (viewport width) for font-size in HTML email for mobile devices

I am creating an HTML email template. The desktop version is done with tables, few inline css, all sizes are defined in % or px values.

For the mobile version I work with divs and css. Now I'd like to resize some texts depending on the viewport width. Because if I define some header's font-size to be say 28px, then a certain text might look OK on a wider device, but on a smaller device the text becomes to large and breaks to the next line.

Now I am considering setting the base font-size like this: (run snippet in full page mode and then resize window to see the effect)

:root {
  font-size: calc(8px + 4vw);
}
<h1>
  Header 1
</h1>
<h2>
  Header 2
</h2>
<p>
  Lorem ipsum dolor sit amet, quo eripuit menandri instructior ad, nostro iracundia nam at. Etiam quaerendum vis no. Percipit accommodare ne eum. Alia molestie democritum vix no, natum habemus ei eum, qui ut adhuc partem luptatum.
</p>

Like this the subsequent font-sizes are scaled depending on the viewport width, the header becomes smaller on smaller devices, preventing the text to break, or a least making it less likely. By using calc() I also define a certain minimum, so text won't become too small.

Now my question is if it's OK to use this for e-mail (mobile), or is it badly supported by mobile email clients? Browser support is quite good, but I couldn't find any information on mobile e-mail client's support.

cssmobilehtml-emailviewport-units


Solution 1:[1]

Hi you can always check support for css attributes over on http://caniuse.com. I found this: http://caniuse.com/#search=vw which shows iOS 8.4 and Android 4.4 and above support. Not that great, and I imagine lots of people are still on iOS7 (ok, maybe just me!).

In short I agree you probably shouldn't depend on this techinque working everywhere.

Solution 2:[2]

Px is really the only consistent unit declaration for font size in HTML email development across clients and devices. (https://www.campaignmonitor.com/blog/email-marketing/2011/04/should-i-use-em-or-px-when-coding-for-html-email/).

In mobile design, larger text is usually better, but there are times when headlines or other items must be shrunk to fit design. Your best option here is to create the email with a 'mobile-first' design and then use media queries and MSO conditionals to make it expand for desktops.

With more than 50% of email being opened on a mobile device (http://www.emailmonday.com/mobile-email-usage-statistics) and Gmail and many other third party email apps completely stripping the style tag, it makes more sense to have the default be mobile.

There are options to help Gmail web client to behave better as well.(http://freshinbox.com/blog/interactive-emails-in-gmail-using-css-attribute-selectors/) Although class and id do not work, by using styling on the lang attribute (or the recently tested summary or aria-labelledby attributes) you can control the layout of the web mail version of Gmail to a degree.

Solution 3:[3]

Well so Vh and vw are usually really handy, but for E-mails, they'll hit a wall at Outlook or at least at the windows-version. Ironically it works on Mac's. But since many people receive their E-mails on the default Outlook application I don't think that would make sense.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nathaniel Flick
Solution 2 Gortonington
Solution 3 AF2828

Related Questions