Text typically falls into a single column on the majority of websites - the user reading down the page. The only scroll motion therefore is downward.

I've been experimenting recently with the CSS3 Column rule to split textual content into two columns. As a result the page length is shortened significantly, however it does require that the reader scroll back to the top after they have finished reading text in the first column, so that they may continue onto the second.

Whilst how much of a scroll is required depends on the amount of content itself and the users window size, I can't help but think this hinders the user experience (I do of course include an auto scroll to top button of the column, but still).

Does anyone have any experience (i.e gathered any data) in using column based layouts for textual content?

Is a column based layout too far removed from the expected behavior of a page? (therefore having a negative impact on UX)

If you know of any studies that have been conducted into this, please do share also.

  • 1
    Personal opinion: I dislike reading multi-column text in a pdf document as it requires unnecessary (in my view) scrolling. At least in a pdf multi-column text has an excuse in that it supposedly is intended to be printed, or the representation of a print document. For a website I don't see any excuse to add this extra scrolling burden. Jan 28, 2013 at 8:06

1 Answer 1


I agree with you that forcing the user to scroll back to the top to read the next column is bad. Even with the 'back to top' button, it is an interruption where the user has to:

  • Find the button
  • Move their mouse to it
  • Click it
  • When it goes back to the top, find the start of the second column with his eye.
  • Compare this with one column where the user continues scrolling down from the start to the end of the article. There is no break in the flow.

    If you are worried that a single column is too wide that it is becoming tiring for the user to read (this happens because when the users eye finishes a line and moves back to the left side, it can lose which line it was on), you can fix this by increasing line height, or increasing font size AND line height.

    A good example of a site with good readability is: http://trentwalton.com/ - For text heavy pages, don't be afraid to use a large readable font, with good line height..

    Your Answer

    By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

    Not the answer you're looking for? Browse other questions tagged or ask your own question.