Why You Should Remove Orphans from Your Body Text

by on 10/21/14 at 12:34 pm

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.

orphan-text

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.

  1. Adjust the spacing between words to create tighter or looser paragraphs.
  2. Adjust the column width of the body text so that the lines form proportional rags.
  3. 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.


OUR PRODUCTS

Light Resume Light Freelancer Wireframe Sheets Wireframe Patterns Flow Patterns

AFFILIATE

Elegant Themes

Author and editor-in-chief of UX Movement. Finds beauty in clear, efficient design and loves fighting for users.

16 Responses to “Why You Should Remove Orphans from Your Body Text”

  1. Fabricio Teixeira

    Oct 21st, 2014

    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.

    • anthony

      Oct 23rd, 2014

      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.

      • Mallie Hart

        Nov 16th, 2014

        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!

  2. Stephanie

    Oct 22nd, 2014

    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 :/

  3. Catherine

    Oct 22nd, 2014

    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

  4. Richard Speigal

    Oct 22nd, 2014

    How do you tackle this on a responsive website?

  5. Fernand

    Oct 22nd, 2014

    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.

  6. Michael Kjeldsen

    Oct 23rd, 2014

    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/

    • Ricardo Zea

      Oct 28th, 2014

      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.

  7. Phill Millward

    Oct 24th, 2014

    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.

  8. Ian Armstrong

    Nov 3rd, 2014

    If you aren’t opposed to a little jQuery
    https://github.com/megasmack/jquery.deorphan.js

    That script makes it a breeze.

  9. Vlad Malik

    Nov 18th, 2014

    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.

  10. Dan Dias

    Dec 14th, 2014

    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…

    • anthony

      Dec 16th, 2014

      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.

  11. tim carrier

    Mar 17th, 2015

    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.

  12. rizbaloch

    Apr 20th, 2016

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

Leave a Comment