Typography
This page provides some common typography patterns for email.
It’s safe and accessible to use semantic HTML tags like <h>, <p>, and <ul> for text in email just as we do for the web. The main difference in email is that CSS should be written inline to specify intended styles (like the color of an anchor tag) and zero out unintended defaults (like the margin around a <p> tag).
<td style="font-family: arial, sans-serif; font-size: 15px; line-height: 21px; color: #3C3F44; text-align: left;">
<p style="margin: 0 0 15px 0; font-size: 17px; line-height: 23px;">A lead paragraph with slightly larger text lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nisi magna, mollis luctus sapien varius, mattis ornare est.</p>
<p style="margin: 0 0 15px 0;">A regular paragraph with <strong>strong</strong> and <em>italic</em> text, consectetur adipiscing elit. Cras nisi magna, mollis luctus sapien varius, mattis ornare est. Sed non tincidunt erat, ut commodo augue.</p>
<p style="margin: 0;">A paragraph with no margin (useful for the last paragraph in a section).</p>
</td>A lead paragraph with slightly larger text lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nisi magna, mollis luctus sapien varius, mattis ornare est.
A regular paragraph with strong and italic text, consectetur adipiscing elit. Cras nisi magna, mollis luctus sapien varius, mattis ornare est. Sed non tincidunt erat, ut commodo augue.
A paragraph with no margin (useful for the last paragraph in a section).
<h1 style="font-weight: bold; font-size: 27px; line-height: 27px; color: #242629; margin: 0 0 15px 0;">I’m a headline</h1>
<h2 style="font-weight: bold; font-size: 21px; line-height: 24px; color: #242629; margin: 0 0 15px 0;">I’m a subheadline</h2>I’m a headline
I’m a subheadline
<ul style="padding: 0; margin: 0 0 15px 0; list-style-type: disc;">
<li style="margin: 0 0 10px 30px;">You get a list item.</li>
<li style="margin: 0 0 10px 30px;">And you get a list item!</li>
<li style="margin: 0 0 0 30px;">Everyone gets a list item!</li>
</ul>
<ol style="padding: 0; margin: 0 0 15px 0; list-style-type: decimal;">
<li style="margin: 0 0 10px 30px;">You get a list item.</li>
<li style="margin: 0 0 10px 30px;">And you get a list item!</li>
<li style="margin: 0 0 0 30px;">Everyone gets a list item!</li>
</ol>- You get a list item.
- And you get a list item!
- Everyone gets a list item!
- You get a list item.
- And you get a list item!
- Everyone gets a list item!
<a href="https://stackoverflow.com/" style="color: #0077CC; text-decoration: none;">Go to the homepage</a>
If email content is written in Markdown, we can’t write inline CSS into link tags. Left unstyled, links will appear like this. To style links contained in Markdown text, add a class="has-markdown" to any parent tag that might contain a Markdown link.
<p style="margin: 0 0 15px 0;">@_s("I’m a text string in markdown.")</p>
<p style="margin: 0 0 15px 0;" class="has-markdown">@_m("I’m a *bold* [text link](https://www.stackoverflow.com) in markdown.")</p>I’m a text string in markdown.
I’m a bold text link in markdown.
class="has-markdown" applies styles defined in the <style> tag. Only email clients that support <style> in <head> will render has-markdown links properly.
Some email clients auto-detect certain text strings (like dates, times, and locations) and automatically convert them into hyperlinks. We can’t remove the link, but we can make the link appear like the text around it by negating a few CSS styles.
<p style="margin: 0 0 15px 0;">On Thursday we’ll be doing on planned maintenance on our New York server, so the parts of the site might be unavailable.</p>
<p style="margin: 0 0 15px 0;">On <span class="unstyle-auto-detected-links">Thursday</span> we’ll be doing on planned maintenance on our <span class="unstyle-auto-detected-links">New York</span> server, so the parts of the site might be unavailable.</p>class="unstyle-auto-detected-links" applies styles defined in the <style> tag. Only email clients that support <style> in <head> will render has-markdown links properly.
<!-- Preformatted code block -->
<pre style="margin: 0 0 15px; background-color: #EFF0F1; padding: 4px 8px; border-radius: 3px; overflow-x: auto; font-size: 13px; line-height: 17px; "><code style="color: #242729; font-size: 13px; line-height: 17px; font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, sans-serif;">
…
</code></pre>
<!-- Inline code -->
Format <code style="padding: 1px 5px; background-color: #EFF0F1; color: #242729; font-size: 13px; font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, sans-serif;">inline code</code> like this.var obj = {};
obj.categories = pm.variables.get("category_id");
obj.packages = pm.variables.get("package_id");
obj.type = "add";
pm.globals.set("switch_json", JSON.stringify(obj));
console.log("request body: " + pm.globals.get("switch_json"));Format inline code like this.
<blockquote style="margin: 0 0 15px; padding: 4px 10px; background-color: #FFF8DC; border-left: 2px solid #ffeb8e;">
<p style="padding: 4px 0; margin: 0; font-size: 15px; overflow-wrap: break-word;">Write a function that takes a string consisting of alphabetic characters as input argument and returns True if the string is a palindrome.
…
</p>
</blockquote>Write a function that takes a string consisting of alphabetic characters as input argument and returns True if the string is a palindrome. A palindrome is a string which is the same backward or forward.
A non-breaking space ( ) can be used to prevent a group of words from breaking onto multiple lines. Useful for keeping names together and preventing typographic orphans and widows.
Inspect the line above to see ☝️
<p style="margin: 0 0 15px 0;">Now with Stack Overflow you can level up.</p>
<p style="margin: 0 0 15px 0;">The last sentence shouldn’t produce an orphan.</p>
<p style="margin: 0;">@_m("Also works for text written in$nbsp$markdown.", new { nbsp = " ".AsRawHtml() })</p>Now with Stack Overflow you can level up.
The last sentence shouldn’t produce an orphan.
Also works for text written in markdown.
Sometimes we use web fonts in emails to match the aesthetic of a marketing campaign or announcement. Web fonts don’t have great support in email clients, so here’s how we ensure our web font displays in as many email clients as possible:
- Include an external stylesheet at the top of the email’s
<head>tag. Sites like Google Fonts provide this code. - Windows Outlook sometimes chokes on web font references and defaults everything to Times New Roman. To avoid this, wrap the web font reference in a
<!--[if !mso]>tag (so Windows Outlook ignores it) and define a fallback font for Windows Outlook inside a<!--[if mso]>tag. - Lastly, reference the web font at the beginning of the font stack, followed by a system fallback font for email clients that can’t display (and ignore) the web font.
<head>
<!-- Desktop Outlook on Windows sometimes chokes on web font references and defaults to Times New Roman, so we force a safe system font fallback. -->
<!--[if mso]>
<style>
* {
font-family: arial, sans-serif !important;
}
</style>
<![endif]-->
<!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. More on that here: http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ -->
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,700" rel="stylesheet">
<!--<![endif]-->
</head>
<body>
<h1 style="font-family: 'Roboto Slab', arial, sans-serif;">…</h1>
<p style="font-family: 'Roboto Slab', arial, sans-serif;">…</p>
</body>I’m a Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.