Home/ Questions/Q 7038719
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T01:42:10+00:00

I’m converting a Photoshop image to HTML, and I noticed that when I set

  • 0

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…

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0