Responsive text

About macro-typography for websites and how it can be implemented.

A lot of topics have been discussed since the term “responsive web design” came up in 2010. Different grids and breakpoints, fixed and fluid layouts and responsive images.
One bit feels missing so far: Text.

For all the lovers of micro-typography, I should say, this article is not about font sizes or font families. I will not talk about letter-spacing, x-height, baseline or other small details. It will focus on one aspect of typesetting: When to word-wrap and how to implement that in an responsive website?

What is the issue with typesetting on websites?

Print is a comfortable medium. A designer can layout exactly when a text line breaks. The web does not work like this. Formats and page sizes are flexible and change lengths of text lines. There is also no proper support for hyphenation yet. Thus, text will not get the quality of reading that it demands.

Still we can learn from print design because it offers strategies to keep up readability and aesthetics. Established in the crafting culture of graphic design for centuries, this is a reliable resource of understanding how to create quality text layouts. Let’s identify two of those strategies and apply them to websites:

Avoid widows
A widow is a last text-line of a paragraph that falls at the beginning of the following page or layout column. It get’s separated from the rest of the paragraph and leads to a grubby look and reading experience.

Example for a widow in a print layout

Widows appears not often on websites since paragraphs usually don’t get split up in columns or pages. It could become important once the support for the CSS column tag get’s fully supported by the major browsers.

Avoid orphans
Orphans are a word, part of a word, or very short line that appears by itself at the end of a paragraph. Orphans result in a bumpy read and too much white space between paragraphs.

Example for an orphan in a print layout

Orphans are a problem for responsive layouts. They appear in justified and left-aligned texts, in paragraphs, headlines, tool-tips or image descriptions.


Examples

Let’s look at some examples to specify the issues with orphans in the web.

Example I found on the website of Boldking (www.boldking.com/uk, Sept 2015)

The example headline shown above is part of a hero section. It teases the main product promise. The whole paragraph looks torn apart because of the single word in the second line. We might want to bring down the “and” or bring up the third line — or even both.

Example I found on the website of Minisites in different viewport sizes (www.minisites.design, Sept 2015)

The next example shows a website in two viewport sizes. Two different problems appear: First of all, the headline has an orphan in the second line. The second problem appears when narrowing the viewport and the paragraph gets an orphan. In this breakpoint we want to bring down “interactive” to keep a semantic unit with “story-telling” and shape a nice paragraph.


What is a solution?

Text is liquid content that flows with the size of the viewport when used in an responsive layout. Browsers and operating Systems also render fonts differently, which affects the width of a textline. There is literally no control of text design. With responsive it seems like we completely lost control over this topic. But still we can do something.

Good solutions in software design are generic ones that work on all content. Well, not in this case. This level of crafting content will still remain largely manual work that designers or editors do to optimize look and readability. It requests an understanding of screen sizes, browsers and responsiveness from designers and editors. And it needs to be implemented in the actual interface — not a photoshop file or a demo.

Nowrap Classes
There is a simple way to build groups of words that should stay together when a line breaks.
This solution works good with text aligned flush left or right. Using it in justified text might lead to a oversize word spacing. It uses style definitions for white-space and word-break. It is also possible to add different styles for other breakpoints, like a mobile layout where words break differently.

HTML:

<h1>
This is a headline with <span class=”nowrap”>some text.</span>
</h1>

CSS:

.nowrap {
white-space: nowrap;
word-break: keep-all;
}

Demo: http://codepen.io/johholl/pen/GppzVe

Non-breaking Spaces
Quite obvious, lightweight and easy to maintain are non-breaking spaces. By replacing the white-space in between two words with a “&nbsp;” the two words will not be separated in a text line. In the process of designing and delivering the content it is easier to handle.

HTML:

<h1>
This is a headline with some&nbsp;text.
</h1>

Demo: http://codepen.io/johholl/pen/avBwVd


That’s it?

While I don’t see a way to solve this problem generically with CSS in a near future, as there simply seems to be too many parameters that come into play, let’s go through the possible solutions:

  1. A possible nth-word CSS selector could help in the future. It might select the last two words in every text element. Still we would not be able to select them as a group and apply a nowrap.
  2. There are of course possible JavaScript solutions (like: BalanceText). But to be honest I consider it a CSS problem and would not bother to write a script that decreases performance or the loading experience. The issue is too small and should not lead to a solution that possibly creates a bigger issue.
  3. We could run a script in the backend to combine all last words of a text block to a nowrap-class or add a non-breakable space. But if one of this words is super long we might mess up the whole text block.

This level of typesetting might remain something that designers do manually. Also every editor and designer will handle it differently. Besides the functional requirement of readability, it is part of the look and feel and it defines how we decided to set a typeface in a specific layout.


Johannes Holl is co-founder and UX-designer at Boana