Email Templates / Knowledge

Litmus Guide For Bullet Points in Emails

Published: 11 September, 2022

Are HTML bullet points useful in emails?

Bullet points in plain text emails are an incredibly useful tool for content hierarchy. They allow subscribers to read the key elements of your emails quickly and easily. They are a great way to set apart important information from the rest of the email.As so often in email design, something that sounds as simple as adding a bulleted list actually can turn out to be a bit more difficult than you first thought. Email clients can render bullet points in very different ways, encouraging some email builders to avoid them altogether or use tables to force them into order, making it hard for subscribers using screen readers.So, if you’re looking to add bullet points to your emails without forsaking accessibility, then keep reading…

Using list tags for HTML bulleted lists

Here at Litmus we use list tags when we code HTML email bullet points :

  • <ul> indicates an unordered list, or a bulleted list of items
  • <ol> indicates an ordered list, or a numbered list of items
  • <li> indicates a line item in either an unordered or ordered list of items

If implementing list tags in your emails is something you’re interested in, read on!

How to get started with semantic bulleted lists

To get started with bulleted lists in your emails, here’s the minimum code you need to make them work.

<ul style="margin:0; margin-left: 25px; padding:0; font-family: Arial, sans-serif; color:#495055; font-size:16px; line-height:22px;" align="left" type="disc">
    <li>
        Unordered Disc Bullet
    </li>
</ul>
<ol style="margin:0; margin-left: 25px; padding:0; font-family: Arial, sans-serif; color:#495055; font-size:16px; line-height:22px;" align="left" type="A">
    <li>
        Ordered Uppercase Alphabet Bullet
    </li>
</ol>
Example of bulleted lists in email showing standard bullets

In this code, you’ll notice a couple of things we’ve made sure to include. One of those is identifying the specific type of bullet we’re interested in including in our list, with a defined type attribute in the <ul> and <ol> tags. For <ul>, we’ve specified a disc-style button. For <ol>, we’ve specified “A”—so list items would be identified with A, B, C, and so on—but numbers and both lower and upper case letters and roman numerals can also be used in ordered lists. Here is the full list of type attribute options that you can use in email:

  • Unordered list type options
    • disc (read as “bullet” • )
    • circle (read as “white circle” ○ )
    • square (read as “black square” ‎■ )
  • Ordered list type options
    • 1 (default decimal numeral)
    • A (uppercase alphabet)
    • a (lowercase alphabet)
    • I (uppercase roman numeral)
    • i (lowercase roman numeral)

There are a couple of things of note about how we’ve styled the margin in these lists. We’ve also included “margin-left” in both lists. That’s to make sure that the bullets render inside of your container boundaries rather than misaligning or not appearing at all.

Example of bulleted lists in email showing margin-left

Gmail considerations

Notably, Gmail webmail (but not Gmail app for mobile) is the one client that doesn’t need margin-left to ensure the bullets render inside the correct boundaries, which means your lists will include that extra left indentation. If you absolutely need your bulleted lists to be flush with the left margin of your container, you can reset the left margin to zero with Gmail-specific code like so:

CSS lists in Gmail

u + .body .glist { margin-left: 0 !important; }
@media only screen and (max-width: 640px) {
  u + .body .glist { margin-left: 25px !important; }
}

HTML lists in Gmail

<body class="body">
    <ul class="glist" style="margin:0; margin-left: 25px; padding:0; font-family: Arial, sans-serif; color:#495055; font-size:16px; line-height:22px;" align="left" type="disc">
        <li>
            Unordered Disc Bullet
        </li>
    </ul>
    <ol class="glist" style="margin:0; margin-left: 25px; padding:0; font-family: Arial, sans-serif; color:#495055; font-size:16px; line-height:22px;" align="left" type="A">
        <li>
            Ordered Uppercase Alphabet Bullet
        </li>
    </ol>
</body>

As you can see, we included the mobile responsive media query to ensure that the margin reset doesn’t affect the Gmail app on mobile. Also, please note the order in which the CSS is written. If you put the mobile-responsive CSS before the desktop CSS, then the mobile-responsive CSS will be overruled due to the cascade.

PS: Semantic bulleted lists are naturally mobile-responsive, so that’s a win-win with the accessibility benefits!

Example of bulleted lists in email as a GIF, showing how they respond on mobile

Outlook considerations

There are also a few work arounds needed for bullet points in Outlook. The lists tend to have large margins, to work around this you can wrap the code in <div>. This eliminates the margins and helps the bulleted lists flow within the confines of the email. Unfortunately this work around will only work on unordered list, and not ordered ones.

