This article...
- Explains what hyphenation is and its role in making text blocks appear more even.
- Describes how Higher Logic attempts hyphenation using template settings.
- Details the pros and cons of using hyphenation.
- Provides instructions for enabling hyphenation in the Higher Logic designers.
- Illustrates how hyphenation affects multi-column layouts and overall consistency.
- Recommends testing designs to assess the affect of hyphenation.
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 Designer feature a rendering option that can help your design if you wish to attempt to hyphenate words in your messages. This is an especially useful asset when using a section with two or more columns or when using captions with images that aren't very wide but caption text is long. However, there are some pros and cons that you need to consider before applying hyphenation to a message.
In this article, we'll example these pros and cons, and learn how to attempt to apply hyphenation to your design.
Before we begin...
It’s important to note that Higher Logic Thrive Marketing Professional (Thrive Marketing Professional) 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 & cons
There are generally two reasons for using hyphenation: rendering and aesthetics.
-
When you use hyphenation as a rendering asset, it works best when long words could break your design. This is because longer words (or large strings of unbroken text) can make your message 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.
Enable Hyphenation in your templates
To attempt to hyphenate text in your messages, you need to enable the feature at the template level, which will then be inherited by the messages that use the template:
- Navigate to and edit one of your templates.
- On the Design tab, click the Theme sub-tab.
- Click the Element dropdown list and select Text.
- Check the Attempt to hyphenate words in sent mailing box.
- Click Save.
- Repeat this process for any additional templates you want to leverage this feature.
Now, any messages that use this template will attempt to add hyphenation where applicable.
Rendering examples
The best way to illustrate how hyphenation affects rendering is with an example.
-
In this example, we’ve designed a template with a two-column section.
-
We've added text in the left column that invites your readers to register for an event.
-
We’ve added an image and some additional text in the right column. The columns are each set to 50% (they are equally sized).
If we do not check the Stack Columns in Mobile Version checkbox in the Section properties, and also do not check the Attempt to hyphenate words in sent mailing checkbox, our message might render in a way that “breaks” our columns on some devices, such as an iPhone (see below).
While the message is readable, we lose the 50/50 split between the columns. Longer words, such as “registration” and “convention” push the column width out of proportion.
We can preserve the column proportions when we apply hyphenation to the same design:
While the 50/50 column split remains intact, the hyphenation may seem a bit extreme.
Final thoughts
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.
In addition to hyphenation, you have other options to improve your rendering (e.g., reducing the font size, changing your running text, using mobile stacking,), and these can work in conjunction with hyphenation to create an amazing design.