“px” Is Dead, Long Live “px”

Published on February 23, 2010 (↻ February 5, 2024), filed under Development (RSS feed for all categories).

This and many other posts are also available as a pretty, well-behaved ebook: On Web Development.

It’s over. There is no ban on px anymore.

The only reason why we as web developers had to adjust coding practices were user agents that failed to meet user agent accessibility guidelines. Most notably Internet Explorer 6 which, “dumb as a sack of hammers” (a tribute to Joe), does not allow text to be resized when specified in px. Every modern browser supports text resizing or page zooming.

So it’s over. Internet Explorer 6 is still popular in a few countries, like China and South Korea, but let’s just cut it out.

We can cut it out and use px more freely because of two reasons: Fewer and fewer people use IE 6. And there simply are no data—that is, please correct and show me if you know any—indicating how many IE 6 users actually use, better: rely on, text resizing. Holding this lack of data for px, not against, maybe “it” was never really on.

Yet as always, let’s be smart. For instance, when our target audience is known to have special needs. When we’re working with certain devices on which real estate is made use of more effectively with em or %. Or when we simply prefer other units to work with.

I planned this post back in 2007 when I decided to include one tiny note in the second edition of Webdesign mit CSS. I wanted this post to sound fancy and bold. Perhaps.

About Me

Jens Oliver Meiert, on November 9, 2024.

I’m Jens (long: Jens Oliver Meiert), and I’m a frontend engineering leader and tech author/publisher. I’ve worked as a technical lead for companies like Google and as an engineering manager for companies like Miro, I’m a contributor to several web standards, and I write and review books for O’Reilly and Frontend Dogma.

I love trying things, not only in web development (and engineering management), but also in other areas like philosophy. Here on meiert.com I share some of my experiences and views. (Please be critical, interpret charitably, and give feedback.)

Comments (Closed)

On February 23, 2010, 8:54 CET, Fabian said:
Actually this is what I’m preaching all the time. 😉 Seriously, if someone wants and NEEDS to resize text, he’ll most likely get tools that fit those needs most - and I’m pretty sure IE6 is not.
On February 23, 2010, 12:35 CET, Martin said:
Preaching since 2003: 100% or px
Whoever used the IE didnt knew how to resize und this 86%-crap ruined the great opportunity to let users choose their favourite font-size. Now everybody forgot the 100%-sweetness and preach to use 16px.
On February 23, 2010, 13:10 CET, Nicolas Chevallier said:
I don’t make any specific adjustments for IE6 since two years. I wasted too much time.
On February 23, 2010, 14:14 CET, John Faulds said:
Every modern browser supports text resizing or page zooming.

IE7 & 8 do support page zooming, but if a page uses px for font-size and you try to resize text using the View / Text size menu (like you might quite likely do if you were used to that method having upgraded from IE6), then you’re still faced with the same problem of the text not resizing. You can’t assume that users of newer versions of IE will know how to (or want to) use the page zooming feature.
On February 23, 2010, 14:32 CET, Sebastian Werner said:
The only complain I have on this is that a pixel unit basically tells the wrong about the actual size e.g. on high-res mobiles (>200ppi) it is not really a pixel, but most often a larger multitude of the given value.

Pixel sizes are OK, as they are pretty straightforward regarding developer usability. But I would better like some kind of unit-less sizes as this do not tell the user that this is actually a pixel on the device.
On February 23, 2010, 16:21 CET, Chris F.A. Johnson said:
There’s no good reason to use px.

Whether the problems exist or not, there is nothing that px does that cannot be done better with % or em.
On February 23, 2010, 16:24 CET, Brent said:
Mixing units of measurement is risky, especially if what you’re working with is complex or may have different people working on it. A painful example is NASA’s loss of a $300 million dollar Mars Orbiter in 1999 because of a metric/imperial unit of measurement mix-up. I realize a web page isn’t that complex or expensive but using a single unit of measurement when creating a page is going to lead to more consistent results. Screens and images are measured in pixels, so the pixel is the logical standard unit of measurement for all the elements of a web page including the text.

For devices using high-resolution screens I think it’s the responsibility of the device or the device’s software to render the information in a way that’s works for its users. If the device does a poor job of this and your site is targeted to people using these devices then you may want make a separate version of your content or its mark-up for them.

Realistically what you do depends mostly on the capabilities or preferences of your sites’ target audience. Fortunately, fewer of them are using IE6 so coding using percents or ems just for it is becoming less of an issue.
On February 23, 2010, 21:48 CET, Dale said:
I think you are over simplifying it here. Until vector graphics become main-stream, and even then, you will need to use px. This is especially true when you use image-text-replacement with CSS.

That said if accessibility is your concern I would stay the problems start in the classroom. I went and did mentoring a weeks ago to some highschool students who were all taught to use frames and center/font tags.

I think the mission has to be small steps of getting people to separate content from presentation first.
On February 24, 2010, 2:51 CET, Michael Kozakewich said:
It’s the same tired, old argument.

Frankly, designers already have been designing in px—namely, with fixed px widths.
When you combine that with set px font sizes, it makes it impossible for a large amount of people to use.
They can’t set their text size bigger, because the page ignores that. They can’t really zoom the page in, because then the design stretches over a thousand pixels and they get a horizontal scroll-bar.

Use fixed width or fixed font-sizes, but not both.
On February 24, 2010, 2:55 CET, John Hancock said:
For instance, when your target audience is known to have special needs.

