Fonts start to get blurry when smaller than 11px

Question

I'm converting a Photoshop image to HTML, and I noticed that when I set the font size to 11px it gets blurry, but in Photoshop it still looks fine.

So after playing around I discovered that if I set the font type option to smooth instead of none, Photoshop also makes the font blurry.

So, how can I make the font sharper using CSS so that it mirrors Photoshop's font rendering? I'm using Arial as my font. Here's my CSS right now:

.user_status {
    color: #666666;
    font: Arial;
    font-size: 11px;
    display: block;
    margin-top: 10px;
}

Thank you all for you awesome answers, it helped me a lot, i wish i could chose more then 1 answer as the correct one...

Answer 1

Most browsers use the system's font rendering libraries, so most fonts will render slightly different on different operating systems. However, you can try using the 2 css3 properties listed below:

-webkit-font-smoothing: [ auto | initial | none | antialiased | subpixel-antialiased ]

This property only works with webkit browsers, like Safari and Chrome. See http://maxvoltar.com/archive/-webkit-font-smoothing for more on this.

font-smooth: [ auto | never | always | <absolute-size> | <length> ]

This is part of the W3C's CSS Font module specification. You can view the whole thing at http://www.w3.org/TR/WD-font/#font-smooth-prop . I am not sure whether any browser supports this property, yet. YMMV.

Answer 2

Unfortunately, there isn't much you can do. Browsers don't have the advanced anti-aliasing settings that Photoshop does, where you can set the font smoothing mode to sharp, smooth or crisp (which I love). You would have to make the font bigger or smaller, and it depends mostly on the browser how the text is rendered.

Answer 3

Unfortunately, you don't usually have any control whatsoever over how fonts are rendered by the browser. A new CSS3 property, font-smooth, may afford some control, but not the kind you're looking for.

Some alternatives might be to use JavaScript and images, rendered manually or server-side, to achieve the effect you desire. You might also be able to use sIFR (Scripted¹ Inline Flash Replacement) to substitute in a small Flash movie clip that allows you to anti-alias the font however you please, but Flash is hardly ubiquitous and it's not a very efficient nor elegant solution.

So, if you absolutely need this functionality, I would suggest making transparent PNGs with Photoshop and using background-image and text-indent: -9999px to replace the text with the image.

Another point you might want to think about is, should you really be using a font size of 11px? That's rather difficult to see and you might prefer simply choosing a larger font size.

_{¹ I might be wrong on this acronym.}

Answer 4

In webkit you can set:

  -webkit-font-smoothing: none;

This would approximate your Photoshop antialiasing: none.

See a demo here: http://jsfiddle.net/jv5W8/