Jumbly Text

Gross! That slightly rotated text looks terrible!

That text has been rotated the wrong way.

Still wrong.

Rotating Vectorized Text

To rotate vectorized text, use a Rotation matrix on each vertex in the text that hasn’t been rasterized yet. If your rasterizer doesn’t support floating-point coordinates (why would it, you can’t have part of a pixel¹), the text will look all jumbly and weird.

Rotating Rasterized Text

Render the text to a grid of pixels called a “surface.” Use a rotation matrix on each pixel in screen space to sample the surface, using some kind of interpolation that isn’t just nearest-neighbor. When you sample a point that’s not completely foreground or completely background, you’ll get a fuzzy-looking intermediate color.

What this means for your designs that have rotated text

Vectorized text is snapped to pixels in Firefox 17.0 on Mac OS X, Chrome 25.0.1364.172 m on Windows, many browsers I didn’t feel like testing, and Photoshop. If this jumbly look is okay or you don’t target these, you don’t really care.

In a web page, you have two ways of rotating text:

      .jumbly {
        transform: rotateZ(1.5deg); 
      }
      
      .smooth {
        transform: rotate3d(0, 0, 1, 1.5deg); 
      }
    

The former, rotateZ, rotates vectorized text. The latter, rotate3d, uses a 3d transform that happens to rasterize the text before rendering it. Since this looks correct in more browsers, use that.

Sources

Source code for the sample pages can be found in the jumbly_text repo on GitHub. I put a demo page up too.

Notes

1. Well, sub pixel rendering is a thing, but you can only have three parts of a pixel in that case.