A reader writes in:
Would it be possible to draw an entire typeface in CSS to be sent in emails? Our company needs to send out emails to about 20k people to introduce a new brand that we are launching. The emails will be in HTML/CSS. My CEO is very specific about the type of aesthetic he wants to achieve, and this includes using a typeface that is not native to either Mac or Windows computers. We do not want to use images in our email.
First off, it’s pretty cool your CEO cares about type and aesthetics at all. It’s usually a good thing to have the person steering the ship care about beauty and details down to that level. Let’s consider the options.
The first thing that comes to mind in custom fonts these days is @font-face. The browser support for it is pretty darn good. Unfortunately, browser support isn’t what we need here, it’s email client support. According to some research by Campaign Monitor, @font-face is only working Apple’s Mail.app and the Mail app on iOS. You could try to make the progressive enhancement case to your CEO, but at that low level of support might be a tough sell.
Another thing you mentioned was trying to recreate the font through CSS somehow. Maybe something like this. I’ve even played around with this concept a little bit specifically with the idea of image-free emails in mind. This is the realm of big-pixel-art though. Recreating a font pixel by pixel with no anti-aliasing, as you are surely aware, is a fool’s errand.
In reality I think there are two solutions.
The first is to reconsider this sentence: “We do not want to use images in our email.” Why not? It seems like you are OK with sending HTML emails since you’re specifically looking for clever solutions and text emails are capable of very little cleverness short of ASCII art. People use images in emails all the time. Admittedly, the fact users often have to specifically choose to view them is a bit of a turn off, but using proper ALT text on the images makes the email still work even if they never do that.
The second is to give up on this custom font in email thing. Not to sound defeatist here, but your branding will not be ruined by the lack of a specific typeface in an email. Anywhere where you all agree it is critical (e.g. a slogan?), use an image, otherwise, use a nice readable font that works OK in pairing with your brand typeface and move on with more important tasks.
Personally, I think I’d go with @font-face despite the current low support. Actively developing what you want to work helps build the desire momentum needed to get product vendors (in this case email clients) to improve their products and give us better CSS support.
Update, December 2012
Recent research again from Campaign Monitor. As of this update, support includes: iOS Mail, Mail.app on OS X, Lotus Notes 8, default Mail on Android, Outlook 2000, and Thunderbird.
Respectfully, I disagree. What your boss wants is not possible across email clients. Your two options are to forget it or to use images to show your font.
Only in-line CSS is supported across email clients, and even this gets tricky. Email is like coding in the 90s, and using something supported in almost no email clients is the worst thing you could do. Until all of the email clients roll out auto updates to their software, and do some active, coordinated development, this is not going to change. Sorry for the bad news.
Hahaha, this is what I thought and then saw you’d already commented. Actually, my thought was that this is really positive, idealistic thinking:
And that in fact the CEO probably doesn’t care about beauty and details, but rather finds “normal” fonts boring and would really like to use Curlz MT, as he or she believes that will communicate the company’s “fun” vibe.
Ditto, what Ruby said…
Mission Impossible – I’d have to agree with Ruby on this.
Even if you do everything right and to the letter, you’re still going to get issues of varying degrees across different email clients.
Using well optimized images to display a specific type face is often your only alternative (at least that’s been my experience).
To expect positive results across a multitude of email clients (and versions) using CSS only is well, selling yourself and your CEO false hope really.
Just my opinion,
Cheers!
I’m curious, what is the brand’s typeface? If it’s Helvetica, Arial, Georgia or Times New Roman, then it’s indeed highly possible. Otherwise, I have to agree with Chris and the comments here.
Additionally, I would check out these resources:
http://www.campaignmonitor.com/gallery/
http://mailchimp.com/resources/html-email-templates/
Show your favorites to your boss. Best case scenario, she’ll be able to agree that branding, in fact, very decent branding is still possible without the body copy being displayed in the organization’s typeface.
Try searching for Cufón.
I think that javascript support in e-mail is even less supported than @font-face….
I tried for a recent project Cufon, it’s not bad but maybe Rob is not wrong…
I’m quite astonished about the answers!!
Perhaps my knowledge about email client technology is low.
Please correct me but I though that Thunderbird uses the same technology then Firefox to display HTML and Outlook uses the render of Word to display it. I do not know what Word can do but I do not think that it is so bad.
Seems to me that you’d never tried it. I’m not sure about the Thunderbird part, but what i can tell you, is that getting any good coded, standards based HTML & CSS stuff done in Outlook is web developers hell.
At work I’ve to deal often with HTML e-mails and Outlooks support for usual web dev techniques is even worse than IE6′ support. At least when it comes to the 2007 and 2010 versions. 2003 was on par with IE6, because of using the same rendering engine.
Like Ruby said, it’s like coding in the 90s.
Yay! I was just talking to the same reader earlier this week and so this is super-topical and interesting to me.
Creating a custom font pixel by pixel really does seem like the only option but oh the horror.
Ultimately I hope the CEO realizes that spending 100 hours on a cutting (bleeding? goring?) edge email is not nearly as valuable as spending a handful of hours improving their website.
Cross client rendering for email, like Ruby says, is very difficult since there are no standards. Outlook, where a majority of emails (depending on content and recipient) are opened, use Word 03, 07, 10 and Webkit (Outlook 11 on Mac only) to render emails. HTML email feels like a canoe compared to an aircraft carrier on the open seas.
Agree with the first commenter, with some clarification. I’m sure that a few email/browser combinations might be able to render the special CSS needed for @font-face import — but Gmail will simply ignore all CSS that isn’t inline. And I’d expect that a fair share of this audience of 20K would use Gmail.
HTML email is tables for layout, inline styling, limited use of page-wide CSS, and none of the newest CSS3 bits and bobs.
Images will work. You don’t have another option.
The new versions of outlook are one of the biggest issues. Old versions of it (2003 and lower) used Internet Explorer’s HTML engine to figure out HTML, then the geniuses at Microsoft thought it would be a good idea to switch it over to Microsoft Word to do this job. Microsoft Word! A Word processing program to handle HTML?!
Anywho,
I have worked on several emails that pushed the envelope and I would agree with Ruby and everybody here, it’s not really possible and it’s not really worth it. Create the headlines or call-outs with an image, use the appropriate alt text and title text and call it a day. Were these 20K people a list that your boss purchased, or are these clients of yours that already have your company listed as a safe sender? If that’s the case then you really shouldn’t have many issues with blocked images assuming you don’t host them someplace that offices might block.
I’m all for progress but using @font-face would be the wrong choice here unless you know your audience really well. One of my clients has a subscriber base of 50,000 which is strictly B2B. 50% use Outlook 2007/10 and another 25% use Outlook 2000/03 as their email client according to our latest MailChimp stats. So the HTML behind their email campaigns is filled with tables, inline styles, and other outdated styling practices just to ensure compatibility.
I use the Opera Browser with it’s in-built mail client, and although it doesn’t have a high user base, I think if we submit feature request’s to the relevant mail clients then @font-face support would become the norm!
It’s time for users to demand change, NOW!
http://my.opera.com/community/forums/findpost.pl?id=11468602
To answer strictly to the “Would it be possible to draw an entire typeface in CSS” part:
.fontsquirrel generator in expert allows you to generate base64 code to embed a font in CSS.
There is also the possibility of base64-ing an image to CSS and HTML: http://www.base64-image.de
If only there was a standard across email clients!
Indeed. That would solve all these problems…
if only there was a standard across all web browsers.
As someone who has to create email templates on a daily Basis, I think it’s important to note that – just as Ruby said above – @font-face is a non-starter as well as a lot of other css. Unfortunately Outlook 2007/2010 still comprises between 30% – 40% of your audience depending on your target market. This means that coding html emails for maximum consistency is basically coding to accommodate Microsoft Outlook.
Outlook 2007/2010 uses Microsoft Word’s engine to render emails instead of Internet Explorer’s . This means that there are a myriad of css rules not applicable to your email, not to mention that instead of coding in modern html you are forced into the tables era of the 90’s.
A good starting point is Sean Powell’s boilerplate template. It can be found on github at https://github.com/seanpowell/Email-Boilerplate/blob/master/email.html. Most of the css will need to be inlined to render properly but it is a wonderful starting place.
Also, if you don’t want to take the time you convert your style sheet to inline css you can you the email inline styler courtesy of TorchBox at http://inlinestyler.torchboxapps.com. Not only does it inline your css for you, but will also give you the percentage of email clients that will render it correctly.
The equivalent of The Web Standards Project (WaSP) is the Email Standards Project. It’s equivalent in terms of aspirations and goals, but not real world successes.
I am not sure why all these templates sites like mail chimp and campaign monitor us things that arent supported i just opened a mail chimp template and it had 200 lines of style in the head… Outlook is going to to ignore all of it.. I agree that the guys at MS are retards for rendering html emails with WORD but we have to code accordingly i would use images for your fonts
Outlook doesn’t ignore <style> in the <head>. It even ads in a whole bunch of its own styles there in messages it receives. Fun!
This discussion will bring a lot of brain-power on the matter. You can’t just say: “it can’t be done” and hope that the css gurus out there will live with it. If just there was a way to obtain a sort of absolute positioning…
javaScript is disabled in most email programs will produce an alternative solution where the email link to a web page that contains the JavaScript. I would recomond you to use images for email client page and implement Cufon in email link web page…
I think most of the people prefer to read mailers in a browser window…
I always mailers in a browser window which I get in my inbox…
*I always read mailers in a browser window which I get in my inbox…
I’ve literally never opened an e-mail in my browser, if they can’t be bothered to go through all the effort that I have to go to to support e-mail clients, then I am not reading their e-mail
I know it’s probably a reach but what about trying to save a font file (de)encoded(?) in something like a localStorage or a cookie and accessing it that way? I theory, if you can save the font somehow, you should be able to access it without font-face.
Not that I’ve ever tried it, just throwing out some weird ideas.
* in theory #typo
Agree with ruby
@Tim Wright: No effense but ahm… that’s not even remotely possible in any way right now.
Aside from the fact that most web clients (hotmail, gmail) highly manipulate and limit your markup but stripping away head, link, script elements and stripping away styles related to background, position and sometimes even padding from inline style attributes, in an environment that has no JavaScript access and is either is not a valid HTML document at all, or sometimes HTML 3.2, certainly the last thing one could think of is trying to use HTML5 JavaScript APIs…
I’ve given up on nice email templates myself a few years ago, at least for the purposes of mass marketing.
My current strategy:
* Do it perfectly the way you want, and serve it online from a web server with a public url.
* Save the complete design a single image (JPEG or PNG) and as HTML: Be very minimalistic, just the img-element in a single div, in the body-element in the html-element. Give both the html, body and div element the same inline style attribute value to fill the surrounding background color solidly and text-align center for the image. Then last but not least, an anchor tag before the image linking to the online version, and wrapping another anchor tag around the image as well.
Agreed with ruby
I will have to go with the consensus on this topic. I have done my fair share of HTML emails and though better today, some of the same issues of yesterday still exist. Possibly, your CEO needs to be presented with a bit of education.
If this is going to a reactive and interested audience of 20K then point them to a webpage with a very simple single call to action email – click here to meet our new brand.
If you are introducing this audience to your fancy new brand and you have design aware leadership there is probably more info that is needed to be conveyed than can be fit into the body of an email. Take the onus off of the possible 20,000 different email client configurations – and create a super clean responsive HTML & CSS page that will look great pretty much anywhere.
In my own experience the emails I get where I have only one action (click here) and a simple premise that interests me – I am most likely to click and participate. And those over designed HTML emails which are trying to tell me how great they are in their fancy colors and swanky fonts are forgotten as easily as clicking delete than a cool webpage (which I might bookmark and share!)
JS
I’m worried…
You guys are end users & developers that are EXPECTING nothing to change.
I thought that if we were a bit more proactive about requesting support in your client that you regularly use then maybe we would have @font-face support by now, at least in some of the clients.
Some links to help you to learn about the current tech…
Embedding data in css…
http://jonraasch.com/blog/css-data-uris-in-all-browsers
Overview of mime and mulit-part emails:
http://www.aspnetmime.com/help/default.htm?page=welcome/overviewmimei.html
w3g.org – css3-fonts – #font-resources
http://dev.w3.org/csswg/css3-fonts/#font-resources
So, set up a test html with CSS embedded this way and see if it works on different clients! –
PS. I’m actively looking into this.
email templates is really a headache.
I am a hard core n00b. but maybe this might help. it works good.
http://www.imgtocss.com/
It’s the job of the CEO to be a visionary. With enough time and money, anything is possible. Tell your CEO you need a huge chuck o’ cash or to wait until email clients catch up to browser CSS support capabilities, i.e. 2030. In the mean time, use images or a font stack that will give you at least something close to the font you’re after. If it came from a CEO, it’s probably Comic Sans. :)
Ditto, Images are the only logical way to create and aesthetically pleasing email that will continue to show your brand. E-Mails CSS support is lack luster and will continue to develop but at a very slow rate. Every big company use’s image email shots and I dont see whats stopping you from? Good Luck none the less.
There are ways to convert images into table cells of 1 x 1 pixel with a background color that can render a nice rich layout in an email.
I am missing something here in that you mentioned that this was to send out emails to 20k people to introduce a new brand.
Seems like a very large number of emails to send and that this would be perfect for something that would be sent though a service such as mailchimp.com or similar to handle such as campaign and make for a great way to introduce a new brand.
There are of course many other email marketing companies as well;
here’s a few…
mailchimp.com
madmimi.com
constantcontact.com
These all allow great control over the content in the emails and also handle sending the emails in a professional manner.
Hi Ruby and everyone else. This can be done, its expensive and that is the issue.
The trick is how. Some designers just send a premade image file, personally I dont like this.
Then there is the issue of javascript not bieng supported. In My experience the key thing is the first few lines – I always serve the HTML /css from a remote server so that the failover is plain text with links. The code picks up if this is one of those crappy old email clients and then serves text links or if the email does download a small 1px image the server tries to supply the rest in CSS/image replacement/base64 etc. The cost of developing this is huge. That is the question the CEO must satisfy. Can they pay?
@hilary Interesting concept.
So the Email is structured with the first few lines calling to the remote server (hosting the html/css) to see if a 1px img loads and if so then load in all of the html/css but if it does not load that 1px it continues to load the basic email src which is the text only version with links. Is this done with conditional CSS or javascript?