Saturday 18 January 2003

72ppi or 96ppi—am I missing something?

Since a number of visitors to my site have complained that the Georgia font is difficult to read at small sizes on the Macintosh, I’m redesigning my stylesheets along the lines that Zeldman suggests (except that my default will be resizable Georgia and the alternate will be fixed Verdana).

Zeldman’s explanation of why he’s switched back to pixels is instructive (and I’ll quote it when I announce the font changes). But something he wrote about the recently released Safari browser caught my eye:

Matt Haughey notes that Safari defaults to the old Mac 72 ppi display instead of the 96 ppi standard used by most other modern browsers regardless of platform. This means that text set with relative sizes, as the W3C and accessibility experts recommend, may be too small in Safari. (Zeldman.com and Happy Cog use relative sizes.)

This switch back to 72 ppi is particularly puzzling since, in OS X, Apple has abandoned the pixel as a unit of measurement. When you set type preferences in OS X, you’re asked to do so in terms of point sizes—even though points are a unit of print, not screen, measurement.

I’ve been building websites long enough to know the difference between the Macintosh display resolution of 72ppi and the Windows display resolution of 96ppi. But I was unaware that there had been an agreement amongst browser vendors to standardize on 96ppi.

If that’s the case, I wondered to myself, why are we all still making GIFs and JPEGs at 72ppi? So I did a quick experiment, making JPEGs of the same image at both 72ppi and 96ppi.

Araki book on chair, 72 pixels per inchAraki book on chair, 96 pixels per inch

Needless to say, they look identical since both images have the same dimensions (240 x 180 pixels). The file sizes are the same too, since file size—at the same JPEG compression settings—is largely a function of the number of pixels in the image. And, apart from the gamma difference, they’re the same size on both my (1024 x 768) Macintosh and Windows monitors—as you’d expect, given that a pixel is a pixel.

So, what am I missing here? Is the 72ppi/96ppi issue only relevant for text specified in relative sizes? And inconsequential for images? (My test images print identically too.) Am I missing something here?

Permalink | Technorati

Comments

I never got my head around dpi, but Dave Hyatt has announced on ihs blog that the next version of Safari will use 96dpi just like every other browser:

http://www.mozillazine.org/weblogs/hyatt/archives/2003_01.html#001575

Posted by Simon Willison on 18 January 2003 (Comment Permalink)

At my old job, I did layout and imagesetting for scientific journals, so I used to understand this stuff. Let's see if I still remember.

DPI is only of significance if you are converting print measurements (like inches or points, 1/72 of an inch) to pixels. When you saved your graphic at a width of 240 pixels, the dpi setting was of no significance. If you had instead specified a width of, say, 3 inches, the dpi setting would specify to how many pixels the width would be translated. (216 at 72 dpi, 288 at 96 dpi).

In webpages, DPI make no difference for graphics (since the file has a fixed number of pixels), but does make a difference for text whose font size is specified in points. At 72 dpi, 1 point = 1 pixel. At 96 dpi, 1 point = 1-1/3 pixels.

Does this make any sense at all? When I was learning layout, it took me about a year to get my head around all of the units of measurement.

Posted by Scott Hanson on 18 January 2003 (Comment Permalink)

The DPI setting in an image file is only a hint. Real publishing systems might use it, but web browsers tend to ignore it, also when you print the page. When displaying it, browsers usually map one image pixel to one screen pixel. When printing it, they scale the image using a preset DPI.

In another world, web browsers could have scaled images on the fly, based on the image DPI and the logical screen resolution. But that's too late to change now...

Posted by Fredrik Lundh on 19 January 2003 (Comment Permalink)

One of the two images is either not the same amount of inches or not displayed at the same resolution it was made for. Other than that, I have never understood this 72/96 thing either.

Posted by Kris on 19 January 2003 (Comment Permalink)

It matters if you use measurements other than pixels.

The pictures are not affected because you specify their width and height in the corresponding HTML attributes in pixels.

However, with fonts it's different.

1pt = 1/72 inch. This means:
At 72 pixels per inch, 1pt equals 1 pixel.
At 96 pixels per inch, 1pt equals 1.333 pixels.

So a font specified at 12pt will display as 12 pixels if the resolution is 72ppi, and as 16 pixels if the resolution is 96ppi.

The only solution around this is to specify font sizes in pixels rather than any other units of measurement, because these will be converted back to pixels using different conversion rates depending on the resolution.

-H

Posted by Horst on 19 January 2003 (Comment Permalink)

Points are hte printers way of measing type sizes, they are very nearly 1/72nd of an inch. When the Mac was first invented the screen resolution was 72ppi, and this was maintained through the 80s and early 90s, and the Apple monitors were always tuned to resolve a single pixel clearly. Thus Mac programmers got used to points=pixels.
On Windows, there was a trend to run monitors at higher ppi ratios, even if this made them slightly fuzzier (the majority of Windows monitors were also cheaper and less well aligned). In Windows 95, MS set the default resolution to 96ppi, so the fonts would remain legible. AFAIK you can still adjust this in the System control panel, but many apps get confused about metrics if you do.

Once HTML got a way to specify type in both pixels and points, the ambiguity should have been resolved. However, even now, many Windows-based web designers still say 7.5pt when they mean 10px .
In 1998, Microsoft released a version of IE for Mac, that let you adjust the ppi you want to use. It also defaulted to 96. (Partly at my urging, partly because my friend Maf there persuaded the rest of the team. The nice UI with a ruler displayed so you can compare to a real-world one is his).
In addition to this, Mac IE can apply a further scale factor, which will scale up pixels as well as points.

Try embedding your images with the width specified in points, ems or x-heights. You may see differences between browsers here too. I don't know which ones get it right and which get it wrong, but specifying both type and images in points lets you do a uniform-sized layout.

I hope Safari learns from the IE Mac UI for this, and even better, it could respect the true ppi of each Mac screen by default (with LCD screens this is firmly fixed, whereas with CRT's you can always attach a different sized tube).

Posted by Kevin on 19 January 2003 (Comment Permalink)

Thanks for all your replies. I understand it now, particularly because of the "1pt equals 1 pixel at 72ppi and 1.333 pixels at 96ppi" examples. Kevin, if I can find the time, I'd like to run the "image width specified in points, ems or x-heights" experiment.

Posted by Jonathon on 19 January 2003 (Comment Permalink)

"This switch back to 72 ppi is particularly puzzling since, in OS X, Apple has abandoned the pixel as a unit of measurement"

Both QuickDraw and Quartz are [still] hardwired to 72dpi/ppi. As I understand it Quartz is capable of 96dpi (etc.) but is currently wired to 72, I suppose for compatibility with the thousands of existing Mac applications which assume 72dpi.

AFAIC, Mac Web browsers should behave in the same graphics manner as other Mac applications. To me, consistency within the Mac platform is of paramount importance.

Posted by Walter Ian Kaye on 22 January 2003 (Comment Permalink)

This discussion is now closed. My thanks to everyone who contributed.

© Copyright 2007 Jonathon Delacour