When there is a lot of white space, should text be centered or placed to the left of the web page?

Question

Consider Paul Graham's site as an example:

There is a lot of white space. He chooses to put his content at the left of the web page. Alternatively, he could have chosen to center it (while still left-aligning the text):

What are the advantages and disadvantages of each approach? Is there a best practice?

My question is very similar to Should forms be aligned left or center, if less than full page width?. However, I'm curious as to whether the recommendation for text differs from the one for forms.

---

It seems clear that it's a bad idea to just make the lines longer. http://practicaltypography.com/line-length.html recommends 45-90 characters per line:

Shorter lines are more com­fort­able to read than longer lines. As line length in­creases, your eye has to travel far­ther from the end of one line to the be­gin­ning of the next, mak­ing it harder to track your progress vertically.

I've seen many other recommendations in this range. Paul Graham himself explains why his lines are so short, and notes that he doesn't think the white space is a problem:

Why is the text on your site so narrow? It wastes screen space.

The aim of web design is not to use all available screen space. It is legibility. Text is most legible with no more than 70 characters per line.

Answer 1

Design is purely a contextual approach.

In the current context, the example you've presented, there the left column navigation is a fixed element throughout the web-pages, so the best perceivance for the human eyes to co-relate its other elements is left aligned body. If it was a row navigation pane, the best perceivance for the human eyes would be a center aligned body. (Ex. Medium)

There is nothing like best practice in design, its ever evolving. White spaces are generally used to draw attention of users from a blank to something interactive. It’s completely on designers, how creatively they use these principles of psychology in their design to make the experiences effective and pleasant for users.

Answer 2

Most of the answers here are dwelling deep into the text readability & legacy research (I am not saying that there is anything wrong about it) about typography. However, I'd be more concerned about the purpose that text serves.

