font problem CSS/html

Question

Can someone look at this page carefully. I am trying to fix font on this page. I don't know what previous programmer has done to font. Can you look at service guarantee and service features headings in green panels, edges of text are like someone cut this font with seesaw. Similarly on other parts of page. They are supposed to look smooth.

viewing page on ff and ie8 (widows xp).

Answer 1

Your page looks fine on my browser (Chrome under Windows).

Different browsers all render text differently. What you will find is that there are often sweet spots in font sizes that look better than others. In any case, what you are talking about is whether the browser is displaying fonts anti-aliased or not.

There is a CSS3 property, font-smooth, that you can adjust for this, but don't expect it to work on browsers that aren't smoothing their fonts anyway. You can read about it here: http://webdesign.about.com/od/styleproperties/p/blspfontsmooth.htm

In short, don't worry about it. If it is a big deal for you, then experiment with different fonts and sizes. A good tool for doing this is at http://www.typetester.org/

Don't forget to test your site at BrowserShots.org. It will do screen captures for you, so you can check these details on a wide range of platforms.

If you must have your font rendered in a specific way, then it must be done in an image. This is not recommended. Text should be text wherever possible. However, if you must do it this way, consider one of the many scripts that assist, so you can keep text for browsers that don't support the script, and SEO isn't a problem. Typeface.js is commonly used for this.

Answer 2

I think you mean that these sections aren't anti-aliased. This isn't something you can control when you display text on the browser -- it's actually browser- and OS-dependent.

If it's important to your users to have smooth fonts, then you could anti-alias them in an image program and use images instead of text, but this is extremely inefficient and makes your page a gigantic pain to update.

So, in short, there isn't anything you can do to fix this. See this SO question for more details.

Answer 3

use firebug which is a firefox plugin to see the styles and html tags used in the web page, you can even edit the css used in the web page through firebug.