After posting my comment last week about printer points (72 per inch) matching Mac screen resolution (72 pixels per inch), I got wake-up calls from readers Saul Bottcher and Mordy Golding.
Said Mr. Bottcher . . .
“Nooooo! Not the 72 ppi [pixels per inch] myth again! Your tips are normally great, but you have just done a disservice to any designer who is trying to make digital and print work together.
“Here’s a current-day example of why. These specs are straight from Apple’s site:
“15-inch MacBook Pro has a 15.4” screen and runs at 1440 x 900;
“15-inch MacBook Pro with Retina display has a 15.4” screen and runs at 2880 x 1800.
“Obviously, these machines cannot both use 72 ppi, and in fact there is a huge difference in ppi between the two displays — one has double the ppi of the other!
“The fact is, 72 ppi is not a standard and never has been. CRTs [cathode ray tubes] have always had a flexible ppi. LCDs [liquid crystal displays] have a fixed ppi, but it varies by model/make/size.
“Please help to dispel this myth! People need to understand that there is no reliable print-to-web ppi conversion. When designing for the screen, you need to consider multiple ppi’s, sizes, and even color temperatures and gamuts. (Which is why web design is hell.)
“For some reason, the 72 ppi myth is one of the most persistent incorrect ‘facts’ about computer hardware and refuses to die.”
Mr. Golding added . . .
“The single Mac pixel=1 point thing was true when the Mac was first introduced. It had a 640 × 480 resolution screen that translated to 72 pixels per inch. In fact, the whole ‘web graphics resolution is 72 ppi’ thing is based on that ancient belief. Truth is, the resolution of a web graphic is dependent on the device you are viewing it on. There is no resolution for web graphics.
“The iPhone 4 Retina display is 336 pixels per inch, and the new Retina MacBook Pros are far higher than 72 ppi.
“Regarding InDesign, it’s one of the less-than-sexy features of CS6, so no one talks about it, but CS6 looks at your monitor’s resolution and uses it. In CS6 when you view your artwork at 100%, it’s actually 100%. Hold a ruler up to the screen — you’ll see.”
Reader Brad Grigor expressed his doubts, too . . .
“Hmmmm, I’m bothered a bit by the assertion that ‘A point is identical to a Mac pixel — the Mac runs on 72 pixels per inch.’ This is misleading, since few monitors are now (or ever were) actually 72 pixels per inch.
“I think it’s advisable to forget that there ever might have been any connection between a well-defined unit of measurement (point) and something whose size is getting smaller every day (pixel). Someday InDesign will let me set the real resolution of my monitor in Preferences so that 100% zoom means something.”
Gentlemen, thank you all.
So a one-inch image on paper (72 points per inch) translates into roughly one-fifth of an inch on the iPhone Retina display (336 ppi), and somewhat larger sizes on other modern displays.
This is obvious if you think about it, and it got me wondering why I hadn’t.
For one thing, it shows how long you — or, accurately, I — can go without thinking about something. Not just pixels. I can go for decades carrying gaps in my knowledge, ancient opinions, untested assumptions. I recall my mother, as late as the 1990s, telling me she wouldn’t buy a Pontiac because “they were hard to steer.” This is because the only Pontiac she had ever driven was a big 1951, with heavy, unassisted steering, normal in those days, when she was 24 and pregnant. Technology changes faster than beliefs.
Muhammad Ali once said, “A man who views the world the same at fifty as he did at twenty has wasted thirty years of his life.” How many opinions of an unformed 20-year-old do I still hold?
Anyway, another thing is that paper-to-glass correspondence doesn’t really matter, at least to me (given that I’ve ignored it for so long). A paper magazine has a physical size that’s real; an 11-inch page feels like 11 inches because it is. A foot is this long, a yard is that long, my desk is 30 inches deep, so on. Real things.
A page in cyberspace doesn’t feel that way. Cyberspace feels infinite.
I have a 27″ Apple monitor, which is a pretty big screen. Physically, it’s 17-1/2″ deep. The image part is 13″ deep, a mere 2″ deeper than a letter-size sheet, but I couldn’t have guessed that; I would have said it’s much larger. Why? Perhaps because my monitor doesn’t feel like a page; it feels like a window, through which sizes are viewed relative only to each other, not to real life. Perhaps because cyberspace, in a sense, is infinite. Unlike a paper book, which has a last page, cyberspace does not end; there is always another click. The psychology of this, besides making us tired, may get translated to our perception of physical space. Endless feels the same as sizeless.
Whatever the case, thanks again to you guys for knocking me upside the head (and to those of you who thought about it). Brad, InDesign CS6 does exactly what you predicted, so your “someday” is here. Mordy reports, however, that even at exactly 100% measured on a ruler, his pages onscreen still look smaller than on paper.
Whilst it is true that you can’t hold a ruler to the screen and count 72 pixels per inch, so there is no relation to print any more, it’s still important for screen work.
Basically, if you’re operating between Illustrator and Photoshop, one point in Illustrator will come across to Photoshop pixel-for-pixel at 72ppi. If you have your Photoshop document set at any other ppi setting, the artwork will be translated in size. Sometimes this is desirable, other times not.
However, if you are doing pixel-specific work – and if you care about the craft of design, even if designing for responsive layouts, you should care about crisp pixels whatever the transform – then this ppi setting is invaluable.
There’s one thing no one mentioned: On paper, images are not reproduced by means of pixels. An image on paper is always composed by lines of raster dots (be it AM or FM). These raster dots use 256 or fewer printer dots in a square in order to create 100 different levels of gray (or color).
Most printers nowadays have a real resolution of 1200 or 1440 dots per inch. When you divide this by the square root of 256, you get the following result: 1200/16 = 75 or 1440/16 = 90. So, when you have a printer that’s able to produce 1440 dots per inch, you can construct 90 lines of raster dots per inch, maximum. But when you do this, you can see the physical boundaries of each pixel in the image. To avoid this, you have to double the image resolution (not always, but usually), so you need an image resolution of 180 pixels per inch in order to reproduce the image with good quality on an inkjet printer.
For printing in offset the rules are the same, but plate-setters mostly have a resolution of 2400 to 4800 dots per inch. Complicated isn’t it?
I tell you this so you will know that you never may simplify the screen-printer matching. When we talk about a digital image, we never talk about a resolution, but only about the pixel width and height. Resolution comes in only when the image is reproduced on a physical medium, like paper (or placed in layout software like InDesign or Quark Xpress).
>>>For printing in offset the rules are the same, but platesetters mostly have a resolution of 2400 to 4800 dots per inch.
Yes, and remember, those platesetter dots per inch do not translate directly to halftone dots per inch. It takes many platesetter dots to reproduce one halftone dot; but then, I assume you already know that — just clarifying for others.
I am not producing web-savvy images, as I am in print, but I wanted to comment on John’s observation that the computer screen is like a window. For instance, when I construct a business card and use 8-point Cochin, it looks wonderful on my screen, and I don’t even think about the fact that I am viewing it at 400%. What a surprise when it hits the paper proof and that 8-point type is really teeny tiny!
The print or screen resolution dilemma can be especially hard for those who didn’t grow up in the business before screen images became routine. We had to understand and be able to exploit dpi and lpi differences from the jump. Designing for a newspaper print run was very different from designing for a coffee table book on many levels, but especially for photos and other images.
Adding display resolution issues certainly complicates things, but it is primarily another medium with intricacies to master for those of us already familiar with reproduction differences.
This has been my rule of thumb for “truth in sizing” with InDesign for years: An onscreen size of 131% works out to 100% in the real world. This percentage has worked through size and resolution permutations on various monitors. I’m still using InDesign 5.5, so I’ll have to check that technique when I upgrade to 6.x.
I also use 131% for a WYSIWYG view in inDesign, but only on my 24″ monitor. On my MacBook Pro, that percentage needs to be 180% due to the smaller pixels.
John mentioned that Mordy feels that even at “true” size, pages on his monitor seem smaller than on paper. I find the same to be true, because when I’m viewing a sheet of paper, I hold it roughly 15″ from my eyes, but I sit 24″ away from my monitor. For that reason, when I want a ‘perceived actual size’ view on the 24″ display, I set the zoom to 160%. In CS6, 122% gives me the same result.
Try this: While sitting in front of your monitor with an A4 page open in InDesign, hold up a sheet of A4 paper at a normal reading distance and then adjust the zoom in inDesign until the edges of the page line up. Now items on the page will appear roughly the same size as they will to the reader of a printed document. Of course, the display won’t reproduce the fineries of printed text, but that’s where you just have to rely on experience.
This post was awesome! My thanks to everyone who contributed to it — it’s a myth I have now finally shed, however I have a question.
What does this mean in terms of the way we work? What do we need to change, if anything, about the way we design for web and print?
Thank you for all the amazing articles.
The web design community is moving towards a discipline called Responsive Web Design. Moving away from specific measurement, the idea behind responsive design is a design that “responds” or adapts itself to fit the screen it is being viewed on. A large part of this is the idea of using percentages instead of absolute values. So a centered background spans 80% of the display instead of being locked to a specific pixel dimension. Another part of this is specifying multiple layouts, and using CSS to first “sense” the dimensions of the display and then serving up the appropriate design that the designer intended for that size display.
Responsive Web Design by Ethan Marcotte is the defining book on the subject.
The idea of web-page elements scaling to a percentage of the display space instead of demanding a fixed number of pixels sounds marvelous . . .
. . . but . . .
. . . does “display” in this context mean the dimensions of the hardware (monitor, tablet, phone, whatever), or the dimensions of the browser window?
I’ve got this nightmare vision of a centered background trying to spread itself across 80% of my widescreen monitor, truncated inside a browser window set to half the screen width so that I can read text comfortably.
It’s always the width of the browser. A good example is http://css-tricks.com/ — with any responsive website, you can see how the content responds by resizing your browser window (make it really wide or really narrow), and you’ll see the layout will adjust accordingly.
I really like your comparison of the monitor screen to a window rather than a sheet of paper. I hadn’t though about it before, but you’re right. It’s interesting the difference in perception, without even realizing it, even though the terminology is the same.
John, I quite appreciate that, beyond the “mathematical” discussion, you addressed returning to long-held thoughts for re-examination, as things do change in time. We can become so cocooned by “what’s always worked” that we can forget that there may be new — and better — solutions (or new and worse, in which case we can go back to the good, old-fashioned way!). Thanks for going beyond the nuts and bolts and into the thinking behind the process.
There are some very strong opinions over the whole 72 dpi thing. It’s a measuring convention handed down over the years that doesn’t really directly apply to anything today, but I think it’s still handy to use. Every web designer I know uses pixels for measurement, but since computer software requires width, height and pixel density, it’s easier if everyone uses the same pixel density — and many web designers do: 72.
It’s also handy when non-designer friends are sending photos via email. Converting a 4 x 6 to 72 ppi before sending is much kinder to my inbox and bandwidth costs. It could be 100 ppi, or whatever other number you want, but 72 ppi is an established convention that’s easy to follow.
For people who work in print or web design there’s definite value in fully understanding resolution and the importance of using the right resolution to get the job done.
You are great! I don’t know much of anything about pixels or any of this.
I just love that you listened to those who knew and were open and had a sense of humor about what you didn’t know.
Made my day! And made me wonder how many times I think I know something I don’t.
Sofia Garcês says: “What does this mean in terms of the way we work?”
For me, having my software know (and use) the correct monitor resolution means being able to do quick “final size” comparisons of canvas prints, book designs, design elements, etc., on screen, especially if the client wants to get a visual impression of size.
PM Daeley says: “. . . my rule of thumb . . . an onscreen size of 131% works out to 100% in the real world.”
On my 27″ monitor, the factor is 151%, since the monitor has an actual pixel density of 109 ppi. With InDesign (before CS6), divide that by 72 to get the zoom factor for 100%. In my case, 109/72 = 1.51 (151%). On my laptop, the actual pixel density is higher, 145 ppi, so the factor there is 201%.
Cheers!
When talking about resolution, though (especially when looking at Photoshop’s Image Resize dialog), numbers like 72 and 300 are easier to understand as related to web- and print-specific resolutions. I think there’s a general understanding amongst most design professionals about this. Is that no longer the case?
Well, I’ll give you a pass on the pixel thing. Those of us who grew up with the first Macs can be forgiven for holding onto old ideas. (My first was a Mac Plus purchased in 1986, running PageMaker v1.5. Those were the days when PageMaker produced the dreaded bomb icon with regularity, Macs cost $3,800 (actually that was my SE), and black & white laser printers went for $4,500. I’m sure you remember.
Your long suit is your fantastic design sense and ability to teach us how to do all sorts of fantastic things. We’ve got to be appreciative of the “youngsters” who do know all of the highly technical things that we just ignore. BTW, I have every one of your issues from Vol. 1, #2 in 1990, and the designs are just as fresh now as they were then.
Now that we’ve thoroughly debunked the 72 ppi myth, what suggestions do you have for situations where hundreds of images need to be optimized quickly and consistently? If we can’t even count on 72 ppi as an optimum resolution, what can we count on?
P.S.: My myth was always 96 ppi, which was purported to be the standard resolution of a PC at about the same time that 72 ppi was considered the Mac standard.
Thanks for the clarification. Interesting read!
Only from my experiences, I totally agree with John McWade — “my monitor doesn’t feel like a page; it feels like a window, through which sizes are viewed relative only to each other, not to real life.” One pixel on a very high resolution monitor looks smaller than one pixel on a low-res monitor. The grain is finer. A high-res monitor can display more pixels and bigger images without popping up scroll bars.
You gentlemen talked about the 72 ppi myth. I am no expert to state it is not. I don’t know for how long 72 ppi screen resolution stays as a truth. I only know that when you optimize an image for web use, it is 72 ppi. Put a 300 ppi image on a web page, and the screenshot you capture is only 72 ppi. I appreciate any help to my limited knowledge.
Kinda fun and related to the topic . . .
Client: The demo you created is too small. Make it wider.
Me: Is your monitor very large? I optimized it to be around 1024 px wide for a variety of monitors.
Client: No, no, it has to fill the screen up. Let me tell you the correct dimensions.
A few moments later.
Client: Make it 20 inches. The perfect width is 20 inches to fill the browser window.
Me: Did you just use a ruler?
Client: Yes.
From clientsfromhell.net
John, I saw that and had a “that’s not true” moment, but then ignored it because I thought it was one of those harmless little white lies we tell clients. In truth, it is a Chesterton’s Fence, where we first need to understand why it was built before we shake our fists and declare it to be untrue and should be knocked down.
Way, way, way back when the web was this thing that you put printed pieces on, clients (and most creative directors) did not really understand all this “the user is now in charge” talk. Sure, designers who understood both print and digital (damn few back then!) tried their best to explain it, but at the end of the day, it was easier to say “72 ppi is one inch in print, same as one inch on screen.”
As any parent knows who has ever brought their kid to a Baskin Robbins, you never say “which of the 31 flavors would you like?” You say instead, “they have chocolate or vanilla. Which would you like?” Harmless little white lie, really.
It’s kind of interesting, since the Mac is essentially a Unix machine these days. Longtime Unix users will know that 72 ppi never existed (a long time ago we had a choice of 75 ppi or 100 ppi in X11 — 72 was not even on the list — and we all knew that often neither was real, so it was really just a matter of which was closer to reality).
If Apple had chosen to go the X11 route instead of creating Quartz, perhaps the 72 ppi myth would have been dispelled sooner.
So, this is probably a dumb question, but considering that there no longer is (or ever was) a set ppi to optimize web graphics for, what type of protocol do I need to consider in order to create graphics that will present well to the largest number of potential viewers? Does anybody have a visual algorithm or protocol they can share, or a resource that handles this subject?
Thank goodness you published a clarification about that pixel thing. I was brought up in points and picas, and am comfortable in that measure. Some of the conversions I had heard about have been a mystery to me, but I thought it was just that I was from the generation that marveled at the Linotype (I set my first line of hand-set type in 1948). I thought I just didn’t understand pixels and things well enough. Now I find I wasn’t so far off after all.
Thanks for publishing!
Thanks for posting this! I too noticed the inaccuracy, which really stood out because everything else I’ve seen you write about is so good and accurate. I didn’t bother saying anything because a few others had, but I really appreciate you taking the effort to send out a correction for those who may not have taken the time to read the comments from the last article and discover the myth. That takes a lot of humility, and on top of that you actually turned it into another lesson as well. Amazing!
Yes, yes, the 72-pixel per inch “factoid” is history and no longer accurate. But that’s a digression. The original question asked was “should I be using inches or picas/points in my designs”?
And it seems to me that while there shouldn’t really be any reason to prefer one over the other, I find that picas are often “just the right increment” in a design. This leads me to believe that it might not be accidental that the graphic arts evolved such a measure over the centuries. But short of some sort of “golden ratio” sort of theory, I think the answer to the original question is “use what works for you!”
Right?
Brian, not entirely. In order for one designer to understand the other designer specifically, the design industry has agreed on a nomenclature that everyone in the industry understands. It is the entire reason something like Pantone® exists. Art directors everywhere were going bald trying to match the client’s logo to “fire engine red.”
The problem exists when the jargon (or nomenclature if you want to play nice) does not translate into the outside world which is really comfortable with inches, but confused about picas and points. (which also leads to stuff like this in Michigan) And it becomes even more problematic when “we are all designers now” but few bother to hone the craft or learn the nomenclature that makes precise language between designers possible (or less confusing, more efficient, etc.) What works for me is talking with another designer in design terms without having to translate to the client throughout.
But that is not real world, which leads effective designers to develop the muscles of explaining design choices in language clients understand. That is a topic John McWade has spoken on at length and depth.
I really like the pic because of the creativity of the screen. It’s interesting the difference in perception.
Much respect.
I enjoy your posts and videos very much — excellent and informative. This post is typical — taking others’ comments onboard and promoting a mature but lively approach to the subject. Respect!
[also over fifty — still learning — if more slowly . . .]
Many thanks for an informative read. I am a scientist, not a designer, but my hobby is astrophotography, and I also produce the newsletter for my local astro society.
One of the things I struggle with is explaining to people what size and resolution I need for photos they send in. Astrophotos are basically white dots on a black field, but if you get the resolution wrong they are really unforgiving. I normally use 100 ppi and 1000 pixels on the longest side for the screen pdf and 300 ppi for the printed copy.
Seems to work for me.
This is why it’s so difficult getting the correct-size photographs from clients. Either they go by inches and ignore the pixel resolution, or they attempt to blow-up the resolution of low-res images.
BTW, for measuring pixels on-screen I use the free PixelWindow.
There is one misunderstanding that still remains:
If you talk about 1000 pixels, there is no use in using the 72 ppi. An image that was defined with pixel dimensions will always take the resolution of the output device, i.e., the screen, which results in a larger or smaller image, depending on the screen resolution.
If you talk about inches, centimeters, or other real-world measurements, then you must talk about resolution, because this defines the final scale of the picture on a given medium: offset print, inkjet print, and so on.
So it is: 1000 pixels wide, or 13.88 inches at 72 ppi, not both.
I had this discussion with a professional photographer once. He scaled his images to a given pixel width and then converted them back to 72 ppi (for web publishing). The result was that he had the same number of pixels, but many hours lost with converting back and forth. And of course the risk of losing sharpness and quality.
On screen the image had exactly the same size!
Pingback: the elusive pixel | art 125 | digital imaging one