I’d always expect to design something in %ages with a font reset, because it’s still more consistent in cross-browser rendering (and there are a lot of browsers out there), and we never second guess whether our audiences have special needs. We assume that some of our audience may have a visual deficiency of some kind, as approx 1 in 10 people do. Which is a big chunk of any audience.

Certainly the web is moving away from pixel specific sizes - I spend as much time on 1920×1200 as I do on 1080+2560+1080w, 1600-1650h) or 800×480 mobile devices.

I think there may have been a second there in history when pixels were the right units to use. But we blinked and missed it.
On February 24, 2010, 3:44 CET, Jason Fowler said:
I left IE6 in the dust a long time ago - I code my sites for Firefox and Chrome/Safari, and fix them to work in IE7/8 - and if I care enough, throw messages for IE6 that request the viewer updates to a modern browser
On February 24, 2010, 7:13 CET, David Oliver said:
I stay away from pixels for reasons other than IE.

As display devices will be using dot pitches far, far lower (more dots making up the same area) than at present at some point (hopefully not too far away), a “pixel” will be extremely small and will not have the relevance that it does today. A browser receiving an em measurement should be able to take into account the user’s display dot pitch and size accordingly without having to fudge what a “pixel” means.
On February 24, 2010, 16:32 CET, Andrea said:
px are a very bad idea for anything that does not have an intrinsic pixel width or height (like PNG or JPEG images and there intrinsic dimensions are discovered by the browser itself).

That is because you never (never never never) have control about a users device. But control about the rendering would depend on control about the device.

If my screen has a very high resolution, only I - the user - can tell my broser a default size of say 20px to fix that. But if you use px in your design you will break that. Use em!

You also can’t use px to adjust text to images. You never know if a font you specify is used, but even if, how it will be rendered (aliasing and other stuff that contributes to the width of a text is out of control).

There is no single advantage of using px other than convenience for those designers who aren’t able to use the magic of em and max-width.
```
<style>
p {
    font: 1em/1.5 sans-serif;
    width: 30em;
    max-width: 100%;
}
</style>
<p>A modern browser will render this wonderfull at every zoom factor or kind of zooming ...
```
On February 26, 2010, 19:42 CET, Brent said:
I don’t think designers use pixels simply because it is convenient. I will do what ever it takes to code my pages in a way that makes my clients happy (as long as they pay me for my time.) It’s just that I’ve never really “seen” why using pixels are a problem except for the IE 6 issue.

I’ll spend a bit more time experimenting and researching this. If anyone knows of a site that has screen shots or photographs to demonstrate the issue and show how using percents or ems solves it (without creating new problems) I’d appreciate you passing along the link.
On February 26, 2010, 23:33 CET, Tim said:
Are people who are advocating using em’s here simply referring to text, or when building a fixed width site?

I tend to use pixels for my layout, but em’s for my fonts. It’s really not that difficult to use em’s, regardless of whether it’s necessary or not now. This is how I learned back before page zooming, so it’s second nature now.
On March 3, 2010, 12:17 CET, Niels Matthijs said:
Nice article, though it took me a little longer than necessary to realize it was about font-sizing, rather than full design.

I’ve written a little addendum to this article, focusing more on the little difference there actually is between “em” and “px” designs.

We need more than the death of IE6 to stop constructing our designs in ems 😊

the (in)difference of em and px designs
On March 5, 2010, 0:17 CET, Jens Oliver Meiert said:
Everyone, thanks for a great discussion. I’m terrible with replying, even on my own site.
On April 28, 2010, 2:04 CEST, Henk Toners said:
Finally those problems with resizing in different browsers is partially solved. Why can’t there be just one internet browser. Life would be much easier for web designers.

Thanks for the info.
On May 5, 2010, 0:56 CEST, Henk said:
Yesterday, I’ve read on an other blog that Microsoft has officially phased out support for IE6. Is this correct?
On May 13, 2010, 16:41 CEST, Justin said:
I rely heavily on text resizing during browsing, I dropped IE6 as soon as I could and never remembered that it wasn’t possible on it.

Though I am fully aware of how crap IE6, I have stopped building my sites so they do not conflict with it’s capabilities as it hinders development. I have now placed notices urging IE6 users to upgrade.
On June 29, 2010, 17:00 CEST, Dan Gayle said:
CSS media queries fill me with all sorts of warm fuzzies inside, because we can use px for large, detailed pages and fall back to ems or % for devices smaller than X pixels wide.
On September 15, 2010, 18:44 CEST, Oskar said:
Wow, this post has generated a fantastic discussion in the comments section; just stumbled across it.

We still tend to build to accomodate IE6 (albeit with a splash of graceful degradation) so also tend to use em’s for text. Most designs are fixed with though, so px for that. Although the odd CSS button etc. might have a px font size applied to stop it being broken by a text-resize.

Enjoyed Niels response post too.
On October 11, 2010, 13:51 CEST, Anthony Cartmell said:
Pixels would be great as a font measurement size, except who knows how big a pixel is on the target device?

Still makes much more sense to use points, which are a defined size (independent of screen pixels-per-inch), or a relative size (relative to the browser default, and hence relative to other websites and the user’s default settings).
On June 13, 2011, 21:04 CEST, Sascha Mühlen said:
I prefer more using px than expanding % oder EM for my css, sometimes i use auto width. But for IE 8,9(new Versions) there all still some milestones left. Microsoft changed some interpretation of css with height and expanding layouts.
On July 20, 2011, 4:16 CEST, Martin Varesio said:
They can’t really zoom the page in, because then the design stretches over a thousand pixels and they get a horizontal scroll