I heard you should define sizes and distances in your stylesheet with em instead of in pixels. So the question is why should I use em instead of px when defining styles in css? Is there a good example that illustrates this?

15 Answers
15

It is wrong to say that one is a better choice than the other (or both wouldn't have been given their own purpose in the spec). It may even be worth noting that StackOverflow makes extensive use of px units. It is not the poor choice Spoike was told it was.

Definition of units

px is an absolute unit of measurement (like in, pt, or cm) that also happens to be 1/96 of an in unit (more on why later). Because it is an absolute measurement, it may be used any time you want to define something to be a particular size, rather than being proportional to something else like the size of the browser window or the font size.

Like all the other absolute units, px units don't scale according to the width of the browser window. Thus, if your entire page design uses absolute units such as px rather than %, it won't adapt to the width of the browser. This is not inherently good or bad, just a choice that the designer needs to make between adhering to an exact size and being inflexible versus stretching but in the process not adhering to an exact size. It would be typical for a site to have a mix of fixed-size and flexible-sized objects.

Fixed size elements often need to be incorporated into the page - such as advertising banners, logos or icons. This ensures you almost always need at least some px-based measurements in a design. Images, for example, will (by default) be scaled such that each pixel is 1*px* in size, so if you are designing around an image you'll need px units. It is also very useful for precise font sizing, and for border widths, where due to rounding it makes most sense to use px units for the majority of screens.

All absolute measurements are rigidly related to each other; that is, 1in is always *96px*, just as 1in is always *72pt*. (Note that 1in is almost never actually a physical inch when talking about screen-based media). All absolute measurements assume a nominal screen resolution of 96ppi and a nominal viewing distance of a desktop monitor, and on such a screen one px will be equal to one physical pixel on the screen and one in will be equal to 96 physical pixels. On screens that differ significantly in either pixel density or viewing distance, or if the user has zoomed the page using the browser's zoom function, px will no longer necessarily relate to physical pixels.

em is not an absolute unit - it is a unit that is relative to the currently chosen font size. Unless you have overridden font style by setting your font size with an absolute unit (such as px or pt), this will be affected by the choice of fonts in the user's browser or OS if they have made one, so it does not make sense to use em as a general unit of length except where you specifically want it to scale as the font size scales.

Use em when you specifically want the size of something to depend on the current font size.

% is also a relative unit, in this case relative to either the height or width of a parent element. They are a good alternative to px units for things like the total width of a design, if your design does not rely on specific pixel sizes to set its size.

Using % units in your design allows your design to adapt to the width of the screen/device, whereas using an absolute unit such as px does not.

There is no way to convert between ems and pixels, unless you know what the size of an 'em' is in pixels, in that context. That can depend on the inherited font size of that element, which can in turn depend on the font size of the document as a whole, which can depend on the font size settings in the user's browser and/or operating system. If you are aiming for a particular pixel size, then specify it in pixels. Ie, if you want 990px, then put 990px. If pixels is what you want, why not use them?
–
thomasrutterJul 29 '09 at 6:09

5

Huh? I didn't say anything contradicting that. I was saying what px units are used for and what em units are used for. You seem to imply that using px units is generally bad. If a site breaks when you adjust the browser's default font size, the fault is not px units, it's bad assumptions. Clearly the web designer has relied on the default font size (often a good idea), and yet created the rest of their layout based on false assumptions about this font size, such as trying to align fixed-size graphical elements with text, where the element size only matches the text at one font size.
–
thomasrutterJul 30 '11 at 13:52

1

It's not wrong, nor oversimplified. Obviously, if you use em in a line where you actually declare the font-size, then it's impossible for em in that line to be relative to that same element's font-size after any font-size declarations on that element, because it won't know that yet - so instead it has to be relative to the font-size the element would have had before the font-size property on that same element is declared. Since any other behaviour is literally impossible, I don't see any ambiguity there.
–
thomasrutterApr 24 '13 at 18:31

1

The OP answered his own question a while later. It seems he had a very specific scenario in mind (which he didn't include in the question).
–
thomasrutterMay 8 '13 at 1:14

1

@thomasrutter , WOW ! I just googled for this and yes, I have to say I was wrong. All these years and I had no idea. I used to think that 1 pixel = 1 "dot on the screen". I guess I learned something new today.
–
Talha SayedNov 14 '14 at 19:13

@Juan: That's because they use the simplest zoom method: scaling the entire page. But it means at 150% zoom, a 1000px wide page becomes 1500px wide. It's the easiest way to zoom for web & browser developers. Unfortunately, it's not very user-friendly. Which is why other browsers have text-zooming that magnifies the content only without changing the layout. But that means web developers need to basically design their layouts for a wide variety of font sizes, greatly limiting what you can do design-wise. It's quite difficult to make a site look good in 16pt font as well as 48pt font.
–
Lèse majestéAug 3 '12 at 16:16

1

@fredsbend: True, you can't satisfy everyone all the time, but in terms of what "zoom" should be, you need to consider what it's actually there for. Zoom is an accessibility feature. I would say that most visually impaired users just want to increase the text size, not necessarily the entire layout. If you want to discard with text zooming support, I would suggest making sure that visually impaired users don't need it as much. They may still need to use zoom, but perhaps they only need to zoom to 125% instead of 200%, and can thus avoid horizontal scrolling.
–
Lèse majestéJan 31 '13 at 21:04

The reason I asked this question was because I forgot how to use em's as it was a while I was hacking happily in CSS. People didn't notice that I kept the question general as I wasn't talking about sizing fonts per se. I was more interested how to define styles on any given block element on the page.

As Henrik Paul and others pointed out em is proportional to the font-size used in the element. It's a common practice to define sizes on block elements in px however sizing up fonts in browsers usually breaks this design. Resizing fonts is commonly done with the shortcut keys Ctrl++ or Ctrl+-. So a good practice is to use em's instead.

Using px to define width

Here is an illustrating example. Say we have a div-tag that we want to turn into a stylish date box, we may have html-code that looks like this:

The problem

However if we want to size the text up in our browser the design will break. The text will also bleed outside the box which is almost the same what happens with SO's design as flodin points out. This is because the box will remain the same size in width as it is locked to 50px.

That way you have a fluid design on the date-box, i.e. the box will size up together with the text in proportion to the font-size defined for the date-box. In this example the font-size is defined in * as 10pt and will size up 2.5 times to that font size. So when you're sizing the fonts in the browser, the box will have 2.5 times the size of that font-size.

The top voted answer here from thomasrutter is right in his response about the em. But is very very wrong about the size of a pixel. So even though it is old, I cannot let it be undebated.

A computer screen is normally NOT 96dpi! (Or ppi, if you want to be pedantic.)

A pixel does NOT have a fixed physical size.
(Yes, it is fixed within one screen only, but in the next screen a pixel is most likely bigger, or smaller, and certainly NOT 1/96 of an inch.)

Proof
Draw a line, 960 pixels long. Measure it with a physical ruler. Is it 10 inches? No..?
Connect your laptop to your TV. Is the line 10 inches now? Still not?
Show the line on your iPhone. Still same size? Why not?

Who the heck invented the 96dpi computer screen myth?
(Some religions operate with a 72dpi myth. But equally wrong.)

> To get an idea of the appearance of a px, imagine a CRT computer monitor from the 1990s: the smallest dot it can display measures about 1/100th of an inch (0.25mm) or a little more. The px unit got its name from those screen pixels. -- Quote from W3C: w3.org/Style/Examples/007/units.en.html#units
–
Jev ZelenkovAug 14 '14 at 11:02

All absolute measurements are rigidly related to each other; that is, 1in is always *96px*, just as 1in is always *72pt*. (Note that 1in is almost never actually a physical inch when talking about screen-based media) I do not think the top voted answer is talking about physical inch. The relations are among the different absolute sizing schemes like in and pt. For Eg. Just extending your 'proof' if I draw a line of 1_in_ will it measure 1 inch physically?
–
Saumitra R. BhaveJan 26 at 16:19

Nowadays, all modern browsers implement zooming by scaling all absolute units equally, rather than scaling just font sizes. Note that this answer was written in 2009 when this was less the case than it is now.
–
thomasrutterJan 24 '13 at 0:10

Because the em (http://en.wikipedia.org/wiki/Em_(typography)) is directly proportional to the font size currently in use. If the font size is, say, 16 points, one em is 16 points. If your font size is 16 pixels (note: not the same as points), one em is 16 pixels.

This leads to two (related) things:

it's easy to keep proportions, if you choose to edit your font sizes in your CSS later on.

Many browsers support custom font sizes, overriding your CSS. If you design everything in pixels, your layout might break in these cases. But, if you use ems, these overridings should mitigate these problems.

A very practical reason is that IE 6 doesn't let you resize the font if it's specified using px, whereas it does if you use a relative unit such as em or percentages. Not allowing the user to resize the font is very bad for accessibility. Although it's in decline, there are still a lot of IE 6 users out there.

use px for precise placement of graphical elements. use em for measurements having to do positioning and spacing around text elements like line-height etc. px is pixel accurate, em can change dynamically with the font in use

The main reason for using em or percentages is to allow the user to change the text size without breaking the design. If you design with fonts specified in px, they do not change size (in IE 6 and others) if the user chooses text size - larger. This is very bad for users with visual handicaps.

The general consensus is to use percentages for font sizing, because it's more consistent across browsers/platforms.

It's funny though, I always used to use pt for font sizing and I assumed all sites used that. You don't normally use px sizes in other apps (eg Word). I guess it's because they're for printing - but the size is the same in a web browser as in Word...