There is no clear cut relationship between ems and pxs, because em sizes are based relative to the size of the font, whereas px sizes are based relative to the screen resolution. Since those two elements are disparate, no exact correlation can be made.

There are ways, however, to get fairly close. One method is to set the base font size (the font-size property on the element) to around 62.8%. This makes the base font, or 1.0em, approximately equal to 10px. It’s not exact, and changes from font to font, but generally speaking it’s pretty accurate. With that font setting in the body, you can use ems as px equivalents like so…

1.0em = 10px
1.1em = 11px
1.2em = 12px
2.0em = 20px
5.0em = 50px
etc.

There are a few caveats, however, the major one being that it isn’t a precise conversion so elements that must be EXACTLY Xpx are unlikely to be so. The other big danger is that setting the base font this small makes IE text resizing somewhat problematic, as this 62.8% size becomes the “meduim” setting for IE. Since IE only allows two font-size increases (“large” and “larger”), those who need larger fonts may not get a big enough size to suit their needs. Likewise, sizing down to “small” or “smaller” makes text virtually unreadable.

But otherwise, it’s a very practical technique.

cem

{ 0 comments }