Text in responsive design 2/2

Johannes Holl
Jul 18, 2018 · 3 min read

Improve line-breaks and hyphenation on your web pages with computerized typesetting. It’s fairly easy.

Booking a good visual designer is one thing you can do, if you want to have someone taking care of font, font-sizes, line-heights and so forth. Still most designer will still deliver static layouts. The moment those »graphic designs« turn into actual code, responsiveness brings much more complexity to the visual concepts and the contents as well. Later on — when someone else is maintaining those pages and changes texts and headlines — how can one ensure text behaves nicely on different screen sizes.

Often, content mangers and UI writers are the ones stumbling upon visual bugs — struggling with text appearance on different devices and hacking it into the admin panel of backends. If you are one of those or interested anyway, this article might be helpful.

Photo by Jason Leung on Unsplash

What is actually the problem?

Misplaced words and badly separated text lines can have a negative impact on readability and the aesthetic perception of a text piece. Since ages, typesetters have had dedicated terms for those phenomenons print media. The therms orphan and widow describe text lines that are separated at the end or the beginning of a page.
Creators for digital media don’t have such terms yet. We could still hope that someone might solve them with an algorithm in the future. Until then I would love to suggest a term and a solution. I’ve identified five typesetting problems. Let’s name them in the same terminology that typesetters started with back in the days of print (even going into danger of being political incorrect 😇)…

➸ The Stepfather

A very long word that divides a paragraph or even breaks a layout.

Stepfather: a word so long it messes up the layout. 😭Note: this thing happens often with URLs.

Hidden Stepfather
A very long word that divides a paragraph or breaks a layout in just some layout sizes, eg. Smartphone.

The markup tag soft hyphen­ or also­ enables you to define a possible hyphenation insight a word. Each browsers will then independently decide when to break the word.

This Text has a super­long­word.

Check it out a live demo on codepen.

➸ The Waif

A single word left at the last line of a paragraph.

Typografical waif: you want to move one word down so it forms a proper last line.

Hidden Waif
A single word at the last line of a paragraph that appears in just some layout sizes, eg. iPad.

Animation showing a typical »hidden waif« 🙄

Adding non-breaking spaces in the markup with   or   will make two single words stick together no matter what. Make sure that you don’t apply non-breaking spaces in between long words — it might end up in a »stepfather« 😉.

This two words should not separate.

Use non-breaking hyphens‑ for words that are regularly written with a hyphen, e.g. »long-term«.

Check it out a live demo on codepen.

Overview of markup language for typesetting

Beyond those techniques, there are a number of tags you can use to optimize text appearance. Such as forced hyphens and zero-width spaces. In responsive design, you have to use those ones very carefully and check how it performs on different screen sizes.

| Soft hyphen | ­ |
| Non-breaking space |   |
| Non-breaking hyphen | ‑ |
| Hyphen | ‐ |
| Zero-width space | ​ |

Boana Stories

Design Studio for User Experience

Johannes Holl

Written by

Lead Product Designer UX/UI & Partner @Boana

Boana Stories

Design Studio for User Experience

More From Medium

More on UX from Boana Stories

More on UX from Boana Stories

The UX Sprint

Also tagged User Experience

Top on Medium

Ed Yong
Mar 25 · 22 min read


Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade