This article is about a forgotten hero in the content creation field and which can have massive impact to how a word, and in turn sentences are being displayed on different screen sizes and thus can help save your design and get your message across.
Imagine this...
Imagine you're writing a bang on article about a subject you know much about and you want to give all your in-depth knowledge about it as you can. For this you will need a lot of knowledge about the given subject and most likely you will also end up using some of those fancy long words academia has conjured up to explain the darn thing you're babbling on about. You've pulled out your old dusty dictionary from your days of studying, you've formulated your words carefully and now you're ready to see it all in it's marvel!
But it's a let down, a huge part of your readers are reading it on mobile, and one of your long fancy words are ruining the design, making it all feel a bit undone or half-baked, just because you put a "Overrepresentation" in a headline and now all of the design is exploded in the face of your readers in their morning commute, squinting their eyes trying to understand what you're writing to them on their little screens.
What you needed was something that had your back on these types of scenarios, like a little vigilant typographical angel, shielding you from harm and misunderstanding on small screen sizes, but otherwise stayed unseen.
What is a Soft Hyphen?
The soft hyphen is not your regular hyphen, that you inject into your text and then it would be forever present, Rather it's a conditional character that only appears if a word breaks across a line. Otherwise it remains invisible. It was originally invented to help with typesetting and justified text—but it’s surprisingly useful in the hyper-dynamic world of responsive design.
In email marketing, it can be the difference between a mobile responsive design and an awkward display of a desktop layout on a mobile screen - even though you've spent tons of work making sure it was optimized.
Why does it matter
We all know email is read on every screen imaginable—from the 6.1-inch smartphone at the gym to the widescreen display at a desk. Words and headlines stretch, shrink, and snap. A subject line that looks perfect in the desktop inbox might look like a formatting tragedy on mobile. Words get cut off, lines break mid-sentence, and suddenly your clean CTA looks like a typo.
This is where the soft hyphen shines.
-
Better Line Breaks in Subject Lines & Preheaders - Strategically inserting soft hyphens in long compound words can ensure smoother line breaks without awkward chunks hanging out on their own line.
-
Responsive Body Copy Control - In tight column layouts, especially in mobile views, long words can break in odd places, scale up your design or overflow entirely. Soft hyphens help the layout adapt more gracefully.
-
Improved Legibility Without Changing Meaning - Unlike inserting a hard hyphen (which stays visible), the soft hyphen only appears when needed. No need to sacrifice clarity for layout.
How does it work
In Alpaco we've shared the message of the soft hyphen magic long for years, it's an ancient feature in programming. It's one of those little freebie nuggets of pure joy you share with a marketers, designers, copywriters or translators that doesn't cost anything and has a huge impact on their work, especially if they're working on multi language brands (looking at you Germany and Finland).
The simple trick to getting it into your copy is to add this to your text in HTML where ever you would see a word may be too long and you want to help the various screen sizes break it up:
­
In the Alpaco platform we've gone ahead and baked that ability into text area inputs so you always have that ability at hand when you see a long word clearly breaking your design on various screen sizes.
