what is the difference between ‘px’ and ’em’ in web html/css?

Recently I have a meeting with my customer to slice html for a mobile version of his website. He require all of thing from font-size, width, height … in his website must be used ’em’ instead of ‘px’. I am wondering why he require that because I always think they are not different from ‘px’ or ’em’, we just need to make it display well. I try to research on Google to figure out the answer for this and finally I got the answer.

em-and-px-in-htm-css

 

First of all, we can understand the problem easy like this

1 em = take font size from your Document font-size. It is relative in nature.

100% = take size also from document font size.

General

12pt=1em=100%=16px

In Best Practise Use % because it is relative to your width, it will automatic adjust device to device.

But still, px and em, which one need to use?

px

If you need fine-grained control, sizing fonts in pixel values (px) is an excellent choice (it’s my favorite). On a computer screen, it doesn’t get any more accurate than a single pixel. With sizing fonts in pixels, you are literally telling browsers to render the letters exactly that number of pixels in height:

pixelstall

Windows, Mac, aliased, anti-aliased, cross-browsers, doesn’t matter, a font set at 14px will be 14px tall. But that isn’t to say there won’t still be some variation. In a quick test below, the results were slightly more consistent than with keywords but not identical:

pixelvariation

 

Due to the nature of pixel values, they do not cascade. If a parent element has an 18px pixel size and the child is 16px, the child will be 16px. However, font-sizing settings can be using in combination. For example, if the parent was set to 16px and the child was set to larger, the child would indeed come out larger than the parent. A quick test showed me this:

combinepxandkeyword

“Larger” bumped the 16px of the parent into 20px, a 25% increase.

Pixels have gotten a bad wrap in the past for accessibility and usability concerns. In IE 6 and below, font-sizes set in pixels cannot be resized by the user. That means that us hip young healthy designers can set type in 12px and read it on the screen just fine, but when folks a little longer in the tooth go to bump up the size so they can read it, they are unable to. This is really IE 6’s fault, not ours, but we gots what we gots and we have to deal with it.

Setting font-size in pixels is the most accurate (and I find the most satisfying) method, but do take into consideration the number of visitors still using IE 6 on your site and their accessibility needs. We are right on the bleeding edge of not needing to care about this anymore.

em

Em values are probably the most difficult values to wrap the ol’ noodle around, probably because the very concept of them is abstract and arbitrary. Here’s the scoop: 1em is equal to the current font-size of the element in question. If you haven’t set font size anywhere on the page, then it would be the browser default, which is probably 16px. So by default 1em = 16px. If you were to go and set a font-size of 20px on your body, then 1em = 20px.

emboxes

Historically I think the “em” value is based on the width of the uppercase M, but don’t quote me on that.

Things start to get slightly more complicated with em’s when we start setting up more complex font sizing. Say we need a header with a larger font-size, so we set h1 { font-size: 2em; } That “2” is essentially a multiplier of the current em value. So if the current em size is 16px, that header tag is going to turn out to be 32px. That math works out cleanly, but you can imagine that it often doesn’t and rounding needs to take place.

The most popular method in working with em values is to set the font-size on the body to 62.5%. Because the default browser font-size is 16px, this makes it 10px (without hard-setting it to 10px, which wouldn’t cascade). Using 10 as a multiplier is much easier than using 16. This way, you need a font size of 18px? Use font-size: 1.8em.

So why both with all this em business when it’s just an abstraction of using pixel values anyway? Three possible reasons:

The ARE resizeable in IE 6
The relationship to other sizes (elastic width sites)
Em’s cascade like a mo-fo
The first one is the big one. If you basically want to use pixels but don’t like the accessibility problems, em’s may be the ticket for you.

Em’s aren’t just for fonts, it’s a unit of measure that you can use for any other length (height, width, etc). Elastic width sites use em values for everything, which essentially makes the site “zoomable”, meaning that when you bump the font-size up everything bumps up all the way down to the width of the site. Em’s have a direct relationship to each other in this way. If you have a box that is 10em in height, and a font inside that is 1em in size, it will take up exactly 1/10 the height of that box. That exact proportional relationship makes em values a powerful web design technique.

There is one potential concern with em’s, with regards to #3. They do indeed cascade. Every em value is relative to its parents value. If you are using em’s as a straight substitution for pixel values, this can cause problems. For example, you might set both your “p” (paragraph) and “li” (list item) font-sizes to be 1.2em. Looks great for you today, but tomorrow some content is published to the site that has a paragraph inside a list item. Those two values will cascade (1.2 x 1.2) and that list item will be bigger in font-size than any of the others. No way around that, other than removing the tag.

EM, PX, PT, CM, IN…

CSS offers a number of different units for expressing length. Some have their history in typography, such as point (pt) and pica (pc), others are known from everyday use, such as centimeter (cm) and inch (in). And there is also a “magic” unit that was invented specifically for CSS: the px. Does that mean different properties need different units?

No, the units have nothing to do with the properties, but everything with the output media: screen or paper.

There is no restriction on which units can be used where. If a property accepts a value in px (‘margin: 5px’) it also accepts a value in inches or centimeters (‘margin: 1.2in; margin: 0.5cm’) and vice-versa.

But in general you would use a different set of units for display on screen than for printing on paper. The following table gives the recommended use:

em-px

The summary:

In web html/css, you can use any type of units you like, so px or em is just the same. I do it without any problem until now, I always stick with px, now your turn.

References:

4 comments

  1. Very detail explaination about px and em. Just like what you say, I decide to use px and nothing need to change to any other unit :). World look easier

  2. That ‘s great article, you save my day to help my customer understand it. Thanks for your link.

Leave a Reply

Your email address will not be published. Required fields are marked *

*