Text in responsive design
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 2020. 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 a responsive website?
Update available!
I published an update on this article. Read the newer insight here:
Or continue reading…
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 gets separated from the rest of the paragraph and leads to a grubby look and reading experience.
Widow 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 gets 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.
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.
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.
The next example shows a website in two viewport sizes. Two different problems appear: First, 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 text line. 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 “ ” 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 text.
</h1>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:
- 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.
- 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.
- 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 these 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.
Want to read on?
I published an update on the Boana blog.
Check out my second article on the topic:
