Hyphenation in Template Themes

Hyphenation occurs when you break words between lines of text. This helps create a sense of evenness in your text blocks by helping to establish a regular feel along the right border.

Template and Mailing Designer 2 (TD/MD 2) features a rendering option that can help your design if you wish to attempt to hyphenate words in your mailings. This is an especially useful asset when using section with two or more columns or when using captions with images that aren't very wide but caption text itself is long. However, there are some pros and cons that you need to consider before applying hyphenation to a mailing.

In this article, let’s take a look at these pros and cons and then see how you can attempt to apply hyphenation to your design.

Before You Go Too Far…

It’s important to note that Informz can only “attempt” to hyphenate text. This is because hyphenation is not fully supported in all email clients and browsers! Much of this is because there are two CSS properties that work behind the scenes to render hyphenation: word-break and hyphens. Different software tools each render these properties slightly differently. For example, Google Chrome does not support hyphenation, and if you preview a mailing using Chrome, you won’t see any hyphens.

Pros and Cons

There are generally two reasons for using hyphenation: rendering and aesthetics.

When you use hyphenation as a rendering asset, be aware that it works best with when long words could break your design. This is because longer words (or large strings of unbroken text) can make your mailing appear wider than expected.

When you use hyphenation for aesthetic reasons, make sure that you manage your expectations. As above, hyphenation renders differently in different email clients and browsers, so you’ll need to make sure that you know where the hyphens will display and where they will not!

Steps

To attempt to hyphenate text in your mailings, begin in a TD2 template.

Open the Theme menu. Click the Element dropdown list and select Text.

Check the Attempt to hyphenate words in sent mailing checkbox.

Click Save.

Now, any mailings that use your template attempt to add hyphenation.

Rendering Example

The best way to illustrate how hyphenation affects rendering is through an example. In this example, you’ve designed a template with a two-column section. You’ve added text in the left column that invites your readers to register for an event. You’ve added an image and some additional text in the right column. The columns are each set to 50% (they are equally sized).

If you do not check the Stack Columns in Mobile Version checkbox in the section properties, and you have also not checked the Attempt to hyphenate words in sent mailing checkbox, your mailing might render in a way that “breaks” your columns on some devices, such as an iPhone (see below).

While the mailing is readable, you lose the 50/50 split between the columns. Longer words, such as “registration” and “convention” push the column width out of proportion.

You can preserve the column proportions when you apply hyphenation to the same design:

While the 50/50 column split remains intact, the hyphenation may seem a bit extreme.

You Have the Power!

Hyphenation can be tremendously powerful, but, as you can probably see, it can be a tradeoff too. The best way to know if the benefits outweigh the potential risks is to test your designs! Take advantage of the previews available on the Review & Activate and the Review & Send tabs as well as the Virtual Inbox tests in your account.

Never forget that TD/MD 2 is a versatile tool! You have many other options that can help you improve your rendering (reducing the font size, changing your running text, using mobile stacking, etc.), and these can work in conjunction with hyphenation to create an amazing design!