<tr>
    <td align="left" valign="top" style="padding-top: 60px;">
        <!--unordered list-->
        <div class="mktoText" id="unordered_list" mktoname="unordered_list">
            <div class="forDumbOutlooks">
                <ul class="glist" style="margin:0; margin-left: 25px; padding:0;" align="left" type="disc">
                    <li style="color: #EA7165; text-align: left;">
                        <span>Fusce et ullamcorper magna. Sed non ornare enim. Duis libero neque, porta at feugiat eget, vulputate pharetra metus.</span>
                    </li>
                    <li style="color: #EA7165; text-align: left; margin-top: 20px;">
                        <span>Nam non leo eu justo lobortis porttitor id id metus.</span>
                    </li>
                    <li style="color: #EA7165; text-align: left; margin-top: 20px;">
                        <span>In scelerisque, sapien nec aliquam elementum, augue nisl sodales nulla, eget mollis lorem lectus ut sapien.</span>
                    </li>
                </ul>
            </div>
        </div>
        <!--end unordered list-->
    </td>
</tr>

How to style your bullets

If you think you need to keep your html email bullet points simple (we’re thinking black, round bullets or just 1, 2, 3), you’re wrong! You can do virtually anything to bullets that you can do to text in emails. Do you want to change the color to match your brand’s style guide? Go ahead. Do you have an ordered list and want to use a custom font to match the rest of your email? You definitely can and should. For any list you can change the size and color of your bullets—and for ordered lists, you can change the font and bold or italicize your numbers or letters, too.

Let’s see what some of that styling does to our original code from earlier.

<ul style="margin:0; margin-left: 25px; padding:0; font-family: Arial, sans-serif; color:#495055; font-size:16px; line-height:22px;" align="left" type="disc">
    <li style="color: #F1736A; font-size:22px; line-height:22px;">
        Unordered, Colored, Enlarged Disc Bullet
    </li>
</ul>
<ol style="margin:0; margin-left: 25px; padding:0; font-family: Arial, sans-serif; color:#495055; font-size:16px; line-height:22px;" align="left" type="A">
    <li style="font-family: Times, serif; font-weight:bold; font-style: italic;">
        Ordered, Uppercase, Serif, Bold, Italicized Alphabet Bullet
    </li>
</ol>
Example of bulleted lists in email, showing a bullet followed by stylized bullet

This styling isn’t quite right yet, though. If you notice, the global font styling we set earlier for each list was overridden by the styling we added to the bullets themselves. You only want to update the styling of the bullet, not the copy that comes after it. This is a quick fix—simply wrap the text of the list items in a styled <span> tag to reset the copy to its intended font style.

<ul style="margin:0; margin-left: 25px; padding:0; font-family: Arial, sans-serif;" align="left" type="disc">
    <li style="color: #F1736A; font-size:22px; line-height:22px;">
        <span style="color:#495055; font-size:16px; line-height:22px;">
            Unordered, Colored, Enlarged Disc Bullet
        </span>
    </li>
</ul>
<ol style="margin:0; margin-left: 25px; padding:0; color:#495055; font-size:16px; line-height:22px;" align="left" type="A">
    <li style="font-family: Times, serif; font-weight:bold; font-style: italic;">
        <span style="font-family: Arial, sans-serif; font-weight: normal; font-style: normal;">
            Ordered, Uppercase, Serif, Bold, Italicized Alphabet Bullet
        </span>
    </li>
</ol>
Example of bulleted lists in email showing semantic structure

Much better—now you can have styled semantic bulleted lists without compromising the styling of your listed content.

Nesting your lists

Now that you know how to include one semantic bulleted list in your email, how about a nested list?

It’s not nearly as difficult as you think to include nested lists without tables. You simply need to code your nested list as you would normally, but ensure that it’s nested within a <li> tag instead of outside—otherwise you might see some rogue bullets appear in email clients like Gmail IMAP (GANGA). Here’s how that code would look:

<ul style="margin:0; margin-left: 25px; padding:0; font-family: Arial, sans-serif;" align="left" type="disc">
    <li style="color: #F1736A; font-size:22px; line-height:22px;">
        <span style="color:#495055; font-size:16px; line-height:22px;">
            Unordered, Colored, Enlarged Disc Bullet
        </span>
        <ul type="square">
            <li style="color: #F1736A; font-size:22px; line-height:22px;">
                <span style="color:#495055; font-size:16px; line-height:22px;">
                    Unordered, Colored, Enlarged Square Bullet
                </span>
            </li>
        </ul>
    </li>
</ul>
<ol style="margin:0; margin-left: 25px; padding:0; color:#495055; font-size:16px; line-height:22px;" align="left" type="A">
    <li style="font-family: Times, serif; font-weight:bold; font-style: italic;">
        <span style="font-family: Arial, sans-serif; font-weight: normal; font-style: normal;">
            Ordered, Uppercase, Serif, Bold, Italicized Alphabet Bullet
        </span>
        <ol type="1">
            <li style="font-family: Times, serif; font-weight:bold; font-style: italic;">
                <span style="font-family: Arial, sans-serif; font-weight: normal; font-style: normal;">
                    Ordered, Uppercase, Serif, Bold, Italicized Numeric Bullet
                </span>
            </li>
        </ol>
    </li>
</ol>
Example of bulleted lists in email, showing nested bullets

