I have this page: http://www.problemio.com/problems/problem.php?problem_id=161

On the right side I have a few sections like "page stats" "recommend" "problem categories"

what I am wondering is whether it is better to center align the section headings or left-align them?

Also, whats the best way for me to capture the screen shot so I can post it here instead of the link to the site? I don't have Word which I know you can save the screen shot to, and I am on a pc.

  • 2
    Center alignment is bad most of the time (unless it's a button label). – dnbrv Feb 27 '12 at 17:11
  • @dnbrv, Explanation or source. He's talking about a header, not text. – Pacerier Sep 17 '14 at 12:37
  • Related, though different: ux.stackexchange.com/a/26321/5362 and ux.stackexchange.com/q/3177/5362 – Pacerier Sep 17 '14 at 13:04
  • @Pacerier: ixda.org/node/14744 (fewer than 5 minutes of Google) – dnbrv Feb 11 '15 at 1:01
  • the page has been redesigned. If you have another source, please put it here directly to avoid future changes in the link. – Ooker Aug 29 '15 at 18:06

This is more of a Graphic Design question rather than UX.

That said, countries that use the Latin alphabet, we read left-to-right and we're accustomed to aiming for that left side of the column when reading and scanning.

So, most of the time, by default, you'd want to left-align everything.

But there are exceptions and sometimes center-aligning makes sense.

In your example case, though, I see no benefit to center alignment so would keep them left aligned.

| improve this answer | |
  • True that we have to left-align body text. However, center alignment has the benefit of making headings "stand out". That's the same reason why we increase the font size of headings, to make them "stand out". Why do you say that there's no benefit to center alignment for headings? – Pacerier Sep 17 '14 at 13:11
  • @Pacerier because I see no benefit to doing it in the example that was given. Yes, centering is a way to make something stand out. As is increasing text size. As is choosing a particular typeface. As is using a bolder typeface. As is using color. All are valid options. Rarely do you need to use all the options. – DA01 Sep 17 '14 at 14:36
  • Ok, there's no way to critique your viewpoint since the example doesn't seem to exist anymore. – Pacerier Sep 17 '14 at 16:31

In most instances centrally aligning text is considered bad practice.

Left aligned text is much better for scanability/readability.

I know there is a difference between body text and headings but the same rules apply.

Also see this thread for some good evidence: Is left-aligned text generally preferable over centered text?

| improve this answer | |
  • 1
    This answer is mostly hand-waving. If "same rules" should apply to both headings and body text, than headings should have the same font size as body text (which they don't). The link you provided contains no "evidence" that left headers are better than centered headers. "evidence" will come in the form of strict surveys of a large sample population. – Pacerier Sep 17 '14 at 13:07

I think the main question is what context you are doing this in. Generally left aligned will work for most Web applications. What I've found is that this will become more of a relevant question when you have multiple levels of headings.

For example, the Chicago Manual of Style will place top level headings center, with all sub-level headings left aligned, and also change size or weight depending on how many levels down you go.

Essentially, if you are posting some really detailed, multi-level, documents, maybe you should pick a style and use their standards. Otherwise, I'd hang left :)

| improve this answer | |

Since this is more of a graphic design question, I'll answer it as such:

  • Let's left-align your text and see just how much that improves things. This creates a grid and strong lines that exude a sense of control and professionalism.

  • Also, let's use more appropriate fonts. "Lobster" is a very playful font reserved for children, games, and leisure. Let's swap it out for, say, "Barlow" which looks a bit techy but is still legible and professional.

  • Let's unify colors by making that line at the top of the page the same green as the content below.

  • Let's round the submit button to match the other input fields. Alternatively, you can square them all. Unity is key.

enter image description here

| improve this answer | |

Patterns are violated to attract attention to something extra important or unusual; to turn on thinking. A disruption in a pattern takes extra energy to process. On the linked page everything is left-aligned. What is the reason for breaking the pattern?

| improve this answer | |
  • Could you please elaborate on your answer? The rhetorical question doesn't cut it. – dnbrv Feb 27 '12 at 19:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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