While many brands communicate increasingly through visual mediums, using photography, illustration, and video, we’ve noticed a ton of newsletters in our inbox take a different approach. Instead of asking readers to click on an image or link to get the full story, content is placed directly in the email itself, in a “behind the headlines” kind of way. Buzzfeed, Vice, The Skimm, and others have gone this route. Here a look at three examples of text-heavy emails from Mic, Lenny Letter, and BuzzFeed News, so you can get a sense for just how long and “chatty” they can be:
The approach allows subscribers to get the full scoop without having to navigate away from their inboxes. Readers count on newsletters like this to provide quality storytelling in a simple, readable format. So it’s incredibly important to format text-heavy emails well. It may seem simple to dump a lot of content into an email and hit “send,” but with such a high volume of text, formatting to optimize readability is critical.
In today’s workshop, we’ll review how to carefully select the right font(s), design headers that improve structure, use color wisely, and adjust line height and padding. And if you haven’t already, check out our latest Design Inspiration post to get filled in on brands creating awesome text-heavy emails, how to prevent Gmail from clipping your long email, and more.
We’ll open up the BEE editor and use this email from BuzzFeed News as our template (it’s a long email, so we trimmed it after the first story):
Let’s get started!
Email width and general settings
BuzzFeed’s email is just shy of 500px. A narrow width like this is the best option for text-heavy emails so readers can easily keep track of where they are in a paragraph of text. Plus, you should plan for your email to be viewed on multiple devices. Setting a max width around 500px ensures that on wider devices such as on desktop and tablets your email will render at a readable size, and on mobile devices, the width and text will render as specified in your mobile-responsive code.
In the BEE editor, we’ll start with a basic one-column template and navigate to the Body menu to format the general structure of our email. BEE’s pre-defined settings are spot-on for this email: the content area should be 500 pixels, with a white background, Arial font, and blue for links.
Building the main email header
Next, we’ll drop BuzzFeed’s logo into an image block to set up the top of our email. We can also recreate the horizontal red line across the top of the email above the logo right in BEE. Here’s how:
Click on the row structure that contains your BuzzFeed logo to activate it.
Navigate to the Structure menu to the right, and scroll down to the Border section, where you’ll push the slider to view all options.
To create the red horizontal line at the top, we can simply add a top border. We made it 5px and changed it to red.
To create more space between the line and logo, we’ll click the logo to activate the Content properties menu on the right, where we’ll increase the padding just to the top of the image.
It looks more breathable now:
Section headers and headlines
A strong, consistent format for section headers and headlines is vital in creating organization for your long, text-heavy email. They break up the flow of text and establish structure. Buzzfeed uses the same treatment for all section headers (Helvetica, caps, red) and headlines (Arial, about 2x body size, bold). The format makes it easy to understand where one story starts and another begins.
Let’s set up this structure in BEE.
First, we’ll stack three text boxes on top of each other. Keeping different styles of text (headers, sub-headers, body copy) in separate containers allows for optimal customization.
The first text box will be for the section headers. To mirror BuzzFeed’s style, we choose BEE’s Global Font, size 14px, in red. We’re also careful to type in all caps.
Next, we’ll create the first headline structure. The headlines are all Arial, bold, black, and size 24px.
Then comes the intro text, which is Arial, italicized, dark gray, and size 16px. Here’s what we have so far:
Line height and padding
The top of our email is coming along nicely, but we need to clean up the spacing. A good rule of thumb is to set your line height to be at least 1.3x the height of your letters, maintaining a comfortable distance between lines and optimizing readability. Likewise, breaks between sections should be consistent—usually the height of a full line of text. That height can be increased further to emphasize the distinction between sections; this is usually done by adjusting a structure’s padding.
As a reminder, padding is the space between content and the container it sits within. You can moderate padding to adjust the space between content containers, thereby increasing or decreasing white space in your email to create balance and breathability and to improve readability.
Looking again at BuzzFeed’s email, we can see the distance above and below the BuzzFeed News logo is equal, as is the distance between the section header, the date, and the intro text.
Within a container of text, white space can be moderated with line breaks and line height. Your text should not feel too tight or too loose. In BEE, there are four levels of line height in the Content menu:
In this case, for the body copy, the second option mirrors BuzzFeed’s email closest and looks best. Here’s the top of our email after spacing and padding have been adjusted:
Formatting body text
With our key structures in place—section header, headline, and body copy—the rest of the email will be easy to build, because BEE lets us easily copy content blocks. This way, we can retain formatting.
For our next section header, “HERE ARE THE TOP STORIES,” we can copy the “WEDNESDAY” header. Simply click WEDNESDAY, then select the stacked box icon appearing in the lower right:
We’ll also copy the November 4 header and the body text, dragging all three elements down and arranging them to compose the next section. We’ll paste in BuzzFeed’s content, and we’re right on track.
Right away, we can see we need more space between the end of the first section and our new one, so we can increase the padding either on the bottom of the first section’s body copy or the top of the second section’s “Here are the top stories” header (or both!).
Let’s remember to add links. By selecting the text we need to link, we can easily insert a link using the pop-up formatting menu.
We’ve already set all links to a default blue color, which is what BuzzFeed uses. But links are actually a great way to use color to brand your email in a subtle, effective way. Check out how Mic matches their links to their on-brand blue color in their newsletter:
To change your link color in BEE, use the Content Properties menu to the right to make links any color you wish. (But be consistent: all links within a single email should be the same color).
Next in this section comes the first image of Buzzfeed’s email. In the Content menu, we’ll drag and drop in an image block, then pull in the image of Taiwanese President Ma Ying-jeou. Here are best practices for in-email images:
- Images should be the full-width of your email.
- Link images to more information (on your site) whenever possible.
- Include ALT text so readers with image-viewing turned off know there’s a picture (and what it is).
- Caption your photos. Captions should be a complete sentence and include a name, date, and location whenever possible.
- Give source credit.
BEE has a built-in image editor, through Aviary, that allows you to fully customize your image. We don’t need to edit in this case, but we’ll keep that knowledge in our back pocket for future use.
To create a caption for our photo, we’ll drag in a new text box underneath the image.
Then, we can plug in the caption text and format as usual. After adjusting padding above and below our image, we’re ready to rock-n-roll onto the next section. Remember, we can preview how our email will look at any time via the Actions menu in the upper right. Ours is coming right along!
Formatting text-heavy emails? Go Pro!
It’s really easy to format and style text with the BEE editor, helping you build better emails! If you’re not already using BEE, sign-up for a BEE Pro free trial and have access to additional templates and design features.
Total: 2 - Average: 3