Is clockwise or counter-clockwise rotated text easier to read?

Question

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

Counter Clockwise:     —    Clockwise:

Answer 1

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 CW because the spine can be read easily when standing, and American books would use CCW 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.

Answer 2

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:

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

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.

Answer 3

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.

Answer 4

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.

Answer 5

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.

Answer 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.

Answer 7

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.

Answer 8

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.

Answer 9

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.

Answer 10

in my typography class back in college, we were taught that text should always read upwards (counter-clockwise), because downward 'pointing' text was perceived as negative (maybe subconsciously) by people.

Answer 11

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