White Space

Design Quick-Tip: Make Space for your Content

Alex Gorton

A great tip for the new year is to always make sure you are giving your content room to breathe in your templates. White space is nothing to be afraid of and helps your subscribers consume your content easier.

Of the two articles above, which do you find easier to read? By not providing enough space in your articles, it’s possible to actually deter subscribers from reading your emails. Thankfully, we have a variety of ways to create space in all of the appropriate places.

Cell Padding

This HTML attribute allows you to quickly add pixel padding to a table evenly. This attribute is widely supported across email clients, but it is worth noting that it cannot be overridden with media queries in responsive design. When combined with fixed width tables, it is important to make sure nested tables are sized appropriately (ie: 650px wide table with 25px cell padding means that the nested table could be no larger than 600px wide).

<table cellpadding=”25”> … </table>

Breaks

An easy way to add a space between two paragraphs of text is to add an HTML break tag. This simple HTML code will place a hard return wherever you put it and more than one can be added to create even more space if necessary.

<br />

Padding

Similar to cell padding, padding take things to a whole new level. Adding a padding style to your table cells allows you a lot of flexibility in terms of how much space you are adding on all four sides of your content. The best part is that since this is a style and not an attribute, padding can be targeted with media queries if the space needs to be adjusted for mobile devices.

<td style=”padding: 30px 15px 30px 15px;”> .. </td>

Line-height

In order to give lines of text more space, we use a line-height style to determine this space. Applied to the table cell of a content block, the line-height can be determined with pixel heights to increase the distance from one line to the next.  This style must be applied to each table cell that you wish the new line-height to take effect.

<td style=”line-height: 20px;”> .. </td>

Ready for more design tips to kick your email designs up a notch? Check out more design blogs here.

About the Author
Alex Gorton

As a Digital Marketing Designer, Alex is tasked with the creation of client templates, educating clients on design best-practices and assisting with internal marketing needs. Out of the office, Alex is an self-proclaimed adventurer, snowboarder and tinkers on his custom-built computer.