Consistent text size for all browsers

Question

Can someone please point me to css help in understanding how to size text so it looks (relatively) the same in different browsers?

Answer 1

Hi
Browsers use different defaults for the font size, typically 14px and 16px. So in order to get a default size across all browsers, you have to set this for the body of the document.
You could use px, rem or % values for all your settings, all have there advantages and disadvantages.
Pixel values are a relative value on computers and similar devices and not an absolute value as many people think, so there use will vary depending upon things like, resolution and pixel-aspect-ratio.
% values are as good as ems but are more difficult to calculate.
rem values take the default pixel size of the browser and all values are then calculated according to this value. As the default value can be anything, you do not actually know what the user is going to see. As an example if the user has set their default value in the browser options to 20px then the relative value of 1rem is 20px, if however they have set this to 12 px then the value of 1rem is 12px, so the use of rem gives an unknown font size.
rem does have one distinct advantage over other forms of values in that it does not cascade and all values are worked out from the browsers default value, which is a fantastic usability feature as the user then decides on the size of any text, unfortunately it does also mean that the designer has no control over what this is.
em also has its disadvantages in that the value cascades, as an example suppose you have the value set in the body of 16px and the p tag at 1em, if you then set the default value for a div at say 2em, and the value for a p tag within the div at 0.75em the value for the p tag inside the div will be 24px not 12px, as it inherits the value of the parent as its base value
PZ