htmlcsswebkit-transform

Rotated Text doesn't render well

I am trying to display text in html using rotate to display it at 45deg (or near enough that)

Unfortunately it just doesn't look good at all. Does anyone know of a way to fix this or maybe a font that renders better when its at 45degs than other fonts?

Example below http://jsfiddle.net/stevewill61/3WpfP/

CSS for the Banner in the jsfiddle is the following

.test:before {
    position: absolute;
    background: #008000;
    display: inline-block;
    content:'Live';
    -webkit-transform: rotate(-45deg);
    font-size: 10pt;
    top: 5px;
    left: -20px;
    font-weight: bold;
    color: #fff;
    padding: 2px 25px;
    box-shadow: 1px 1px 1px #000;
    font-family: Arial;
}

Here is a picture as requested

http://oi39.tinypic.com/2607ifa.jpg

Solution

  • You could try adding font-smoothing. I think the biggest problem is the font-size, if you bump up the size 1 more pt it looks much more clear.

    -webkit-font-smoothing: subpixel-antialiased;

    or

    -webkit-font-smoothing: antialiased;

    Here's a fiddle: http://jsfiddle.net/stevewill61/3WpfP/

    And some examples of font-smoothing: http://maxvoltar.com/sandbox/fontsmoothing/