Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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

share|improve this question
19  
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 '11 at 15:43
14  
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 '11 at 18:59
1  
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 '11 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 '11 at 14:38
2  
@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 '11 at 14:50
show 2 more comments

11 Answers

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.

share|improve this answer
    
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 '11 at 14:33
    
@BenBrocka You might've chosen the single worst site out there that uses GetSatisfaction. My eyes... –  badp Dec 8 '11 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 '11 at 14:24
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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.

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

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.

share|improve this answer
1  
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 Neely Dec 7 '11 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 '11 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 '11 at 8:51
1  
Why was it terrible to read? Was it printed in rotated text? CW or CCW or both? –  Kris Dec 8 '11 at 9:21
5  
+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 '11 at 8:44
show 1 more comment

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.

share|improve this answer
2  
Funny, I think it should be exactly opposite –  BlueRaja - Danny Pflughoeft Dec 7 '11 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 '11 at 20:22
add comment

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.

share|improve this answer
2  
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). –  Mike Brown Dec 7 '11 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 '11 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 '11 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 '11 at 1:03
1  
@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 '11 at 15:04
show 5 more comments

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.

share|improve this answer
5  
Despite being American I always find reading top-to-bottom difficult. Great answer, thanks for the drawings. –  donut Dec 7 '11 at 22:56
2  
You know, I do, too. I think it's more "optimistic" to read up. –  tajmo Dec 8 '11 at 0:10
add comment

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.

share|improve this answer
    
Good point. So to suit the majority, it should be CCW then. –  Kris Dec 8 '11 at 9:31
add comment

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

share|improve this answer
add comment

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.

share|improve this answer
add comment

This post does not cite any references or sources. Please help improve this post by adding citations to reliable sources. Unsourced material may be challenged and removed.

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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