Should I use em or px?

Question

I'm starting off a new web project and I'm wondering whether to use em or px for the layout and font sizes.

Despite the fact that most browsers now support text and image zooming regardless of whether fonts are defined in px or em, the community support for using em is still strong.

But there are 2 problems I see with using em.

First is the problem with large and wide monitors - often this results in text running miles and miles across the screen, which is very difficult to read as you read down the page.

Secondly, what if your site needed to integrate a Flash component? If you want the Flash component to fit exactly inside a div (e.g the main container of the site) that is defined in em, how would you go about it since Flash components are measured in px?

Is there a compelling reason to use EM over PX, really?

Answer 1

When you use relatively sized instead of fixed fonts, then the major benefit is that a (optically disabled) visitor can zoom in/out the webpage including the fonts. It's all about web accessibility.

Answer 2

First is the problem with large and wide monitors - often this results in text running miles and miles across the screen, which is very difficult to read as you read down the page.

Using em or px, you can still define a width (or max-width) to your layout.

Secondly, what if your site needed to integrate a Flash component? If you want the Flash component to fit exactly inside a div (e.g the main container of the site) that is defined in em, how would you go about it since Flash components are measured in px?

To fit exactly, you can still use 100% width, or maybe I did not understand your point.

---

In theory, using em instead of px will allow your layout to be easily sizable based on user preferences.

But today, modern browsers can resize px layouts as well as em layouts so it might not be as relevant as it was some years ago.

Answer 3

px has the same problem as em that you mention with different monitor sizes. With px there's also more of a tendency to think in terms of pixels as they are sized on your monitor (that is, pixels having a certain dot pitch). Since ems (and %) don't have a fixed size relationship to displays, people don't fall into the same trap. (px, like all image pixels, don't really have a fixed 1:1 relationship to display pixels, but people usually think of them that way.)

When it comes to aligning replaced elements, whether Flash or images, px are indeed more appropriate (though Flash, when using purely vector graphics, will scale nicely to whatever size using whatever units you want). Personally, I use whatever unit is more natural for the type of element that's determining positioning and sizing: px for images & movies, em for text, % for the viewport.