Nested lists inherit the global styling of the parent lists, so you don’t need any additional spacing or styling to keep the lists consistent. However, spacing can still be tricky—surprise, surprise—in Outlook. Here are our tips to make sure you keep your spacing the way you want it.

Horizontal spacing

For horizontal spacing, add padding-left: #px; with the correct dimension to the <li> tag. This will help control spacing between the bullet and the copy. Plus, don’t forget to include the margin-left pointer mentioned at the beginning of this guide to ensure your bullets don’t render far away from your copy.

Example of padding of bulleted lists in email

Note: Unfortunately, this does not work for Outlook for Windows.

Vertical spacing

For vertical spacing, add margin-bottom: #px; with the correct dimension to the <li> tag. This will help increase vertical spacing between each list item.

Example of vertical spacing with bulleted lists in email

Using custom symbols or images for bullets

You’ve styled your bullets—now try using images or icons, instead!

Unlike styling your bullets to a custom size or font, custom symbol, and image bullets aren’t as universally supported across email clients, often leading to images being blocked in email, so be sure to proceed with caution and use a tool like Litmus Email Previews to make sure your lists render well across your subscribers’ devices.

For our code, we’ll change our bulleted lists to include hearts, as well as our very own Litmus logo for some great email branding.

Metadata

<meta name=Generator content="Microsoft Word 15 (filtered medium)">

CSS

<style type="text/css">
  @list heart {
    mso-level-number-format: bullet;
    mso-level-text: ♥;
  }
  @media screen and ( -webkit-min-device-pixel-ratio:0 ) {
    .heart { list-style: none; }
    .heart:before {
      content: '♥';
      margin-left: -1.4em;
    }
    .heart span {
      padding-left: .5em;
    }
    [class="x_heart"] { list-style: initial !important; }
    [data-outlook-cycle] .heart { list-style: initial !important; }
  }
</style>

Symbol bullet code

<ul style="Margin:0; Margin-left: 25px; padding:0; font-family: Arial, sans-serif;" type="disc">
  <li class="heart" style="mso-list:heart;">
    <span>
      Heart Bullet
    </span>
  </li>
</ul>
Example of bulleted lists using a heart bullet

Image bullet code

<ul style="Margin:0; Margin-left: 25px; padding:0; font-family: Arial, sans-serif;" type="disc">
  <li style="list-style-image: url('https://campaigns.litmus.com/_email/2019/09_sep/201909xx_Ultimate-Bulleted/images/litmus-icon.png');">
      Image Bullet
  </li>
</ul>
Example bulleted lists, using an image bullet

Why the table method isn’t ideal for accessibility

You’ve heard us say that you should avoid using tables when coding bulleted lists. But why?

You may or may not know that screen readers are rising dramatically in popularity—275 million people are predicted to use them by 2023. Your subscribers might be using screen readers because they have a disability that requires it, or because they want to hear what emails they have while brushing their teeth in the morning.

When it comes to your email’s content hierarchy, we advocate for the use of semantic tags as much as possible—that is, meaningful and intentional use of <h1>, <h2>, and so on, versus generic <p> and <span> tags. But when it comes to semantic tags, one sticking point for email developers is the bulleted or unordered list.

Screen readers have trouble reading out emails with tables. If a screen reader identifies a table in your email’s code, it will read out loud as one. It will literally tell you about each and every row and column’s position and content. This can be a bit much for subscribers listening to your emails, and it certainly makes it hard for them to glean the intended content. Let’s look at this bulleted list:

Example of bulleted lists, listing out fruits

Coded with tables, it would sound a little like this:

Audio Player

That’s… not great, is it? When it comes to bulleted lists, many developers solve the visual issue by coding faux bulleted lists in tables. But if you knew those tables sounded like that, would you continue to code your lists that way?

Unlike tables, <ul>, <ol>, and <li> tags are much easier for a screen reader to understand. When a screen reader sees these tags in an email it’s reading out loud, it will read this to your subscribers:

  • To begin a list, it will tell you how many items there are in the list
  • It will describe the type of bullet used to denote each list item, from the following:
    • Unordered Lists: “bullet” for type=”disc”white bullet” for type=”circle”, “black square” for type=”square”
    • Ordered Lists: The associated alphanumeric character or Roman numeral (For example: “a”, “2”, “IV”)
  • To end a list, it will say “out of list
That sounds much better than hearing a whole bunch of rows and columns, doesn’t it? It’s much easier to understand content in lists when it’s read out loud in the same way you would read the list inside your head, as if you were looking at the email itself.

Ready to make your lists bulletproof?

Motivated to make your email’s bulleted list accessible and want to make sure it renders well across email clients and devices? Using a tool like Litmus Email Previews will help you ensure your bullets in the email are bulletproof. Plus, our new accessibility checks in Litmus Test help you instantly see whether your emails follow key accessibility best practices and get actionable advice on how you can make your emails more inclusive.

Originally published on July 8, 2019, by Alice Li. Last updated July 12, 2022.

Find out how ProFundCom can help you

Sign up for a 3 month trial. We’ll help you get going and answer any questions.