74

When rotating text with css, should it be rotated clockwise or counter-clockwise? Is one more readable than the other?

Counter Clockwise: counter clockwise     —    Clockwise: clockwise

Improve this question
9
  • 25
    Just for reference of how to do this really badly, I'd like to add another example I grabbed a few months ago.
    – Roger Attrill
    Dec 7, 2011 at 15:43
  • 25
    For some reason my brain assumes the counter-clockwise text is on the left-side of the screen, while the clockwise-text is is on the right-side of the screen.
    – BlueRaja - Danny Pflughoeft
    Dec 7, 2011 at 18:59
  • 2
    It surprises me to see so many answers using the word should as if it is prescribed somewhere, but without any references!
    – Kris
    Dec 8, 2011 at 6:57
  • @PatrickMcElhaney for what it's worth, both images are on the right - I just have my windows taskbar on the right as well. sorry for the confusion.
    – John
    Dec 8, 2011 at 14:38
  • 4
    @John Oh really? This is a great question, but in retrospect, it lacks context. The answers are all over the map because there are a lot of reasons to rotate text, and "it depends." Can you post another question that zeros in on the specific use case you have for rotating text? I'm also hoping someone will ask a well thought out question about book spine orientation.
    – Patrick McElhaney
    Dec 8, 2011 at 14:50

12 Answers 12

Reset to default
59

I believe neither is “easier” to read in general, and I would instead try to make it a country-dependent setting that mimics the common book spine orientation, either in the visitor’s country or in the web site’s country.

In Wikipedia’s book entry, the spine tilting section says the following:

In the United States, the Commonwealth and in Scandinavia, titles are usually written top-to-bottom on the spine. This means that when the book is placed on a table with the front cover upwards, the title is correctly oriented left-to-right on the spine. This practice is reflected in the industry standards ANSI/NISO Z39.41 and ISO 6357.

In most of continental Europe, titles are conventionally printed bottom-to-top on the spine so, when the books are placed vertically on shelves, the title can be read by tilting the head to the left.

My personal preference is counterclockwise rotation, which is consistent with the above since I live in France. A quick look at the ~500 books in my library confirms this: books in French, Spanish or German use CCW whereas books in English (British and American) use CW.

Edit: it appears that book spine orientation does not necessarily reflect the ease with which it can be read when the book is standing on a shelf. My further understanding is that European books would use CCW because the spine can be read easily when standing, and American books would use CW because the spine can be read when standing (not necessarily with ease) and they can be read easily when lying flat. I don’t have much to back up this theory, though.

Improve this answer
11
  • 3
    VERY good observation. I was wondering why so many people went for counter clockwise. I'm used to having vertical text read from top to bottom (like a title on a book spine in America).
    – Michael Brown
    Dec 7, 2011 at 20:41
  • 1
    @MikeBrown I'm an American and clockwise feels backwards and cumbersome. I'm sure there is more science around this then we are currently providing, more so than a simple UX decision.
    – Aaron McIver
    Dec 7, 2011 at 22:52
  • 1
    It could be that the rationale is different for the two configurations, and that European book spines are easier to read when the book is on a shelf, and American book spines are easier to read when the book is lying flat.
    – sam hocevar
    Dec 7, 2011 at 23:16
  • 1
    I don't think it's about being harder to read so much as the dissonance of tilting your head to the right and seeing books in order from bottom to top.
    – Patrick McElhaney
    Dec 8, 2011 at 1:03
  • 2
    @Kris: My observation is that there is a link with the way of "selling" the book through its appearance. It seems to me that a lot of modern novels attempt to print the title or author's name as large as possible on the spine, thus always writing vertically. The books that do not rotate the text, printing it in much smaller characters, are usually from publishers considered more prestigious, such as the French "Nouvelle Revue Française".
    – sam hocevar
    Dec 8, 2011 at 15:04
43

Short Answer
Make them like tabs and follow that mental model (clockwise on right, counter-clockwise on left, upright on bottom).

Medium Answer
If your design uses tab-like elements, follow the logic of tabs. If it uses book-like elements, follow that model and pick a direction—if you're in the US, follow the orientation of book spines here (clockwise). And if you are using elements in different places that use both mental models, follow each as appropriate to its context.

Longer Answer
There are many conflicting mental models, like Western book spines, Eastern European book spines, and folder tabs. There is no way to match all prominent mental models, so you'll have to pick one. The real question is, which model makes the most sense for your user?

Folder tabs are one of the most common forms I see used in web design, so let's say we match that model. Here's what it looks like: enter image description here

Then there is the book spine model, which SlideDeck uses in their demo product. It looks like this: enter image description here

The orientation of the book spine is largely arbitrary, but you might as well match the expectation of users in your area. If it's the US, go clockwise, if it's Hungary, go counter-clockwise, and if it's Italy, it doesn't matter.

Improve this answer
2
  • 6
    Despite being American I always find reading top-to-bottom difficult. Great answer, thanks for the drawings.
    – donut
    Dec 7, 2011 at 22:56
  • 2
    You know, I do, too. I think it's more "optimistic" to read up.
    – Taj Moore
    Dec 8, 2011 at 0:10
22

There is a study on rotated text readability from University of Toronto. Although it is on tabletop displays, I think it can be applied here too. The result shows that it takes significantly less time to read clockwise (-90 degree rotated) for words in any positions of the screen. It is not clear for 6-digit number though.

