Website CSS and Font Sizes - Best Practices

Question

In my website CSS, I'm using EM, PX, PT and Percentages to set the font sizes.

I am also using JQuery UI which uses EM.

I have now come to the point where I need to resize all the font sizes to slightly smaller.

All in all, what's the best what of bringing all the font sizes down a bit and should I be changing how I'm doing font sizes to whichever way?

Everyone seems to have a different opinion on this topic.

Answer 1

As per my understanding. What you must do is something like that:

body{font-size:11px;} This will make 1em = 11px

Now everywhere you'll set the font-size in em like:

a{font-size:1em;} and follow the same way to all the elements like h1{font-size:2em;}

Now if you need to increase decrease font size just set the font size in body like:

body{font-size:13px;} etc.

Hope that helps

Answer 2

In the olden days people recommended using em for fonts, because older versions of IE didn't resize the text on zoom other wise.

Nowadays all browsers do full page zoom instead of just text, so that's an irrelevant concern. I'd recommend using px as it gives you good control.

Answer 3

the best practice for sizing fonts is em. because it is not related to users client resolution. but I use pixels in my own applications. because I want to render smaller fonts in higher resolutions. but percent is not recommended for font size at all.

also you can see this thread for comparison

also this would help : http://kb.mozillazine.org/Em_vs._ex