If 1 pt = 0.75 pixels, then there is no meaningful distinction between the measurements. It's a scale factor. It's like advocating for mm over cm. I don't quite understand the point of the article.
If he's worried about terminology, then redefine the word pixel as being 4/3 of a pt. Problem solved.
Also, either his last sentence is a mistake, or I must have misunderstood the entire article.
For those too lazy to click through to the article, the author says that neither pt nor px are relative units, and then drops a bewildering bomb: "I’m saying is when you need an absolute measure you’ll want to define it in pixels." I'm assuming the last sentence must be a typo, because his entire piece (poorly) advocates using pt rather than px.
As someone who is a programmer, not a designer my reaction to reading this is:
"What is this I don't even...."
I figured he was going to be advocating moving to a relative system where the rendering engine was made aware of the dpi of the display and vector graphics (or differently sized bitmaps as in the Android ldpi/mdpi/hdpi model) were used where possible, because we very clearly have to start embracing that model as the dpi and size of devices is beginning to be wildly divergent in all directions... but what he's actually suggesting is basically meaningless, IMO.
If you're referring to that last line, yeah I totally fat fingered that. I fixed it.
I'm advocating moving to an absolute system. As in an absolute width, measured here, measured there, measured anywhere. This can then be scaled to mimic the appropriate absolute width based on viewing distance and other parameters such as screen real estate.
I know what you're thinking. "But pixels are an absolute measure...". Actually yes, and actually yes. Pixels are an absolute measure in the sense that they state that I want something to be the absolute size of a single pixel but the pixel is arbitrary and now your absolute measure is relative to the actual size of the pixel. As mighty as this sounds, it actually turns out to be not all that useful in design; as screen resolutions vary so will your renderings. This is why CSS pixels are different, they're for all intents an purposes interpreted as 1/96th of an inch. So, great they're absolutely 1/96th of an inch, they're absolute! So why should you stop using them? This paragraph is why you should stop using them. I didn't like writing this paragraph, and I'm gonna guess you didn't like reading it. Pixels are confusing and pixels are * liars. Use points.
OP here. Sure, you can redefine pixel, that's what was done. Why do you need this measure though? 1/96th is so close to points, you might as well just use points and now you're on a universal system.
Pixels use to mean something (a pixel). Now they're used as an absolute unit of measure so that websites (nearly all of them) based on this assumption don't break. Do we really need this unit? Isn't it confusing (1/96th does not a pixel make)? If we stop using it incorrectly maybe it could mean pixel again. Wouldn't that be neat?
I'm pretty sure that this is wrong. A css pixel is a screen pixel as long as the screen dpi is reasonably close to 96dpi. Certainly 1px borders on my MBA are always 1px, not a blurry px and a half.
The correspondence between pixels and screen pixels break down when the dpi is nuts, which is why 1 px (css) = 2px (screen) on the retina screen of the iPhone 4.
You are correct. This article is misleading on many levels.
A CSS pixel is ALWAYS the exact same thing as a screen pixel, unless:
1. The browser's view has been "zoomed". This can occur on desktop browsers or mobile browsers, although it's much more common on mobile browsers.
2. You are on a quad-pixel display like an iPhone 4. In this case, 1 CSS pixel = 4 real pixels, exactly.
Options 1 and 2 rarely breaks anything due to a use of "px". Those situations that are problematic usually are due to a design flaw in your CSS (and will not be fixed by switching to "pt").
Option 2 will never break your CSS. The only time it matters is if you want to serve double-resolution images [1]. Other than that, you have no access to the super-grid, so don't worry.
"A CSS pixel is ALWAYS the exact same thing as a screen pixel"
Not true. You should reread the article, if you care to, and perhaps check the sources. Even if what you were saying was true do you think it makes sense to define things at the native resolution of a monitor? :Faceplam:
perhaps if he'd offered to go with em's and to just roll with keeping the design of a page relative to the font size I could understand.
But the easiest way to understand why everyone still uses px, is because when you've got a design created beforehand it'd take an awful lot of work to make it exact using relative sizes.
Also, graphics are inherently bound to a fixed pixel size... so layouts often have to follow, if you don't want things getting out of whack at other pixel densities.
You would think so, but that's not true. Design in points (1/72) and ship in points. I'm telling you, you're stuff is rendering at 1/96th, not native res. Try it out for yourself. Make two divs, specify one as 96px and the other as 72pt. See, same size, same size. Now think, if that were an image... Not native res, but yet it still looks right... Interesting.
The idea is that someday browsers will be resolution-independent. They’ll have to let go of 96ppi and probably pixels altogether. Making this change is preparing for a future that may or may not come to be. (The Retina Display hints at this.)
The point is valid if not immediately useful. Practically speaking, if you can start and stay with pt measurements, you might as well.
(Regarding how we might bring in a resolution-independent future browser, it would have to be some sort of meta tag or doctype, or maybe CSS fallbacks as we do with font faces.)
20 comments
[ 2.9 ms ] story [ 51.0 ms ] threadIf he's worried about terminology, then redefine the word pixel as being 4/3 of a pt. Problem solved.
Also, either his last sentence is a mistake, or I must have misunderstood the entire article.
As someone who is a programmer, not a designer my reaction to reading this is:
"What is this I don't even...."
I figured he was going to be advocating moving to a relative system where the rendering engine was made aware of the dpi of the display and vector graphics (or differently sized bitmaps as in the Android ldpi/mdpi/hdpi model) were used where possible, because we very clearly have to start embracing that model as the dpi and size of devices is beginning to be wildly divergent in all directions... but what he's actually suggesting is basically meaningless, IMO.
I'm advocating moving to an absolute system. As in an absolute width, measured here, measured there, measured anywhere. This can then be scaled to mimic the appropriate absolute width based on viewing distance and other parameters such as screen real estate.
I know what you're thinking. "But pixels are an absolute measure...". Actually yes, and actually yes. Pixels are an absolute measure in the sense that they state that I want something to be the absolute size of a single pixel but the pixel is arbitrary and now your absolute measure is relative to the actual size of the pixel. As mighty as this sounds, it actually turns out to be not all that useful in design; as screen resolutions vary so will your renderings. This is why CSS pixels are different, they're for all intents an purposes interpreted as 1/96th of an inch. So, great they're absolutely 1/96th of an inch, they're absolute! So why should you stop using them? This paragraph is why you should stop using them. I didn't like writing this paragraph, and I'm gonna guess you didn't like reading it. Pixels are confusing and pixels are * liars. Use points.
Pixels use to mean something (a pixel). Now they're used as an absolute unit of measure so that websites (nearly all of them) based on this assumption don't break. Do we really need this unit? Isn't it confusing (1/96th does not a pixel make)? If we stop using it incorrectly maybe it could mean pixel again. Wouldn't that be neat?
The correspondence between pixels and screen pixels break down when the dpi is nuts, which is why 1 px (css) = 2px (screen) on the retina screen of the iPhone 4.
You can't avoid pixels in CSS. Yet.
A CSS pixel is ALWAYS the exact same thing as a screen pixel, unless:
1. The browser's view has been "zoomed". This can occur on desktop browsers or mobile browsers, although it's much more common on mobile browsers.
2. You are on a quad-pixel display like an iPhone 4. In this case, 1 CSS pixel = 4 real pixels, exactly.
Options 1 and 2 rarely breaks anything due to a use of "px". Those situations that are problematic usually are due to a design flaw in your CSS (and will not be fixed by switching to "pt").
Option 2 will never break your CSS. The only time it matters is if you want to serve double-resolution images [1]. Other than that, you have no access to the super-grid, so don't worry.
[1] http://www.sitepoint.com/razor-sharp-images-in-mobile-safari...
Not true. You should reread the article, if you care to, and perhaps check the sources. Even if what you were saying was true do you think it makes sense to define things at the native resolution of a monitor? :Faceplam:
But the easiest way to understand why everyone still uses px, is because when you've got a design created beforehand it'd take an awful lot of work to make it exact using relative sizes.
Also, graphics are inherently bound to a fixed pixel size... so layouts often have to follow, if you don't want things getting out of whack at other pixel densities.
The point is valid if not immediately useful. Practically speaking, if you can start and stay with pt measurements, you might as well.
(Regarding how we might bring in a resolution-independent future browser, it would have to be some sort of meta tag or doctype, or maybe CSS fallbacks as we do with font faces.)