Typography

This page provides some common typography patterns for email, but anything on the main Stacks typography page is fair game.

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 <a href> tag) and zero out unintended defaults (like the margin around a <p> tag)

Paragraphs

1
2
3
4
5
<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).

Headlines

1
2
<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

Lists

1
2
3
4
5
6
7
8
9
10
<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!
  1. You get a list item.
  2. And you get a list item!
  3. Everyone gets a list item!
1
<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.

1
2
<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.

Note: Using 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.

1
2
<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>

On Thursday we’ll be doing on planned maintenance on our New York server, so the parts of the site might be unavailable.

On Thursday we’ll be doing on planned maintenance on our New York server, so the parts of the site might be unavailable.

Note: Using 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.

Code

1
2
3
4
5
6
7
<!-- 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.

Known Issue: in Windows Outlook 2003 - 2019, preformatted code blocks appear like this.

Blockquotes

1
2
3
4
5
<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.

Known Issue: in Windows Outlook 2003 - 2019, blockquotes appear like this.

Preventing Text Wrapping

A non-breaking space (&nbsp;) 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 ☝️

1
2
3
<p style="margin: 0 0 15px 0;">Now with Stack&nbsp;Overflow you can level up.</p>
<p style="margin: 0 0 15px 0;">The last sentence shouldn’t produce an&nbsp;orphan.</p>
<p style="margin: 0;">@_m("Also works for text written in$nbsp$markdown.", new { nbsp = "&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.