Responsive Web for Writers and Content Managers

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.

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.

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.

Check it out a live demo on codepen.


➸ The Waif

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

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

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« 😉.

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.

Boana Stories

Design Studio for User Experience

Johannes Holl

Written by

Digital Product Designer & Studio Director @Boana

Boana Stories

Design Studio for User Experience