font sizes in multiple browsers

[garrensilverwing]

I have some trouble with font sizes in different browsers. It is not a big deal, for the most part, but if I use one font for a large body of text then the slight difference in the sizes between firefox, explorer and safari cause a considerable difference in how much space the text actually uses, leaving some empty white space. Usually firefox has the largest font, then safari followed by the internet explorers. I hope that wasnt too confusing. I think it might have something to do with the fact that I use descriptions to size the font instead of pixel measurements but I am not sure, I am new to web design

Here is my text css:

/* text */
.title {
font-size: x-large;
color: #0C0D1A;
font-weight:bold;
}
.date {
color: #354E6D;
font-size: small;
}
.txtbody {
color: #0C0D1A;
font-weight: bold;
font-size: medium;
text-align: justify;
}
.txtcenter {
text-align: center;
}
.LinkTitles {
font-weight: bold;
color: #0C0D1A;
}
/* end text */

 

[sarvar]

You answered your own question. :]

Use pixels for fonts, if you don't know which pixel size to use, test them all out, starting from 12px.

 

[garrensilverwing]

sometimes you just have to ask stupid questions that you already know the answer to

 

[farscapeone]

Don't use pixels. It's better to use % or em units instead. It's always better to have relative size instead of fixed.

 

[garrensilverwing]

Don't use pixels. It's better to use % or em units instead. It's always better to have relative size instead of fixed.

any good online tutorials you can suggest?

 

[farscapeone]

You don't need a tutorial for that. Just instead of font-size: x-large; use font-size: 1.2em; or instead of font-size: small; use font-size: 0.8em;

Remember to define font-size: 1em; in your body css so that everything else could be relative to it.

To understand it better think about 1em as 100%. Note that values are relative to their parents.

Feel free to experiment on these values.