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?


➸ The Stepfather

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.

Solution
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

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« 🙄

Solution
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

+-------------------------+--------------+
| 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

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