Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Do we still need to use <font> tags in HTML emails?

I'm taking over from someone who builds our HTML emails and the templates are filled with font tags. Is this really necessary? I know CSS support isn't great in emails, but if I set an inline style for text on the container <td> like this...

<td style="font-family:Arial, Helvetica;color:#555555;font-size:12px"> 

...then surely this will work across the majority of email clients. From the tests I've performed this seems to be the case, and this article seems to confirm this.

Anyone have any input as to whether <font> tags are really necessary in HTML emails?

like image 963
punkrockbuddyholly Avatar asked Nov 04 '11 16:11

punkrockbuddyholly


People also ask

Do HTML emails require HTML tag?

The html/head/body tags are always optional.

Is font tag in HTML deprecated?

The <font> element, along with most other style and design oriented HTML features, has been deprecated in HTML5. The correct way to control fonts and other styling is through CSS.

Is font tag obsolete?

Use CSS instead. The <font> element, used to define the font face, size and color in previous versions of HTML, is no longer valid in HTML5. Instead, you should rely on CSS styles.

Do style tags work in email?

Yes you can. However you have to keep in mind that few email clients respect css standards. Just stick to basic css properties like margin and padding , etc., and it should all be fine. Also you can style your html elements inline ( <div style=""> ) though it's not an elegant solution.


2 Answers

Sadly the accepted answer is not true, and even hideous things like @MrMisterMan's post are still de rigeur.

Deprecated as it may be, the font tag is still the only thing that works universally across pretty much all email clients, old and new. Bear in mind that email is not the web and it's still positively antediluvian. Some email services do unspeakable things; I've encountered one that blindly stripped all HTML tags (ignoring provided plain-text versions), converted linked images to attachments, resulting in an unreadable mess. Even contemplating having inline styles working in the face of such vandalism is truly wishful.

Want to know where the big hole is? Hotmail. hotmail, live.com and outlook.com strip or replace inline styles, yes, even in 2013. Blame Microsoft: hotmail, live, outlook.com and outlook have all got considerably worse in the last few years (e.g. floats were dropped from outlook.com 6 months ago; outlook dropped background images in 2007 and they've not been seen since).

Inline styles work in Gmail, but it strips anything outside the body tag. Some corporate mail filters (like BlackSpider/WebSense) do exactly the opposite, so if you want to be completely sure about your styling, you need to put a style tag in the head tag, another copy of it within the body (invalid, but it works), the same styles inline (look at the premailer project), and finally the same styling using font tags. Yes, it's insane, but no amount of wishing is going to make the problem go away. You can of course drop some of these, but by doing so you're implicitly accepting that it's not going to look the same in some places. You need to look at your audience - a new mobile music site can probably get away with it, but a corporate pension provider probably needs to be living in 2003 font-tag land.

Fortunately Apple Mail, iOS mail and iCloud all have vastly superior HTML handling (as that Campaign Monitor table shows, as does the email standards project). With the majority of mobile reading using some flavour of WebKit, rendering on mobile is generally much more consistent (and mostly better) than on desktops.

You could simply say that it's not worth the effort (what the accepted answer is effectively saying) - anyone using crappy mail readers clearly doesn't care that much what their email looks like, but that doesn't mean that your styling isn't going to break.

like image 147
Synchro Avatar answered Oct 05 '22 17:10

Synchro


Your assumption is correct. They're unnecessary. Also, technically the <font> tag was deprecated starting with HTML 4, so you might as well remove it for that sake alone.

If you needed inline css styles on specific text, you would be better of using an inline-styled <span> tag than a <font> tag.

Campaign Monitor has a great and up-to-date resource on current CSS support in emails.

like image 26
Doozer Blake Avatar answered Oct 05 '22 18:10

Doozer Blake