The Blog
The Friendly Point
Do you use points or do you use pixels? I’ve fallen in love with points. If you know me, you might already know this because I talk about them all the time. So what is it that I like about points, or perhaps, what is it that I dislike about pixels?
First off, did you know that a pixel isn’t actually a pixel? As it turns out, what we refer to as a pixel nowadays, is more accurately defined as a device independent pixel, also known as a kludge. Consider this, you’re a developer, 10 years back, listening to bootylicious while styling with your bowl haircut. You’re probably specifying things in pixels with the assumption that monitors will never have more than the cutting edge 96ppi. Now fast-forward to present day with our 400 some odd pixel iPhone displays and consider how compressed that same page looks. Displays may be increasing in resolution, but our eyes aren’t. Additionally, we can’t let our pixel-based designs shrink as resolution increases, so we what do we do? We redefine the pixel to the critical measure of 1/96 of an inch.
Interestingly enough, this measure does have magical properties of it’s own. However, it’s a system that seems to be rooted in happenstance, so I feel a little dirty about using it without considering anything more. The point system, on the other hand, not only doesn’t suffer from this shameful introduction, but hell, there’s elegance in its history.
The point (pt) goes way back and has a helpful cousin, the pica, with its own special abilities. So why do you think those crazy typesetters and print practitioners choose the point and the pica even to this day? I would certainly propose flexibility as the reason. 1 pixel is equivalent to 1/96 of an inch, what the hell does that mean? Now, consider 1/72 of an inch and we’re getting into the territory where I might actually recognize the difference of a single unit. We’re all familiar with 12pt font, there’s also 11, 10, 9, and 8. It’s simple enough, pick a font above 7 and you’ll be able to read it. What about 32pt? That’s headline font in the print world. Guess what, there’s no reason why it can’t be used in the web world as well. It’s just that we realize we’re moving bits around and not ink, so we use relative measures such as the em for fonts, but it should all still be rooted in the friendly point.
So what’s a pica? Well a pica is 1/6 of an inch. 6, huh, well that’s a nice number. Half of that is 3. I like 3. Get this, if there’s 6 pica in an inch and there’s 72 points in an inch, then that means there’s 12 points in pica. 12, now that’s an awesome number. It’s evenly divisible by 2, 3, and 4. How many numbers can you say that about? I’m sure the answer is infinite, but now you’re just being a jerk and you’re missing my point. 12 is cool, 6 is cool, 3 is cool, 1.5 is cool, .75 is cool even .375 is manageable. Let’s go the other way. 24 = 2pc, 48 = 4pc, 96 = 8pc. There’s that damn number again.
Anyway, what’s my point? (No pun intended) Use points. They’re there and they’re not fugly. Converting pixels into points is easy, just multiply by .75. Also, since it’s rooted in what’s made print look good for years rather then what the state of the art was when CSS became popular, the numbers just tend to work out nicer. Give em a try (haha, another pun); what do you have to lose?
Comments
Interesting topic. When Apple revealed the iPhone 4, I wondered if PPI was soon to be a useless (even detrimental) ratio.
Do you somehow specify your HTML layouts and element sizes in points? I didn’t think CSS2 supported measurements outside of pixels and percentages.
Do you measure anything in picas during the design phase? It wasn’t clear after reading the post why you brought up the pica, even though it’s good knowledge.
Hey Ryan, thanks for your response and I’m glad you found this interesting! :)
It turns out, high resolution displays, or HRDs, have been coming at us for quite a few years now, even before the iphone 4. I used that as an example because it’s high resolution property is well known. The problem with HRDs, in my opinion, has been operation system support. I remember purchasing a Dell laptop with one and not being able to use it because things just looked wrong. So, OSs suffers from the pixel problem too. But Apple has clearly gotten this right, things look great on my iPhone and on my high resolution iMac. Apple is one of the few companies who have been doing design right for years, and I would imagine they might share my sentiments about the point, given their roots are in print. They get it.
As for html layouts and elements, I do specify these in points. This is pretty straight forward actually. If you’d like to see how I do it, check out the css source for http://javascripto.org. The css there should exemplify what I am preaching here. Something else interesting about the javascripto site’s CSS is it’s based on what is essentially a pixel to point port of the Less Framework 3 (http://lessframework.com/v3/). You might want to check that out to if you havn’t before, it’s neato.
A useful tip I didn’t mention in my article that would be applicable to using points in your layouts is, for all intents and purposes the exact measure of 1px is equal to the exact measure 1pt. If you see 1px in your code you can therefore simply replace the units.
The reason for this special case is because when we say 1px or 1pt we generally mean “small” or “thin”. We’re not talking about specifics, we’re talking about aesthetics and this holds true regardless of the unit. 1pt and .5pt width lines are quite popular in the print world. Just keep in mind for larger measures you almost always want to do the conversion instead.
Another quick tip. The popular 960px layout has a convenient point based counter part, 720pt. Notice the relationship here to their bases, 96 and 72. So whats that mean? These are nothing more then 10 inch wide layouts. So when you specify either a 720pt (or 960px) wide layout I suggest you simply state 10in in your source, which is completely valid. The reason being, 10in says a lot more to me, as a human, about your layout. It’s almost like the Matrix, to a certain degree you can almost see the design right there in the numbers.
Sorry I didn’t get more into the pica (which, if it happens to be a new word to you, is pronounced /ˈpaɪkə/, like a pike), I realize I could’ve done it quite a bit more justice.
To your question, I certainly use them in the design phase, but only when it makes sense. As I get into larger measures is when they become helpful. Points tend to get more use because these are small measures and small measures will appear more often. But once I start hitting, let’s say, 24pt, there’s a better chance I’d like to go to 30pt or 36pt or 48pt rather then, oh I don’t know, 26.5pt. When I generalize 24pt as 2pc, it becomes clear that I’m talking about the difference of 2.5pc or 3pc or 4pc versus, the conversion of 26.5pt, which is 2.208333pc, yuk. Essentially pica are just a unit of measure for dealing with slightly larger measurements, and as I mentioned, once you’re on the pica, you should consider the inch when those numbers start to get out of hand too. 10in is nicer then 60pc which is nicer the 720pt and certainly nicer the misleading 960px.
One final point, CSS2 does have support for absolute measurements such as the inch, point, and pica so certainly take advantage. In fact even CSS1 had support (http://www.w3.org/TR/CSS1/). I think the problem may be, as designers, we’re just not serious about using them. I’d like that to change.