When and Where to Break Words with Hyphens
- By Jess Brown | Jul 2, 2018
Summary
- Max 3 hyphens per paragraph
- Hyphens between syllables
- Avoid hyphenating multiple lines in a row
- Never hyphenate headlines
- Avoid putting a hyphen after two characters/before the last two characters
- Keep the hyphen on the first line (never start a line with the hyphen)
General Rules for Hyphenation
Hyphenation should be used infrequently and with careful consideration, since its misuse can cause problems with readability. A good rule of thumb is to only hyphenate 3 times, maximum, in a single paragraph, but the fewer, the better. Always put hyphens between syllables, but make sure to read each part to check that the letters don't form an offensive or confusing word. Avoid hyphenating in a row, and never hyphenate on headlines1.
Some quick QA on hyphens is to check that you haven't inserted a hyphen after two characters or before the last two characters—if you're only breaking off two characters, what's the point? It's almost always possible to adjust something else in the typography, such as the tracking of the line or even a few kerning tweaks elsewhere to fit the word in question on one line.
All dashes, whether they're hyphens, en or em dashes, should go on the far right side of the line. You should never start a line with the dash.
Hyphenation on the Web
On the web, typography can seem difficult to manage with differing screen sizes and browsers. My personal preference is just to accept that some screen sizes will have widows or other typographical errors, since the amount of effort/cost to perfectly typeset for all possible screen sizes is too much—if there even is such a thing as "perfect" typesetting for all sizes and browsers. However, there are times when hyphenation is critical, but normally at the smaller end of the screen-size spectrum. If text begins to punch through the width of its container, usually because of a long word, this causes the screen to scroll horizontally or cut-off at the physical screen, which is typically not the desired effect.
This is especially common in sites with different languages. German is notorious for very long words and this causes trouble when the word is longer than the screen size. Resize your browser to see how this works:
Systemanforderungen
A simple fix for this problem is to use a special HTML entity:
­
The great thing about this HTML entity is that the hyphen only appears when it's needed. Instead of forcing a hyphen to be there indefinitely such as:
System-anforderungen
You can use a "soft-hyphen" (SHY) to cause the hyphen to appear only when the width of the container presses on the word, causing the word to break where specified and adding a hyphen automatically. Try resizing your browser to see both examples at work.
Systemanforderungen
Using a soft-hyphen is extremely useful for mobile screen typography and is pretty well-supported across browsers, though I would caution against using them in HTML emails, since they're not well-supported in that space. When building pages, I tend to use a regex to find words in the page content that are over 18 characters long, then I'll add the soft-hyphens at appropriate word-breaks to preempt any issues.