Typography is a type of key model components that you just by no means discover when it’s finished proper, however when it’s bizarre…it’s actually bizarre. (No shade to Comedian Sans, however…)
Emails ought to feel and appear like they belong to your model, however—like with all issues e-mail—it’s not so simple as copying-and-pasting a font from the model pointers your design group spent hours deliberating over.
With e-mail advertising and marketing, you have got two decisions in your reside textual content: Internet fonts and internet secure fonts. On this put up, we’ll discuss by the variations between the 2, why we advocate internet secure fonts, and how one can embed them in your emails so you possibly can keep aligned along with your model and make your emails accessible for your entire subscribers.
On this article we’ll cowl:
Internet fonts vs. internet secure fonts
You’re in all probability studying this weblog put up with an online secure font—fonts and love like Arial, Helvetica, and Open Sans. These are pre-installed fonts that include all working techniques, so they’ll render appropriately in the event you use them in an e-mail.
You even have the choice to make use of an online font. These are hosted externally, providing you extra selection (like utilizing your model’s customized font), however probably much less dependable for e-mail templates.
Internet FontsWeb Protected FontsMore inventive freedom with a greater diversity to select from.Your subscriber doubtless has these fonts put in, making these a secure selection.Align your emails with the remainder of your branding supplies.Subscribers know what they appear to be and count on to see these fonts on-line.Larger threat of your e-mail not rendering precisely as deliberate, requiring extra testing and growth time.There are a restricted variety of internet secure fonts, making it troublesome in your model to face out.
Let’s dive deeper into every:
What are internet secure fonts?
Internet secure fonts immediate the net browser to tug the font out of your native font listing, AKA the pre-installed fonts on everybody’s computer systems. Internet secure fonts are secure to make use of as a result of there’s a powerful probability your subscribers will have already got them.
The draw back of internet secure fonts is that your choices are extra restricted. Plus, internet secure fonts are much less prone to stand out (if that’s what you’re aiming for) as a result of they’re so widespread.
Under are a few of the finest fonts for e-mail attributable to their readability, widespread assist throughout platforms, and internet secure nature:
ArialHelveticaVerdanaGeorgiaOccasions New RomanTahoma
You may’t assume {that a} widespread font like Garamond, Courier New, or Cambria might be mechanically internet secure. Earlier than you select an online secure font (or a fallback font for internet fonts, which we’ll discuss extra about), double verify with a listing like this one.
What are internet fonts?
Internet fonts are pulled from a server, both one you host your self or an exterior one equivalent to Google or Adobe. Due to this, the number of fonts you should use is way bigger and can work on any pc…so long as the e-mail consumer cooperates.
Utilizing a customized font feels like a good suggestion, particularly in case your model already makes use of one for different deliverables. We’ll discuss extra about e-mail consumer assist in a second, however spoiler: Gmail and Outlook trigger some hassle. (Can we count on the rest? 🫠)
Construct impactful emails with knowledgeable strategies
Acquire the important abilities in e-mail growth. Create responsive, high-performing emails that look nice on any system.
Grasp growth
How fonts work in e-mail
When designers decide fonts for his or her web site, they will usually decide something they need, together with a customized font. That’s as a result of on a web site, you should use CSS or HTML code to level to wherever the font is hosted on-line, whether or not it’s a Google Font, Adobe Font, or one thing else.
Emails don’t work like that as a result of…after all they don’t.
Your e-mail code declares a font utilizing a CSS property known as font-family. When your subscribers open your e-mail, the browser reads the font-family property and pulls within the font to make use of. With internet secure fonts, that’s easy-peasy. However e-mail purchasers get choosy about which internet fonts they assist, so you possibly can’t simply decide any font.
“I 100% advocate utilizing a fallback font anytime you ship an e-mail, as a result of internet fonts aren’t supported in every single place,” says Carin Slater, Litmus’ Lifecycle Electronic mail Advertising Supervisor. “In principle, it must be very easy, however that is e-mail we’re speaking about right here.”
This font-family property can have only one font title or a number of font names—also known as a font stack. With out itemizing a number of font names, the e-mail consumer will get to determine your backup font.
The issue with customized internet fonts in emails
Customized fonts introduce larger threat to your e-mail advertising and marketing program. As a result of it’s not tremendous doubtless the typical reader will discover the variations between your branded font and an online secure font, it’s safer to go together with an online secure font. That doesn’t imply you’re caught with the same-old fonts that everybody makes use of like Helvetica, however it does require extra growth and testing time to get round some widespread points:
1. Rendering points
You need to use a customized internet font in your emails if that issues to your model. However you’ll spend plenty of additional effort and time in growth and testing to take action, and also you’ll nonetheless want to decide on a fallback font it doesn’t matter what.
In the event you don’t take note of typography, you’ll see your e-mail render just a bit otherwise on completely different gadgets. If the default font is a bit of taller, for instance, it might bump your entire textual content down a line, pull in much less preview textual content, or mess up your fastidiously crafted responsive coding. Customized fonts may additionally intrude with components like normal HTML bullets, resulting in misaligned designs.
These are the sorts of tiny particulars that make an e-mail marketer need to bang their head in opposition to a wall.
2. Compatibility challenges
Since internet font assist is hit-and-miss throughout e-mail purchasers, it’s a good suggestion to investigate the place your subscribers sometimes open emails. If most of your subscribers use an e-mail consumer supporting internet fonts, strive it. In the event you discover your viewers is principally on a non-web font-supportive e-mail consumer, you possibly can keep away from losing effort and time.
*(ish? Among the webfonts have been displaying up however it might be that the fonts have been loaded on the pc)**(Google overrides fonts – default on Android is Roboto, on iOS seems to be like Helvetica)***(Fonts overridden – Roboto is default sans-serif)****(ish. Favored Roboto, so there’s restricted assist of very particular internet fonts – in all probability particular ones from Google Fonts, probably solely Roboto because it’s Google’s default)
3. Influence on person expertise
The factor is, having a customized internet font is the type of design element that few, if any, of your subscribers will discover. “A big a part of the inhabitants isn’t going to have the ability to inform the distinction between Proxima Nova and Helvetica,” says Slater. “Keep in mind that the purpose of your e-mail is to get the message throughout. We find it irresistible once we can design one thing lovely, but when it’s lovely and it’s unreadable, that’s a difficulty. It must be practical first.”
When will they discover? In case your typography is making a rendering difficulty that makes it inconceivable to learn your emails. Damaged fonts negatively impression your person expertise, which makes it that a lot much less doubtless somebody will open or click on in your e-mail sooner or later. That’s the alternative of what we’re going for once we design emails.
In the end, typography performs a vital function in creating emails that convert by guaranteeing readability and sustaining knowledgeable, on-brand design.
Greatest practices for utilizing internet fonts in emails
In the event you’re going to go for an online font anyway, maintain these items in thoughts to stick to e-mail design finest practices:
1. Select a fallback font that matches your model
If you wish to use an online font, select a fallback strategically that matches your model’s font. Slater recommends a website known as CSS Fonts to seek out lesser-used internet secure fonts that work in your model. The positioning tells you what proportion of PC and Mac customers have every font so you possibly can stability type and confidence that almost all subscribers will see your font of selection.
Whereas deciding on fonts, additionally guarantee they distinction nicely along with your e-mail’s background colour HTML settings to take care of readability.
“You probably have lots of people opening on Home windows, in Outlook, and also you’re utilizing a customized font, which means only a few individuals will truly see your internet font,” she says. “If that’s the case, I’d return to the design group and present them the numbers of how many individuals truly can have the model expertise they need to create. Between CSS Fonts and Litmus Analytics, you possibly can see precisely how many individuals will see their chosen font. That normally helps begin a productive dialog for the fallback.”
Search for a fallback font that’s:
In the identical font household as your internet font, like serif or sans-serif, to retain your design.An identical x-height to forestall your e-mail design from falling aside when the fallback font is in use.
Observe the refined variations in x-height between the fonts Verdana, Arial, and internet font Proxima Nova.
Every e-mail consumer has a default font if the font listed within the font-family stack is unavailable. For instance, Gmail makes use of Arial, Apple Mail makes use of Helvetica, and Outlook makes use of Occasions New Roman. This goes for gadgets, too: MacOS makes use of SF Professional.
2. Keep away from image-only emails that create accessibility points
As a marketer and designer, the strain to remain on-brand in e-mail with colours, design, and—sure—typography. Internet fonts allow you to exhibit your model with out counting on photographs in your textual content. To not point out, relying closely on photographs for e-mail design can restrict accessibility, as many subscribers have photographs turned off by default.
A method across the fallback difficulty is to make use of photographs as an alternative of reside textual content in your e-mail. However that’s type of a frying pan-fire state of affairs, as a result of whereas your font will look nice, image-only emails aren’t accessible for subscribers with display readers or photographs turned off.
“Typically an answer for individuals who don’t need to take care of internet fonts, however nonetheless need their model fonts, is to place all of this textual content into a picture. It’s one factor if that’s for a headline or emblem, however for physique copy, you’re going to lose your message,” says Slater. “It’s a lot simpler to incorporate a fallback than attempt to add large blocks of alt textual content and code round photographs.”
In the event you lock vital copy in photographs as a result of it’s a option to keep on model, parts of your viewers received’t know what your e-mail says.
3. Check your emails earlier than each ship
Your subscribers could have a really completely different expertise along with your emails relying on their e-mail consumer, browser, and system. (What’s new, proper?) That’s why in the event you plan to make use of an online font, it’s tremendous vital to check your emails.
“We use Proxima Nova right here at Litmus, with Helvetica as our fallback,” says Slater. “Helvetica is simply the tiniest bit wider than Proxima Nova, so in some circumstances, a phrase will find yourself on one other line, or generally it makes a textual content block taller than we would like it to be. That’s such a minor element, but when we didn’t take a look at our personal emails with Litmus, we wouldn’t have the ability to repair it so our emails look good in every single place.”
Ship with whole confidence
Preview emails in 100+ purchasers, catch errors, and guarantee accessibility. Lower QA time in half.
Begin e-mail testing
How to decide on the correct internet secure fonts in your model
Whether or not you go for an online font as your major or stick with an online secure font, it may be onerous to know what to decide on with all of the choices on the market. “Our design group at Litmus is sensible, and so they inform me what to do,” jokes Slater. “I’m glad we sat down collectively to decide on our fallback font, and we considered that in the beginning.”
Right here’s how to decide on an online font that works finest in your model:
1. Model consistency
Your typography impacts your total feel and appear as a model. Deciding on constant typography ought to align along with your total e-mail design system to create a cohesive model expertise.
It doesn’t matter what fallback you select, begin with one that appears as shut as attainable to the net font you’re already utilizing throughout your different model touchpoints, like your web site, app, or on product packaging. To your font decisions, take a look at classes like:
Serif vs. sans serifMonospace vs. variable-widthHeaders vs. physique copyVariants of your chosen font in the identical font household
Your selection of font ought to mirror your model id—whether or not that’s a extra formal, traditional look or a squiggly Gen-Z vibe. Use the identical font for the complete e-mail, from header to e-mail footer.
2. Readability throughout gadgets
Electronic mail accessibility has by no means been extra essential. It’s vital to discover a internet font that matches your model but remains to be accessible. Some sorts of fonts are simpler than others to learn:
✖ Ornate or ornamental fonts, equivalent to show, cursive fonts, or handwriting fonts like Lucida Calligraphy or Brush Script MT, could make it troublesome for individuals with visible impairments or dyslexia to distinguish letter shapes.✔ Sans-serif fonts don’t have prolonged options or curls of their letters. Fonts like Arial, Calibri, Century Gothic, or Helvetica are simple to learn.✔ Slab fonts like Museo Slab and Rockwell have thicker traces and are additionally thought of accessible.
For some audiences, sticking to a plain textual content e-mail format ensures common readability and avoids potential font rendering points altogether.
When you consider readability, deal with the spacing and form of the font. When unsure, run your e-mail by an accessibility checker like ours at Litmus. We take a look at in opposition to 40+ completely different accessibility metrics to guarantee that your emails could be learn by your total viewers.
3. Tone and emotion
Your font could be an indicator of your model id, however it additionally helps give form to the tone and voice of your emails. Your copywriters are already spending time crafting your message and your font may help convey it to life.
Evoke the energy and energy of the Roman empire with fonts like Palatino or Optima, give your message a typewriter really feel with old school fonts like Lucida or Monaco, or give it a mid-aughts journal really feel with Didot.
Energy up your e-mail technique
Acquire knowledgeable insights and trade benchmarks from the newest State of Electronic mail Report. Elevate your e-mail recreation.
Entry the insights
The best way to embed internet fonts in emails
As a result of internet fonts sometimes aren’t discovered on somebody’s native system and as an alternative are hosted elsewhere, you will need to “embed” or import your internet font into your emails earlier than utilizing them utilizing HTML or CSS.
1. Get the URL of your font file
To start out, you want the net font’s URL to name it into your e-mail. The place you’ll discover it is determined by the font supply.
In the event you’re utilizing an online font service: the positioning or software ought to have the URL. In the event you’re utilizing Google Fonts, discovering the URL is difficult however not too troublesome. Learn how within the subsequent step for the @font-face embed methodology.
In the event you’re internet hosting the font your self: get the URL from the place the net font sits in your server. Verify that it’s a public URL and never coming from a neighborhood server. In any other case, your subscribers received’t have the ability to entry the net font and can see a fallback font as an alternative.
2. Import the net font utilizing one in every of three strategies
There are three strategies for embedding internet fonts in e-mail (and a caveat that will restrict which methodology you should use). The three strategies for embedding your font are:
Importing an online font utilizing <hyperlink>
The <hyperlink> methodology masses the useful resource inline because the HTML file’s code is learn (from prime to backside), which might delay your e-mail loading in case your internet font file is large. Utilizing this methodology for embedding fonts in your e-mail is comparatively easy—place this line of code within the <head> of your e-mail, close to the highest: