Whether you want to admit it or not, your emails are going to sink or swim largely based on style. From your subject line down to your footer, you need that piece of marketing collateral to be eye-catching and easy to read, and few things can accomplish that better than good font choices. Fonts can be tricky, though. How you style your words can say a lot about who you are as an organization, and shift the tone of your messaging. You don’t want your email looking like a flyer for a PTA bake sale, so let’s look at what we can do to avoid that altogether.
Web Safety First!
Not all fonts are created equal in the eyes of the web, so when it comes to choosing fonts for your emails, you’re
going to want to go with a web safe font, or an on-brand web-hosted font with a web safe backup. A font that’s web safe means that it’s a typeface that comes pre-installed on most operating systems. When you call them into your email code, they’re going to render consistently no matter who’s opening them. This is great for your marketing, because your message is going to be consistent accross your audience and your design won’t be skewed by different, changing factors. These web safe fonts include Arial, Arial Black, Verdana, Courier New, Times New Roman, and a few others. Web-hosted fonts (or web fonts) are pulled from a server, such as Google or Adobe, and can provide a much wider variety of typefaces to choose from- as long as the user’s browser or email client can successfully pull them in from the server. While web fonts give you much more variety and creative freedom, they do come at a cost: limited email client support. Depending on your audience’s email client distribution, you can usually expect that web-hosted fonts will be displayed as intended for most viewers. Those who don’t see the web-hosted font you choose will see whatever web safe font you specify as a backup. This is called a font stack.
The Most Important Words Get To Play Dress-Up!
Parts of your messaging are going to be more important than other parts, but how do you show it? You dress ‘em up
by making them visually distinct. You’re probably familiar with the best ways to do this–as they come as standard buttons on your word processor.
Bold
Make a select few words stand out from your copy! As with anything else, if you use it too much, it won’t be effective, so make sure you’re only using it on the most important words so your reader hones in on them.
EXAMPLE: We’ll be closed on Monday, July 4th in observance of the holiday.
It’s worth noting that the <b> tag won’t differentiate the word on a screen reader, so you’ll actually want to use the <strong> tag to give the word the proper emphasis.
Italic
Also used for emphasizing certain words, putting a term in italics is a good way to get it to stand out, but it also has uses outside that. If you have a new product coming out, or you’re discussing the title of something, you can italicize it. It can also be used to point out words in a foreign language, or sounds as words if you’re writing something dynamic like Bang!
EXAMPLE: Read all about it in our new book Marketing For A New Tomorrow.
As with emboldening words, the most used coding for italicized words–the <i> tag–won’t read correctly on screen readers, so you should use <em> tag instead.
Strikethrough
If you have information that’s been updated, or maybe you have a product on sale and want to show that the previous price has been slashed, then the strikethrough is your best friend! A lot more people have been using it because it conveys the idea of change very well, but it does not read correctly on screen readers. There isn’t a workaround for it as of now, so if you’re taking accessibility into account, make sure you’re providing enough context in the copy to convey the correct idea.
EXAMPLE: Don’t miss our Summer Sale! Pro Plan was $200, now only $150 for a limited time!
Don’t Stand So Close To Me
You may not think about it, but how your letters and lines are spaced can affect readability, and can have a direct
impact on how long people stay reading what you’ve written. Don’t crowd your lines or letters. Let them breathe.
EXAMPLE:
Compare This: The quick brown fox jumps over the lazy dog
To This: The quick brown fox jumps over the lazy dog
One is readable, and one you don’t even want to look at, right? The one with the letters too close together makes you feel like you’re squinting at the sun. That alone is enough to make someone click away. Don’t give them an excuse.
The same goes for the spacing between lines, or line-height. If you don’t have any line-height, everything is going to look cramped and messy, but if you stick to the general standard of 1.5x line height, then everything has room. Any more than that is going to be a needless waste of space.
EXAMPLES:
No Line Height
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla.
1.5x Line Height
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla.
2x Line Height
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla.
