[How?] Font effects im HTML/CSS

I don’t know how to explain the thing. But let me try. I see a lot of themes with great typeface. Sometimes, when we design a layout in Photoshop, the texts will be so sharp and clear. But when we convert it in to HTML /CSS, sometimes, we lose the clarity of the texts. I mean the fonts may not be that sharp. It appears some crisp texts rather than what we have designed. But when I looked into some of the wordpress themes/html templates, I can see they have used the same font with perfect clarity or without any crisp effects. How’s this achieved? I wanted to give some theme links here. but I know it’s against the rules. Any idea??? or should I be more clear??

Photoshop has a lot more font functionality than a web browser. It applies all kinds of smoothing algorithms. The best way to replicate how a font will look on the web is to set the Anitialiasing in Photoshop to ‘sharp’.

well on light backgrounds i use text-shadow: 0 1px 0 white; this sharpens the text to some extent.

I don’t think the drop shadow will help. I tried that. Any other tricks or suggestions?

Are you talking about regular default HTML fonts or using Fontface?

themelux said
Are you talking about regular default HTML fonts or using Fontface?

Not fontface! oh!! I don’t know how to tell it. The paragraph texts, heading texts everything is so smooth. Check this theme for example: http://demo.brankic.net/?theme=BigBangWP The font is so smooth. Did they add any effects to make it in this way??

They did not do anything. There are some fonts that look great and some look ugly. I personally have no idea why. Also some fonts look good with bigger font sizes and some with smaller. They just used what google gave them. Look on how it looks on google fonts too – https://www.google.com/webfonts/specimen/Oswald

duotive said
They did not do anything. There are some fonts that look great and some look ugly. I personally have no idea why. Also some fonts look good with bigger font sizes and some with smaller. They just used what google gave them. Look on how it looks on google fonts too – https://www.google.com/webfonts/specimen/Oswald

This might help http://www.smashingmagazine.com/2012/07/11/avoiding-faux-weights-styles-google-web-fonts/

amabil said
This might help http://www.smashingmagazine.com/2012/07/11/avoiding-faux-weights-styles-google-web-fonts/

YES !!!! THIS IS THE REASON !!! THANKS A LOT BUDDY !