The Biggest Reason for CSS Points Instead of Pixels

Some years ago, PC screen resolution was 96 pixels per inch, Macintosh screen resolution was 72 pixels per inch. Screens for other operating systems generally had one of those resolutions.

At that time, it was safe to specify pixels for CSS dimensions and font sizes. There wasn't enough difference between the resolutions to matter for many or most design applications.

Then came higher resolutions; especially on mobile devices but also on desktop and laptop computers. And that's the reason, the biggest reason, for using points or other non-pixel measurements instead of pixels.

The 84 pixels (midway between 72 and 96) that measured close to an inch on both previous resolutions may now measure only half an inch on double-resolution mobile devices.

Some device manufacturers automatically adjust pixel measurements to nearly what it would be for a desktop screen resolution — so the 84 pixels may still appear to be about an inch. Otherwise, their users would see things at half size. But don't depend on the automatic adjustment continuing indefinitely.

Eventually, some or all devices and computers won't make the pixel dimension and font size adjustments. I expect it to happen after the majority of websites have replaced the CSS pixel measurement with resolution-independent measurements.

Don't get caught with pixels.

Change your CSS from pixels ("px" in CSS notation) to absolute distance and relative size so your pages don't depend on screen resolution to display properly. It might not be urgent, yet, but prudent to get it done as you can.

For some things, like images with exact pixel dimensions, the pixel measurement may still be required. For most things, though, non-pixel measurements are preferred.

Computer and device resolutions are likely to continue evolving. I'm unaware of any resolution standard. Manufactures create and will continue to create the screen resolutions they think will sell the most devices.

Therefore, to protect your websites from device manufacturer whimsy, use non-pixel CSS measurements. That would be absolute linear measurements for dimensions and distances and it would be relative measurements for fonts and sizes related to fonts.

Let's talk about non-pixel CSS measurements that are available. Some or all will be familiar to you if you've been doing website design.

There are relative measurements and there are absolute measurements.

I'll mention only the measurements that have been available in browsers pretty much from the get-go. Measurements available in later browsers and CSS versions may be addressed in other articles.

Use the measurements you're most comfortable with or that makes the most sense for the project you're focused on.

I generally use ems and points, now that I'm weaning myself off pixels. Although I do use inches occasionally for things like column widths.

CSS Measurement Examples

Although this isn't a tutorial on how to use measurements, examples are provided for a quick visual comparison.

First, pixel, em, and percent as applied to font size.

The percentage sizes in the above examples are calculated on a font size of 1 em.

Now, examples of pixel, point, pica, inch, centimeter, millimeter, and percentage as applied to an absolute measurement.

The percentage size in the example is calculated on a 40 millimeter width.

The important point: Technology continues to evolve. Computer and device resolutions will continue to change. The used-to-be-standard pixel measurement is losing its status.

Use non-pixel measurements, instead.

(This article first appeared in Possibilities ezine.)

Will Bontrager