Search code examples
htmlcssfont-smoothing

Fonts start to get blurry when smaller than 11px

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...

Solution

  • 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.