Welcome to WebmasterWorld Guest from 54.198.15.20

Forum Moderators: not2easy

Message Too Old, No Replies

Converting em to pixels

Need help figuring out difference between em and pixles

     
11:58 am on Oct 25, 2005 (gmt 0)

New User

10+ Year Member

joined:May 14, 2005
posts:7
votes: 0


I have a css dropdown menu that currently uses em for part of the mesurments and I would like to figure out what the conversion of 1em is to px. If anyone could help me that would be great.
12:32 pm on Oct 25, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 6, 2004
posts:2239
votes: 0


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 <body> 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

2:18 pm on Oct 25, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 23, 2004
posts:728
votes: 0


Big John from PIE suggests that you set your html, body size to 100.01%, (this somehow makes all browser font sizing appear equal, instead of the slight differences that you sometimes get) then proceed in your styles as necessary with your sizing afterwards. I believe that he suggests the usage of ems. I think a .9 em is equivilent to 9px.

I had a page bookmarked that gives you a comparison on this, if I can find it I will sticky it to you.

6:38 pm on Oct 25, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


if you want to merely change something to make it fit into a fixed pixel design based on what you see then.. Open the menu in your browser and use screen calipers to measure it :)

....
to help clarify difference between em and pixels...

the em is a unit of measure that is based on the users default pixel font size.
~ This default in most but not all modern browsers is set (when shipped) to 16px.

1em = the users default font-size if no other explicit, pixel font-sizes are set via CSS

Users can and do change their preferences, and Macs ship with a 14px default I think?

In CSS by setting the font size on the body to 100%, this is only to overcome an IE bug ~ it can't resize em's properly without this trick. it doesn't change the user default.

>>re: The 100.01%
recommended by some as a setting on the <body> element this is to over both the IE Bug mentioned above and also a bug that some versions of Opera had.. whether or not that still exists I don't know but essentially it won't do any harm as 16px x 100.01% 16.0016px ~ still 16.

To use conversions to approximate ems to pixels has too many variables to be an exact science.
~ divide the ems by the user default px. hmm..

So when we talk about these conversions, we are only approximating it based on the majority consensus of browsers shipping with 16px default and the user not changing this. The magic 62.5% is based on this consensus too.. without the "magic" the sums are just a little harder ;)

Using the consensus 16px default:
If and when you want to make your font size approximately = 13px using ems you would need to
divide 13 by 16 = 0.8125em
or a div width equivalent to 135px the sum is
divide 135 by 16 = 8.4375em

but continually dividing by 16 is a little harder than 10! ;)

The recommended trick as cEM says of setting the body size to 62.5% is only to make the math easier throughout your stylesheet it doesn't actually change the fact that an em is relative to a user setting and that you don't know the default..

So if you do assume a 16px default and use this 62.5% trick to be able to use the "divide by 10" method to do the maths.

You are making the assumption that:
base = 16px and that muliplied by 62.5% = 10
the em sizes then become relative to the new override settings

10px = 1em
13px = 1.3em
135px = 13.5em

However in a Mac with default 14px your assumption produces
base = 14px x 62.5% = 8.75

so:
1em = 1 x 8.75 = 9px
1.3em = 1.3 x 8.75 = 11px
13.5em = 13.5 x 8.75 = 118px

and if a user has their default set to say 18px :
base = 18px x 62.5% = 11.25

so:
1em = 1 x 11.25 = 11px
1.3em = 1.3 x 11.25 = 14-15px
13.5em = 13.5 x 11.25 = 152px

so you see there is no direct correlation it's a relative value, relative to font-size however it's set ~ explicitly or by default ~ no matter how you actually do the sums it will not often convert to an exact pixel value.. especially seeing as browsers round up/down differently too

exception is you set the base/body font-size to an explicit pixel value then use em's throughout (so you know what your sums are), why we don't do that is then IE won't resize the text if puely pixels are used and using em's for fluidity becomes a bit pointless anyway, in which you may as well avoid ems and the sums and just set everything in pixels :)

This is the whole thoery behind providing elastic layouts.. if a user has their font-size set bigger or smaller for whatever reasons then the em sized design will scale according to their preferences not just the designers viewport or being fixed..

In general though if you have no settings for your body font-size (either percentage or pixel}
the em width of an element is calculated on the computed or explicit font-size of that element

e.g.

div {
font-size: 20px;
width: 10em;
background: #eee;
}

will produce an element which is 200px wide 1em being explicitly equal to 20px;

but

div {
width: 10em;
background: #eee;
}

will produce a div that is 10 x the users default

Remember too that font-size is inherited so if you set body font-size: to 16px; then you have declared a font-size: for your element or one of it's ancestors the em width will be based on the element or its nearest ancestor..

e.g.


body {font-size: 16px;}
#menu {font-size: 10px;}
#menu div {width: 10em; background: #eee;}

<body>
<div id="menu">
<div>....</div>
</div>

The internal div will be 100px wide, based on it's nearest ancestor with an explicit font size set.. ~ <div id="menu> in this case

Suzy

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members