Guidelines on using hyphenation in interactive design

by certainlyakey   Last Updated June 13, 2019 18:16 PM

It's a well established recommendation for publications containing masses of continuous text to use hyphenation.

Are there any ideas or guidelines on how hyphenation should be (not) used on interactive elements of UI or those that do not represent part of text content? For example, when designing 1) a menu 2) sitemap 3) sidebar etc.

The search didn't give me anything on this subject. I think mainly of web interfaces here but it may be interesting how this may be applied to app design too.

Answers 2

It's a well established recommendation for publications containing masses of continuous text to use hyphenation.


It's a well established recommendation for publications on paper containing masses of continuous text to use hyphenation. Even on paper you will find a bunch of style guides that recommend against it.

Remember that the one of the reasons hyphenation is recommended for paper is because it takes up less physical space, and from historical limitations of movable type presses. For paper this is a real issue of cost / physical limits. Things that don't apply as much to online work.

I've read research (unfortunately a Google fails to find it) that says that a small majority prefer hyphenated text for long passages, but I've not read anything that says it actually helps general readability. I've certainly had anecdotal reports from folk who don't have english as a first language that hyphenation makes it harder for them (but to counter that there has been research that inter-syllable hyphenation makes it easier for folk with dyslexia).

It also depends quite a bit on language. For example German's long words make hyphenation a necessity in more situations.

So — the short answer is that I'm not aware of any research that will give you guidance on hyphenation for non-body copy UI elements.

My hunch would be that they'd tend to be less effective. UI text tends to be smaller, so you'd lose the 'word shape' if the text was hyphenated making it harder to scan for. But that's a guess, and I can imagine instances where it might be the best option.

Because of the varied ways text can be presented in UI elements I suspect generally useful advice is probably impossible. If you think it will help try testing it with some users ;-)

August 11, 2014 08:11 AM

What is the goal?

Hoping we can agree that it's to communicate as clearly as possible with the reader?

In that case, no hyphen ever made copy LESS clear but omitting them can definitely cause confusion.

Unfortunately, design now seems to trump everything. "I don't think it looks good" seems to justify throwing out rules of punctuation that have been developed over centuries. These rules were developed for a reason -- to make reading the words and understanding the message easier.

We who write and design know what we mean. It can be almost impossible for us to see how the reader/user could be confused.

Engineers, especially, LOVE to pile 2 or 3 modifiers in front of a noun and give the reader NO idea of how they're supposed to be read.

CLARITY of communications through the marriage of design AND copy. Throwing out hyphens is like a writer saying "well, I think blue is a distracting color, so never, ever use blue."

June 13, 2019 17:34 PM

Related Questions

Updated February 24, 2019 12:16 PM

Updated September 08, 2016 08:07 AM

Updated January 26, 2017 14:06 PM

Updated July 21, 2019 10:16 AM

Updated May 14, 2018 19:16 PM