# What should be the alignment of titles?

Our pretty new design has gotten bad feedback regarding centered question titles from several users.

Paweł already said he's going to change them back to the more standard left alignment, but I think the middle-ground version is worth looking at. Plus, I think the feedback should be collected in proper form, and not just as a bunch of comments mixed with other feedback.

Therefore I have mocked three versions; please vote on which you prefer, and add other variants I have missed. Thanks!

The vote was open until February 5th, 23:59 GMT (plus the time it took me to wake up and think of checking here). We've notified Paweł of the result.

Vote count (Feb 6th, 12:25 GMT):

• Left-aligned, breaking before sidebar: +18/-2
• Left-aligned: +12/-0
• Centered over text: +3/-6
• Bouncing marquee: +2/-6
• Centered: +1/-10
• Does the impression change with longer titles, in particular such that overflow? – Raphael Feb 2 '16 at 12:05
• Longest titles on the site: cs.stackexchange.com/questions/35190/… and cs.stackexchange.com/questions/42852/… – Gilles 'SO- stop being evil' Feb 2 '16 at 12:17
• @Gilles Thanks, added pictures. Wow, long titles are crappy with either solution. – Raphael Feb 2 '16 at 12:31
• @Paweł Looks like we have a clear winner. – Raphael Feb 6 '16 at 13:27
• Yeap, this should be live on Monday. – Paweł Feb 7 '16 at 14:50
• @Paweł Much better, thank you! – Raphael Feb 9 '16 at 12:03

## 5 Answers

### Left-aligned, breaking before the sidebar

Even with left-alignment, we may not want titled to flow over the sidebar:

Reproduce by combinging text-align : left; with padding : 8px 320px 11px 20px; on div#question-header.

• I think the whitespace left for long titles is wasted. Long titles are bad in every of the variants, but using the space above the sidebar can help save vertical space at least. – Raphael Feb 2 '16 at 13:44
• Most long titles barely overflow into the area above the sidebar, which is why I don't like the fact that just one word would break to the next line in that case if this design is implemented. – intcreator Feb 4 '16 at 7:36
• @brandaemon I guess that's true for any breaking point. We'd have to look at the distribution of title lengths to see if such events are more or less likely with longer or shorter title areas. – Raphael Feb 4 '16 at 7:39

### Left-aligned

The network standard (the distance from the left border may have to be tweaked):

Reproduce with changing div#question-header to text-align : left;.

• Title over the sidebar looks weird. Well, long titles are bad in every of the variants, but using the space above the sidebar can help save vertical space at least (compare with the alternative). – Raphael Feb 2 '16 at 13:44
• This is the format that Stack Overflow uses, although that doesn't necessarily mean it's the best. – intcreator Feb 4 '16 at 7:19

### Centered over the text

A quick mock (adding 300px to the right padding to account for the sidebar):

Reproduce with changing div#question-header to padding : 8px 320px 11px 20px;; note how the right padding gains 300px, exactly the width of the sidebar.

• This is far less weird than the "center over everything" variant, but there is lots of wasted space with long titles. – Raphael Feb 2 '16 at 13:45
• For titles that are short, this looks really good in my unpopular opinion. But long.. gross.. – Insane Feb 4 '16 at 8:07
• @Insane That's my impression, too. – Raphael Feb 4 '16 at 9:28

### In a marquee, bouncing between left and right

This seems like a reasonable compromise between center, left and right alignment.

• <shudder> <whimper> <croak> – Gilles 'SO- stop being evil' Feb 3 '16 at 20:10
• I do hope this was intended as satire. – Raphael Feb 3 '16 at 22:53
• I pissed myself laughing at this. – Insane Feb 4 '16 at 8:06
• @Insane Were you around when the internet actually looked like that? I mainly got scared. o.o – Raphael Feb 4 '16 at 11:24
• @Raphael I was around, but not old enough to be viewing the pages! – Insane Feb 4 '16 at 11:27
• There is one thing missing - it does not blink :-/ – Evil Feb 4 '16 at 18:21

### Centered

The current version:

Reproduce: leave div#question-header with text-align : center;.

• This one I like the least. – Raphael Feb 2 '16 at 13:45