Improve this answer
6
  • 2
    Not surprising. Book/magazine spines are typically printed so that when stop upright the text is counterclockwise, so people have much more practice reading text that way. (In the English speaking world anyway; I don't have any data about elsewhere.)
    – Dan Is Fiddling By Firelight
    Dec 7, 2011 at 19:07
  • @DanNeely: +1 A good, relevant example of book spines. However, I know they do not follow a standard. I always have difficulty reading off book shelves, constantly tilting my head one side to the other.
    – Kris
    Dec 8, 2011 at 6:49
  • That study is positively terrible to read. (I particularly love how the first results table gives up on rotation for sigma values and just stacks digits.)
    – badp
    Dec 8, 2011 at 8:51
  • 1
    Why was it terrible to read? Was it printed in rotated text? CW or CCW or both?
    – Kris
    Dec 8, 2011 at 9:21
  • 8
    +1 for finding some research, however given that the vast majority of participants appear to be from north america its not clear if the result is due to CW being universally easier to read or CW being more familiar due to the participants being more familiar with it due to book spines
    – jk.
    Dec 11, 2011 at 8:44
9

Counter-clockwise rotation always feels most natural to me. It allows me to read left to right without making any conscious decision to do so.

Clockwise on the other hand feels backwards. It feels very unnatural and makes me want to tilt my head to read.

Improve this answer
3
  • I agree personally. FWIW, the feedback bar from Get Satisfaction (as seen here givesmehope.com) is counter clockwise. Perhaps it in part depends which side of the screen it's on too; I always see that Feedback bar on the right side.
    – Ben Brocka
    Dec 7, 2011 at 14:33
  • @BenBrocka You might've chosen the single worst site out there that uses GetSatisfaction. My eyes...
    – badp
    Dec 8, 2011 at 9:19
  • @badp hahaha, it was the last one I saw. It's a friend's site actually, they don't have a UX designer on payroll...hey, as long as it's shiny it's cool, right?
    – Ben Brocka
    Dec 8, 2011 at 14:24
6

Interesting discussion about this topic in the IXDA-forum ...

Clockwise or Counter-clockwise

The discussion in the forum came to the conclusion that the text should be align in the reading direction left-to-right. That means: on left side use bottom-to-top and on the right side use top-to-bottom direction. This corresponds to Patrick's first diagram.

Improve this answer
0
4

I think it depends on the side of the page.

On the left, I want to read bottom to top, on the right, top to bottom.

If I'm looking at the screen, and have to turn my head slightly, that allows me to read left to right still.

Improve this answer
4

Not so much a case of which way it should rotate as its a case that if you have having vertical text in your website, for the purpose of a pull out tab etc. The bottom of the text should face the outside of the screen.

Improve this answer
2
  • I think you're right. This could be apply for the example 1 "GET INSPIRED"
    – sysscore
    Dec 7, 2011 at 16:43
  • 1
    That's actually the opposite conclusion of the link in sysscore's answer - do you have any evidence for your answer?
    – John
    Dec 7, 2011 at 19:01
2

It is easier to read clockwise on the right of the screen and anti-clockwise on the left of the screen simply because that is the way you tilt your head towards it. (assuming your head is in front of center screen)

IE. the base of the text should always point inwards

Improve this answer
1

It comes down to what the text is anchored to. If you've got text on a curve, you align the baselines to follow the curve.

If you've got a box on the left side of the screen (say "previous") the text should be rotated clockwise 90° to have the text read downwards.

If, conversely, you've got a box on the right side of the screen (say "next") the text should be rotated counter-clockwise 90° to have the text read upwards.

If you've got a box hanging off another element, align the baseline to the contours of the element.

Improve this answer
2
  • 3
    Funny, I think it should be exactly opposite
    – BlueRaja - Danny Pflughoeft
    Dec 7, 2011 at 19:03
  • I suppose I should mention the most important part is consistency. If you're attaching from the top, then the text will read in the opposite direction.
    – zzzzBov
    Dec 7, 2011 at 20:22
1

It depends on whether a person is left handed or right handed. If one is right handed, it is easier to read counterclockwise rotated text. If the person is left handed, it is easier for him to read clockwise rotated text. People also rotate their page in a similar manner while writing.

Improve this answer
1
  • Good point. So to suit the majority, it should be CCW then.
    – Kris
    Dec 8, 2011 at 9:31
0

I agree with "clockwise on right, counter-clockwise on left" approach.

My hunch is that this mental mode comes to us from building signage, where text which appears on flags or banners looks more "natural" if its baseline aligns with the building wall (longer, visually dominant surface).

Likewise, vertical screen edges are visually dominant surfaces in UI and text baselines should be oriented towards them.

Improve this answer
0

The point is not about how it is written on a single line.

Humans are conditioned to reading lists top to bottom or left to right.

When you change the orientation, it reduces confusion if top to bottom also coincides with Left to right.

For instance, if there are are three books that are Part 1, 2, 3. Our natural way of stacking them would be to keep 1 on the left, and 3 on the right.

Now, when you read the titles, you obviously want to read the title for 1 first - then 2, then 3. If written in American style, this won't work and feels wrong. If written in European style, this feels right.

Americans focus on the single book, whereas European method looks and feels right when there are multiple books.

And obviously, when you place books vertically, there is never one book. It is obviously multiple books.

If you are going to place a single book flat, why wouldn't you just read from the top cover instead of the spine!!

I guess the Europeans have a bit more experience with books, considering that Gutenberg started making books there! Probably in a few centuries, Americans will see sense! But don't hold your breath!

Improve this answer
1
  • I don't understand how this answers the question. What is 'American style' or 'European style' and how does that relate to whether text should be clockwise or counter-clockwise?
    – JonW ♦
    Jan 27, 2016 at 11:12

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