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

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

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 6

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 7

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 8

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

Answer 9

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 10

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 11

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.

Answer 12

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!