Did you know that the way your paragraph text wraps can affect how users read it? You could create orphans that hurt readability. Orphans are short lines that appear at the end of a paragraph. They are caused by paragraph length.
When users read lines of body text, they build up a reading rhythm. Orphans interrupt the user’s reading rhythm and cause an awkward ending. The shortness of the last line makes finishing the paragraph feel abrupt. When reading aloud, orphans make the ending sound disjointed. A good paragraph should flow from beginning to end.
Orphans don’t just make your text sound awkward, they also make it look awkward. They create disproportionate rags in your body text. This makes the paragraph look asymmetrical and off-balance. The rags can also create lines of whitespace that can distract users. An ideal rag should go in and out from line to line in small increments.
To avoid orphans, try to extend the ending line of your paragraphs past the midpoint of the body text. There are a few ways you can do this.
- Adjust the spacing between words to create tighter or looser paragraphs.
- Adjust the column width of the body text so that the lines form proportional rags.
- Edit the paragraph wording so that the orphan connects to its preceding line.
The best way to remove an orphan is to edit the paragraph so that it uses more or fewer words. This is because adjusting word spacing and column widths changes the consistency of your page layout text. It’s best to remove an orphan after you’ve written your paragraph. This way you’re only changing the wording, not the message of the paragraph.
Don’t write paragraphs for your website and leave it at that. Look for orphans and remove them from your body text to give users the best reading experience. It’s not possible to remove every orphan especially if your site uses responsive design. But try to at least keep your orphans to a minimum for users who view your site on their desktop device.
Well, this is great in theory and for print design, but it seems to completely ignore responsive webdesign and the fact that one cannot have control over that in all possible screen sizes.
Like many have said, this is a challenge with responsive websites, but you can still optimize for at least your most common screen size.
I think it’s better to optimize for desktop because the length of body text is generally longer than mobile. A long line and really short line is easier to notice on desktop.
Well said. Just because there’s not an every screen size solution doesn’t mean you shouldn’t take the care to ensure you fix where it might cause the most damage. We agree!
Hi, I have to admit I’m a little surprised to see here a really print oriented advice for a website. Especially in a context of a responsive website, you might not have control on how the content will flow in the bloc on different screen size so how would you be able to handle this ? You might remove the orphan for one breakpoint, but then it’ll come back on some other screen size :/
Hi,
I agree about that. However, this is very hard to do with responsive web design: a container is fluid and the text wraps inside according to various devices. Even increasing the font size makes this very hard to do.
Is there a way to do it taking all that into account?
Thanks
How do you tackle this on a responsive website?
This seems challenging with responsive sites and different screen sizes.
Are you suggesting forced page breaks for one particular screen size?
If I do this for desktop view, chances are the paragraphs will look even worse on other screen sizes.
In a Responsive Web Design world this advice is already obsolete. You can’t possibly cater for every single device’s dimensions, so unless you add a little javascript to your site, you’re about to open pandora’s box 🙂
Widowfix (http://matthewlein.com/widowfix/) is an option. So is http://css-tricks.com/preventing-widows-in-post-titles/
Yes, Chris’ post is awesome, but his solution has a major problem: If you have markup inside the sentence it will get stripped out by his script.
So I decided to fix that and improved his script, which I’ve been using extensively in my projects.
Here’s the demo in CodePen: http://codepen.io/ricardozea/pen/qcDCJ
And here’s one website I designed and implemented and in which I’m using such script on the headings: http://www.checkngo.com/dollars-and-sense/
It’s not a silver bullet but it has certainly helped me maintain a good level of editorial etiquette in my projects without hurting page performance, hence UX, negatively in any way.
some fair comments on here I have come up against this a few times and it breaks me as a designer when I see I see an orphan (or as my old uni lecturer used to call them widows)
, although invalid point about rewording the sentence was quite useful, never thought about doing that.
If you aren’t opposed to a little jQuery
https://github.com/megasmack/jquery.deorphan.js
That script makes it a breeze.
I like to remove orphans in fixed-width situations. One technique is to leave enough space for text to grow across different browsers e.g., to keep a headline or button label from breaking. Another technique is to use non-breaking space to keep the last words together. Finally, you can force line break in key places.
However in most other situations, I’d spend an extra 15min proofreading content than worry about possible orphans.
I have to admit that I’m a bit surprised to see an article about orphan paragraphs that has 4 orphans out of 9 paragraphs. I guess it makes the point that it’s very hard to eliminate them.
I like anthony’s suggestion to aim to eliminate orphans for the desktop user (in response to Fabricio Teixeira), though I’m reading this post on a desktop…
There’s article text and marketing text. It’s harder to eliminate orphans in articles because there’s a lot more text contained in a single fixed width wrapper. It’s better to put more effort into eliminating orphans in marketing text because the text is shorter and more variable.
something to test in the responsive designs:
for desktop, have a looser letter spacing;
for mobile a tighter letter spacing to accommodate the longer words.
I always try not to end text paragraph with two or three words, definitely it looks bad and disproportionate. Solutions which you provide to overcome this situation, I use those too.
The thing which i got from this article is the name of those short lines “Orphans”.
Thanks for the article, now I can justify this practice in a better way !!!
The simple fix for responsive design for anyone wondering is putting in a non-breaking space by using the code   ; instead of pressing the spacebar. By putting it between the two last words in any paragraph, this will keep the two words together no matter what screen size so you will be left with no widows
Technically Line Two of your ‘Non-Orphan’ — A single word after a period is also considered an Orphan. Your ‘Orphan’ example is technically not an Orphan, and Orphan is a singular word on its own.
There’s an experimental CSS property named text-wrap which can handle such issues. I’ve just written a post about it, take a look:
https://savvy.co.il/en/blog/css/css-text-wrap-pretty-balance/