Email is a text based medium. Seriously. The content of an email is basically text. When people open an email, they expect to be able to read it. And I’m not just talking about people reading emails on their mobiles.

Yes, emails should look nice. Yes, pictures and photos imrove emails. Yes, it’s nice that some email clients now support video playback within an email.  But, emails are, in escence, a textual communication. So why is it that the majority or emails contain more images than text and the majority of text gets renedered within images. Well, that’s an easy question to answer, email typography is boring. I mean, here are literally 5 web-safe fonts. Literally five.

What do I mean by web-safe fonts? Fonts that you can safely rely on to be present on a large number of computers.
(As an aside, if you want to know why Windows and Mac OS render fonts differently, Joel on Software has a great article on the subject.)

Now there are lots of ways of getting nice fonts to display on web pages. Early technologies such as SIFR, and newer ones such as @font-face, CSS3 and Google Web Fonts enable beautiful fonts to be used and still allow users and search engines to view your site.  But not in email. Why? Because when designing a website you have to look at how it will render in a number of different web browsers: Internet Explorer (still the dominant browser?) in several versions – probably at least 7 8 and 9 and maybe 6 still (particularly in China). Firefox, Chrome, Safari, Opera all have significant coverage to. The problem with email is similar but much worse – there are hundreds of email clients and that’s just for desktops. You also have mobile clients and web based clients. And guess what, all of those web based clients are going to behave differently in different browsers. Good luck testing your emails in all the different systems. (Okay now there are various inbox preview tools you can use – maybe you ESP will be kind enough to charge you to use one.)

Designing for the lowest common denominator is one approach. If you send out all your email communications as pure text  then you will guarantee that everyone will have a very similar experience reading them – a very similar, terrible experience.

There has to be a better way!

There is. Graceful degradation. There are many layers to this – at the most basic, there is the failover from HTML to text email (your emails do have a text version right?).

But even within your HTML emails there is much that can be done. Build yourself a font stack. A what? A font stack is a hierarchy of font family’s given in CSS markup which lists the font you really, really want to be used first, followed by the next best alternative and so on down to the simple declaration of either serif or sans-serif. Don’t rely on the default font stacks given to you by the particular combination of client and operating system your recipient is using (in most cases this will be a binary stack – either it will have the font you specified or it won’t), visit http://www.codestyle.org/ and set up your own. Code Style will also show you a guide to the number of people who will see each font. Bear in mind that for email you will almost certainly want to use inline CSS (as many clients will strip out CSS in the head section of your HTML) so keep your font stack as short as you can.

What are you tips and tricks for improving the readability of the text in emails? Add a comment and let me know!