Font Styling Issue ~ how to make font smooth/Strong in html css

Question

I have Font Verdana + Bold + 16pt + Stong in PSD So In html Conversion, we have Font-family: Verdana + Font-weight:bold + Font-Size:16pt + What for Strong ? (strong html tag is not working for this )

there are 5 Font Styles there in PSD Sharp , Crisp, Strong , Smooth ,None

so I don’t know how to make Font Strong, Smooth, Sharp etc

How can i resolve this issue in all browsers (old + new).

Thanks.

Solution 1

http://webtypography.net/Harmony_and_Counterpoint/Size/3.1.1/ might help solve the issue of text looking a bit less crisp in older Internet Explorers.

As for having a bit more control over the font presentation - light, bold, medium etc I would recommend choosing a nice readable serif or san serif font from www.fontsquirrel.com, most font families will come with a variety of weights that you can play with - run up some spans for different weights.

Solution 2

Sharp, Crisp, Strong, and Smooth are special font effects that affect how Photoshop renders anti-aliased text. There is no equivalent in CSS as far as I know.

What you can try is using CSS effects to scale/transform the text yourself but you will probably have to that for every letter of the text individually, possibly for each browser, certainly for each OS (because the same font is rendered differently in Windows, Mac and Linux).

If this matters to you, the usual approach is to replace the text with a background image using Fahrner Image Replacement (FIR). This shows the text as a fallback or the image with your nicely anti-aliased font.

Solution 3

Check the below links. CSS3 property

http://webdesign.about.com/od/examples/l/bl_fontsmooth.htm

http://webdesign.about.com/od/styleproperties/p/blspfontsmooth.htm

http://www.usabilitypost.com/2010/08/26/font-smoothing/