1

What are the UX implications of using Web fonts in email templates? It seems that not all email clients support web fonts, but I'm not sure of the consequences of this.

3
  • Many email clients that don't support web fonts, might also be supporting plain text variants of email body. It would be tedious if your images get converted into attachments.
    – Harshal
    Commented Mar 20, 2015 at 6:39
  • I read this to be about the UX impact of an implementation choice, rather than an implementation, so I consider it on topic.
    – JohnGB
    Commented Mar 20, 2015 at 13:36
  • Not sure what the down-votes are for here... whilst the answer is "don't do it", it's still a good/useful question for others. Up-voting.
    – mpdc
    Commented Mar 20, 2015 at 14:04

2 Answers 2

1

Avoid using the custom font whenever possible.

Web font aka custom font is not pre-installed to your digital device. Is it an English/Unicode/Chinese web font? It takes time for user's digital device to download the font.

What if the email client does not support the embedded method of using web font?
What if the digital device is in offline/airplane mode?
What if the user's mobile device comes with a limited data plan?

Use Web safe font instead

Always add context for images

(Non decorative) Background image can be supplied with alternative text to enhance accessibility.

What if the email is classified as SPAM or highest secured mode is enabled so that image is hidden by default?

3

Litmus has some good recommendations on this that I've been following:

  1. Use a good base font (web safe)
  2. Enhance for the clients that support it
  3. Beware of Outlook

As long as you are prepared for the worst case scenario (with a web safe font), I think it's OK to offer a better experience for those who can support it.

The more similar the typefaces are (safe and not safe) the better it would be, of course.

As always with email, test on as many devices/clients as possible.

4
  • Welcome to the site, @tdnvl. Can you clarify how you determine if a font is "web safe"? Commented May 20, 2015 at 20:21
  • Thank you, @GrahamHerrli! There are many sources online that post lists of Windows/OS X/etc. web safe fonts. cssfontstack.com is a good start but there are many more.
    – tdnvl
    Commented May 26, 2015 at 3:41
  • To clarify, I mean how are you defining "web safe"? The OP asks about displaying web fonts in desktop email clients. Saying to use a font that's safe for the web doesn't appear to answer the question of how to make sure that the font works for desktop email clients. Commented May 26, 2015 at 15:55
  • 1
    @GrahamHerrli, simply by sticking to a font that is present by default on Windows and OS X. A desktop email client will rely on the fonts that are installed on the machine. If you know that the font is present on the machine (Arial is a good bet, for example), you can predict how the email will display. Am I being clear? Apologies for the confusion...
    – tdnvl
    Commented May 26, 2015 at 20:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.