Proper sizing of text for cross platform (em, px, % etc)

[Myler]

Im reading about optimal font sizing and layout sizing...and Im looking into em instead of px.

From what I understand, if I make the css like this;

html {
	font-size: 16px;
}

body {
        font-size: 1em;
}

It will force the browser to make 16px=1em, and that will enable me to do width and height properties by desired pixels/16 calculation...correcto?

 

[nickCR]

If you want your design to fit a specific size then you can use pixels. Use em or % if you want the font size to adjust based on the browser defaults.

 

[WildPointer]

Most sites will be smart enough to reset the browser details to make sure the site looks consistent on each browser.

Use em and % when you want your content to be responsive when the user changes the window (viewport) size. The code you have is correct but the font-size will be overriden rather than inherited. Meaning 1em doesn't necessarily mean 16px. 1em is the "line height" of the font you're using which should also be explicitly defined. You may use "1em" to mean normal font size or something like "1.5em" to increase the font size for that css selector.

The advantage to using em/% instead of px is the relativeness of the first two. They update according to the browser/viewport size rather than staying constant. You don't want an iPhone user trying to click small ass links for example.