Clockwise or counter-clockwise rotated text: which is easier to read?

Reading Time - 6 min

Neither direction is easier to read. Every study that has tested clockwise against counter‑clockwise rotated text — going back to 1956 — has failed to find a reliable difference between them. So pick by convention, not legibility: rotate counter‑clockwise (reading bottom to top) for chart axis labels and vertical UI labels, because that is what every major charting library already does, and clockwise (top to bottom) for anything modelled on a UK or US book spine. The cost you should actually worry about is rotating at all.

The evidence on direction: there isn’t any

This question has been tested properly, more than once, and the answer keeps coming back the same.

Michael Byrne’s 2002 study for the Human Factors and Ergonomics Society compared horizontal text, rotated text and scrolling marquee text with 72 participants. Rotated text was read significantly more slowly than horizontal text, and marquee text more slowly still — but the comparison between left‑rotated and right‑rotated text produced nothing at all. Byrne’s conclusion was that there does not appear to be an inherent advantage for right‑rotated over left‑rotated text.

Miles Tinker reached the same conclusion in 1956, finding no clockwise/counter‑clockwise asymmetry and noting that spine titles therefore read equally well — or equally badly — either way. What he did find was how expensive rotation itself is: around 50% slower at 45°, and more than 200% slower at 90°.

Yu, Park, Gerold and Legge put a number on it again in 2010 in the Journal of Vision: reading speed for horizontal text was 81% faster than for rotated text, which they attributed to a reduced visual span rather than to anything about direction.

One caveat before you quote those figures: this research used prose and word lists, not twelve‑pixel dashboard labels. The direction finding transfers cleanly because it is a null result; the size of the penalty for a two‑word axis label is an extrapolation.

The useful finding is the 60° knee

Koriat and Norman’s 1985 work is the most directly actionable of the lot. Below 60° from upright, they found that neither orientation nor string length had any measurable effect. Between 60° and 120° the cost of disorientation climbed sharply, and it climbed faster the longer the string. Past 120° it stopped getting worse.

That gives you a real design rule. A 45° axis label is close to free. A 90° one is not. So before you argue about direction, try not rotating: shorten the labels, abbreviate them, stagger them on two rows, drop every other tick, or turn the chart on its side so the categories run down a horizontal bar chart and stay upright. Rotation is the option you take when those have failed.

In charts, counter-clockwise is the convention

If you do rotate to 90°, go counter‑clockwise, so the text reads from the bottom upward. This is not a matter of taste — it is what the tools already do, which means it is what your users have already learned.

Observable Plot is the only one of the big libraries that documents the sign convention explicitly: its tickRotate option is an angle in degrees clockwise, and its own examples use -90. Vega‑Lite defaults labelAngle to 270° for nominal and ordinal x‑axis fields, which is the same rotation. Chart.js negates its label rotation before applying it to the canvas, so its slanted labels also tilt counter‑clockwise, rising to the right.

If you are building the chart anyway, the palette deserves as much attention as the labels — our colour scheme generator is a quick way to get a set of series colours that stay distinguishable.

Book spines go the other way, and it depends where you are

Here is where the two conventions collide. In books published in the United States, the United Kingdom, the Commonwealth, Scandinavia and the Netherlands, spine text runs from the top down when the book is standing upright — you tilt your head to the right. In many continental European and Latin American countries it runs from the bottom up, so you tilt your head to the left.

The descending convention is codified in ISO 6357 (and BS 6738), with an American equivalent in ANSI/NISO Z39.41. The justification is neat: descending text reads correctly when the book lies flat with the cover face up. There is no binding standard in Germany, Austria or Switzerland, which is part of why the split persists.

So if the thing you are designing borrows the mental model of a spine — a shelf of documents, a stack of cards seen edge‑on — rotate clockwise for a UK or US audience. If it borrows the mental model of a chart axis or a side rail, rotate counter‑clockwise. And where a design has vertical text in more than one role, it is fine to use both, as long as each role is internally consistent.

A useful shorthand for tab‑like elements: clockwise on the right edge, counter‑clockwise on the left edge, upright along the bottom. That keeps every label rotating away from the content it belongs to.

Doing it in CSS

Use writing-mode, not transform, when the rotated text needs to occupy space.

.axis-label   { writing-mode: sideways-lr; } /* counter-clockwise, reads bottom-to-top */
.spine-label  { writing-mode: sideways-rl; } /* clockwise, reads top-to-bottom */

The sideways-lr and sideways-rl keywords used to be a Firefox‑only curiosity, and a lot of advice online still says so. That stopped being true in 2025: Chrome shipped them in version 132 in January and Safari in 18.4 that March, joining Firefox, which has had them since version 43. All three engines now support both.

Prefer them over vertical-rl and vertical-lr for horizontal scripts. The vertical-* modes apply text-orientation: mixed, which keeps CJK characters upright — excellent for Japanese, wrong for an English label, where it also mis‑sets punctuation. Note too that text-orientation offers only a clockwise sideways value; counter‑clockwise is reachable only through sideways-lr or a transform.

The difference from transform: rotate(-90deg) matters more than it looks. Per the CSS transforms specification a transform does not affect the flow of surrounding content: a rotated 400 × 20 px heading still occupies 400 × 20 px and simply overhangs its neighbours. A writing-mode element genuinely becomes 20 × 400 and the engine reserves the space, and its text wraps against the available height.

What it does and does not cost in accessibility

Rotation happens at paint time. The DOM is unchanged either way, so a screen reader announces exactly the same text whether you used a transform, a writing mode, or nothing at all. Rotating text does not hurt screen reader users.

Two WCAG criteria get misapplied here, so it is worth being precise. SC 1.3.4 Orientation is about content that locks itself to portrait or landscape on a device — it has nothing to say about rotated text inside a page. SC 1.4.10 Reflow is the relevant one, and it explicitly accommodates vertical text, setting the 256 CSS pixel threshold for content designed to scroll horizontally. There is no W3C guidance anywhere that prohibits vertical text; the case against it is empirical, not regulatory.

The group genuinely disadvantaged is people using screen magnification, who have to track a rotated line through a small viewport. That is one more argument for keeping rotated strings short.

Checklist

• Can you avoid rotating? Shorten, abbreviate, stagger, or switch to horizontal bars.
• If you must rotate, can you stay under 60°? That is where the penalty largely vanishes.
• Axis labels and side rails: counter‑clockwise, reading bottom to top.
• Spine‑like elements for a UK or US audience: clockwise, reading top to bottom.
• Use writing-mode: sideways-lr / sideways-rl, not transform, when the text needs to take up space.
• Keep rotated strings short, and never rotate body copy.

Rotated labels are usually a symptom of a layout under pressure, which is the same pressure that produces cramped tap targets and text that will not reflow at 400% zoom. If you want that checked mechanically, our free site audit covers reflow and text‑spacing failures. And if the labels in question happen to be times or durations, how you format them will save you more horizontal space than rotating ever will.