0

i've actually never encounter this problem before. I usually start designing my layout in photoshop then transfer it to my page.

Somehow, lately i've been using georgia font alot, and i love it when the style is italic, but what comes out in photoshop does not reflect back in the webpage when i set it in css.

Font images

in the pic above, 1. is what i saw in photoshop and what i wanted, but 2. is what i got, no matter what i try changing, be it font-weight or font-size it remains as bold. I want it thinner, is there a way? I tried font-stretch too btw.

Crays
  • 2,458
  • 9
  • 27
  • 31
  • 1
    Font-rendering engines differ in browsers from other applications and on different platforms. As for how you can approximate what you're trying to get, experimentation is the only thing I can recommend. Decreasing the font-size is where I would start. – kinakuta Jul 06 '11 at 04:42
  • 2
    With Firefox 4 and below keep in mind that fonts often look bigger than other applications because they were not using the same value for a pixel as other applications and browsers, see "Consistent CSS Units" in this page => http://www.mozilla.com/en-US/firefox/technology/#css – Ryan Jul 06 '11 at 05:21
  • Related to http://stackoverflow.com/questions/4060607/font-face-anti-aliasing-on-windows-and-mac – Artem Koshelev Jul 06 '11 at 06:01

1 Answers1

4

It's not the bold, it is a system font smoothing.

You are able to change (or disable as in your case) font smoothing in Photoshop, but you can't do it with CSS, unless you are using CSS3 and compatible browser.

Added: I wouldn't recommend you to even try to change the font smoothing. That's the user right - to have fonts rendered the way she likes.

Artem Koshelev
  • 10,548
  • 4
  • 36
  • 68
  • Thanks, but in photoshop i did not use font smoothing, thanks for the links tho :) will have a look! – Crays Jul 06 '11 at 05:08
  • Yes, you can disable font smoothing completely in Photoshop: http://dansnetwork.com/smooth-fonts-in-photoshop/, but it is enabled in the operating system, so browser renders it smoothed. – Artem Koshelev Jul 06 '11 at 05:12
  • thanks, but can i disable it through CSS? because i'm trying with xampp and by using font-smooth: never; it doesn't seem to work, maybe i should try online? – Crays Jul 06 '11 at 05:29
  • As far as I know, only WebKit-based browsers support this property, but you have to use vendor prefix: http://www.usabilitypost.com/2010/08/26/font-smoothing/ – Artem Koshelev Jul 06 '11 at 05:56