In the wake of mobiles & complexity reduction, Big, bold, centred typography with short line length seems to be the first choice of the industry. This behaviour seems to be driven more by the dynamic business requirements (I'm excluding the obvious ones) such as:

1. Centre aligned text plays well with multimedia content insertions.

2. Negative space/minimalism is a widespread UI pattern now and is part of all the major design frameworks to an extent (flat design, material design and all new systems draw something or other from minimalism).

3. A centred text plays really well with varied screen sizes, combined with (even) larger text sizes, it creates the best mobile reading experience.

4. Talking about design perception for humans, equally distributed white space is known to increase user comprehension and allow users to create mind maps easily. (https://www.fastcodesign.com/3046656/why-white-space-is-crucial-to-ux-design)

In addition, it's all the matter of the objectives of the design more than anything. "Providing ultimate reading experience with implementing all UX laws" is rarely the objective. sometimes a page is just meant to share a piece of information which caters to a targetted audience or for sharing information at the individual level without much of a business objective.

Paul Graham's site has a lot of white space and it still a regular left to write text orientation. but it's also not mobile optimised, neither it is the most aesthetically appealing designed page. It's there to serve a purpose and it's doing it greatly for while now. That's one of best learning for me as well. First & foremost reason behind any design is it should get work done, everything else is secondary.

Here are two screenshots for ya'

Now, they both serve their own purposes, however medium caters to a large audience and thus requires an aesthetically appealing interface with compatibility for all screen sizes. Also, it caters so a very wide audience. On the other hand, paul graham's page is more like a place where one would reach when he is looking for some expert advice and it serves that purpose as well.

What are your business/personal objectives? who is your target audience? Discussing anything before putting these two questions in context will not yield you any good results.

PS: I'd always go with minimalistic, centered (but left aligned) text with a short line length & relatively higher line hight. why? because that just makes more sense in the time we live in ;)

Cheers.

Answer 3

Wouldn't make a strong rule to generically center or left justify content as there are pleasing designs that can be accommodated either way.

In the case shown, because it has left navigation, I would left justify all of the content and constrain the width of the body text to a readable length.

For this example, centering the content (including the nav bar) introduces distracting white space from the left edge of the window. Would be more appropriate to anchor the nav on the left and float the text in the center, but that then introduces eye travel with little (no) visual benefit.

Answer 4

It doesn't really matter as long as it's readable. But in the example you have taken, the paragraphs should be left aligned to match with the layout. Make sure you keep good font-size to line-height ratio. Avoid justifying paragraphs as it effects the continuity of flow of words - which makes it less readable.

Answer 5

You should utilize the space given to you. That means that you should not waste screen space if it can be put to use to prevent your users from needing to scroll. Now, that doesn't mean you should make the text as wide as the page... it's difficult to read text that wide. But what about a responsive page design that adds a second or third column of text if possible?

If you are utilizing the space, then the page will naturally become left justified. If you choose to keep the whitespace then there are only aesthetic reasons to prefer one over the other.

Answer 6

If you are aiming for a reading website/content rich website, Keep the following for reference,

1. The elements you keep in your website increases the user efforts i.e elements like accordions, tabs,etc should be kept at the minimum. It is noted excessive use of this may improve the look and feel but reduces the readability. Try formatting the content instead of using these.

2. Eye movement required to cover the content of the website, should not move between the screen window. Example: If there is two columns the end of the 1st column should not go beyond the screen height, i.e user should not scroll to the bottom and then back to the top to read the same article. Usually News websites follow this rule if you have observed.

Many modern famous websites try to distribute the content uniformly with the content of importance as close to the center as possible. i.e users are accustomed to see ads at the LHS and RHS and long widths/lengthy text makes up for eye movement which could be straining to the user.

Now to the answer, I prefer to place the content type website's content/articles in the center with text left aligned and leave the spaces on the left and right like this website and many other major websites. I've noticed this also helps during the responsive designs keeping the contents intact.

Answer 7

One difference which I suspect is sheer performance and functionality. I suspect Paul Graham's site is static and does not care about the responsive layouts. Medium, on the other hand, does care about the overall length and breadth of the browsers and adjusts accordingly.

A static site is faster to load is more compatible with old browsers and overall wins from a performance standpoint. Keeping something at the center does need some work on the browsers part. If you happen to resize the window, you will find that Paul's site doesn't even flinch. If you center the content, would you keep the nav bar at the left most edge? On a widescreen monitor, will the text look orphaned?

Another example comes to mind is Reddit. That site does not care much about the overall world/letter length of a column. It is aimed at being functional and that is expected from the target user base.

I am not advocating for or against an approach. I am just musing about the various considerations which go into the choice of layout. Highly performance oriented and functional, vs. heavier but arguably more pleasing to the eye.

On a related note, I personally do not find the multi-column layout favorable for the web. Amazon Kindle's online reader does offer a multiple column view and I have rarely used it. But that's just me.

Bottomline is, I do not find this decision to be very straightforward. If you users are expected to be using the site in old browsers/older systems, I would not trouble the machines with responsive layouts. On the other hand, if I am aiming to be a modern new-age web publication platform like Medium, I might as well go all-out.

Just my two cents.

Answer 8

I would argue it should be centered.

On big screens (21 inches+) you would have to turn the whole head to read the text and it would be quite uncomfortable. Also the text is very small; I would make it at least 16px and close to 20 or even more on bigger screens.

Also I'd say we are more accustomed to centered websites (we read best what we read most), so left aligned ones are seem unusual and may require more mental effort & attention. It may be good for a promo site where they want the attention, but for content-heavy sites you want to be concentrated on text.

Site has other usability issues, e.g. in the navigation it mixes internal and external links.

Answer 9

I found that no one answer listed out the advantages and disadvantages comprehensively. Based on the current answers, here are some things to consider. To me, the list below feels incomplete and I am still interested in hearing about other factors to consider.

---

Advantages of center-aligned content:

• Users with large screens won't have to turn their head [answer].
• Users expect to see ads at the left-hand side and right-hand side of displays [answer].

Advantages of left-aligned content:

• Centering introduces white space at the left edge that is distracting to readers [answer]. Maybe?
• Centering requires work from the browser and could thus be less performant when initially loading and when resizing [answer]. Personally, I find it implausible that a system would be so slow as to not handle centering well.

It should be noted that the alignment of the navigation menu matters. A left-align menu works better with left-aligned content. A centered menu works better with centered content.

The possibility of using columns was also brought up. The advantage of columns is that there is more content above the fold (see link for the importance of the fold). The disadvantage is that it takes effort for the user to go from the bottom of one column to the top of the next one. Especially when there is enough content such that scrolling is required [answer] (which happens the majority of the time).