How to set letter spacing in emails: A guide from Stripo

Letter spacing plays a crucial role in email design, as it affects both how easy text is to read and how visually appealing it looks. This article shows why finding the right balance in letter spacing matters, how spacing can be adjusted using CSS and email builders like Stripo, and why spacing is particularly important for accessibility.

Key takeaways

1. Small adjustments matter: Changes to spacing as subtle as 0.3px can affect readability, particularly in body text, where spacing is usually kept to a minimum to maintain a balanced and cohesive look.
2. Fonts and uppercase characters influence spacing needs: Uppercase text often requires more spacing to prevent crowding, whereas font types are designed with specific default letter spacing, so adjusting the letter-spacing parameter can result in different looks across various fonts.
3. Easy customization with Stripo: Letter spacing can be adjusted using Stripo’s built-in style settings or by editing the CSS directly, allowing both beginners and advanced users to fine-tune their email designs.
4. Accessibility considerations: While increased letter spacing can improve the readability of text for dyslexic readers, overly wide spacing may impair reading for others. A balanced approach is key to accommodating all readers.

How letter spacing shapes readability and design in emails

Adjusting letter spacing is about finding that sweet spot to ensure that text doesn’t look too cramped or scattered.

In many cases, letter spacing is used to:

• improve paragraph readability;
• emphasize headings or CTAs that need to make bold statements;
• improve the readability of overly decorative or unconventional fonts.

Here are a few more important points to consider when working with letter spacing in email design:

1. Small spacing changes make a difference: Changes as small as 0.3px can affect readability. Designers often keep adjustments to body text subtle to avoid making the text look too loose.
2. Spacing can affect text width: Increasing letter spacing in long paragraphs can increase their overall length, which may push important content further down or break layouts in email design.
3. Uppercase letters benefit more from spacing: Uppercase letters appear more uniform and rectangular than lowercase letters, with less visual rhythm to guide the eye along a line of text. Designers sometimes add extra spacing to all-uppercase text to prevent it from feeling cramped.
4. Letter spacing interacts with fonts: Some fonts, especially monospaced ones, are designed with generous default spacing, while others are tightly packed. This means the same letter-spacing value can look very different depending on the font used.

Below is an example of letter spacing applied to both heading and paragraph text. At 0.5px, the change is almost invisible, yet it effectively allows the design to breathe more.

However, when spacing is set to 3px, the flow of letters is overstretched and harder to read — a problem that escalates with further increases in spacing. This may not be a problem for people who struggle with reading, which we cover later in the chapter on accessibility

(Source: Stripo template)

(Example of different letter spacing applied to the heading and paragraph text in an email template)

How to adjust letter spacing using CSS

We’ll show you how altering the letter-spacing property in CSS changes the space between letters.

First, decide which text element you want to target. In our example, we’ll target a paragraph. Using a CSS selector, we apply the letter-spacing property and assign it a specific value. The example below sets the space between letters to 1px:

The letter-spacing property in CSS can be applied to any element that renders text, including

• block-level elements such as paragraphs, headings, and block quotes;
• inline text elements such as <span>, <a>, and <strong>;
• form elements such as <button>, <input type="text">, and <textarea>;
• list items (<li>); 
• table elements such as <td> and <th>.

This property can take positive or negative values and is typically specified in units such as px, em, or rem. Additionally, it can take the keyword normal, which resets the spacing to the browser’s default settings.

Negative values are used to bring letters closer together. For the next example, we set the letter spacing to -1px:

How to set letter spacing in Stripo

You can set letter spacing in your email using CSS; however, modern drag-and-drop email builders also offer text formatting options that you can apply with a few clicks. Let’s adjust letter spacing in Stripo.

Go to General Styles, select settings for Stripes, Headings, or Buttons, and adjust the letter spacing for each specific element group.

Alternatively, you can open up code view by clicking the Code button at the top of the work area. Adjust the letter-spacing property by overriding the style of a specific element in the default CSS:

Overriding the styles in the editor disables the option to change letter spacing in General Styles. If you want to set the letter spacing for specific element groups (stripes, headings, or buttons), you will need to restore the setting in its corresponding General Styles tab:

Interletter spacing and accessibility

Dyslexic readers are often sensitive to crowding, a perceptual phenomenon where letters appear too close together, making them harder to recognize. Therefore, increasing the space between letters can make reading easier.

Studies show that extra-large letter spacing can improve both reading accuracy and speed among dyslexic children.

But what does this mean for email design? Dramatically widening letter spacing may hinder the reading experience for non-dyslexic readers. In practice, there’s no perfect, universal solution aside from subtly increasing spacing to the point just before the text begins to look overstretched.

The cognitive load of reading can be reduced without having to resort to extra-large spacing. Modern operating systems on both desktop and mobile devices include built-in accessibility features, such as read-aloud tools that allow recipients who struggle with reading to listen to the text instead.

Wrapping up

Getting letter spacing right is about balance and making deliberate adjustments that enhance clarity while preserving a natural visual flow. Spacing works particularly well for making all-uppercase headings stand out and for improving the readability of overly decorative fonts. Still, spacing changes that improve the experience for some readers may hinder it for others, so keep these changes subtle to ensure that they work well across your audience.