At yesterday’s Ampersand New York web typography conference in the Times Center at The New York Times, Font Bureau designer/technologist (and A List Apart columnist) Nick Sherman demo’d Size Calculator, a web application created to bring screen design a capability that print design has enjoyed for 500 years.
It is trivial for a designer to set type (or any artwork) to appear at a specific size in centimeters or inches on the printed page. But it is impossible to do so when designing for screens. Here’s how Zen it gets: if I use CSS to set a line of type at 65cm, it will most certainly not be 65cm tall—nor does the W3C expect it to be. Actual size will depend on the dimensions and resolution of the screen. (Perceived size will of course depend on viewing distance, but that is true for print as well.)
Likewise, if I want an image or a line of type to appear to be exactly the same size when viewed on different screens—say, on a smartphone and a desktop monitor—there’s no way to achieve that, either.
Size Calculator solves these problems by using JavaScript to do the math.
What it is good for: if you know the dimensions and resolution of your device (be it a wall screen at a conference, a digital billboard, or a specific model phone held in a specific orientation), you can finally do the things I mentioned in the paragraphs above. Same size type on different screens viewed at different distances? Achievement unlocked. Another thing Nick did in his demo was to “print” an exact size dollar bill on the screen in the Times Center auditorium. He proved that it worked by walking to the screen and holding the actual dollar in front of the projected dollar. He then printed a life-size image of himself. Fun!
What it is not good for: although Size Calculator is exciting, it would not be good for responsive web design, because RWD is about designing for a universe of unknown devices, resolutions, and capabilities.
But if you are designing for a limited set of known screens, the sky’s the limit—literally: your design can take miles or km into account. If you’ve always wanted to make a ten thousand foot letter display at 12pt when viewed from a helicopter, now’s your chance.
What will you do with Size Calculator?
Thought we were supposed to get away from designing for specific devices (and browsers)? Better: if devices did a little hand-shake announcement “This is me! I do this!”, then the script could adapt on-the-fly.
Mind you … requires (yet) another standard.
Still … size calculator is progress!
Indeed. Which is why I said it is not for responsive web design. 🙂
Neat!! This would be good for exhibit design too.
This can very useful for internal applications in the financial industry. Thanks for sharing!
Actually, this would come really handy for responsive web design if there was a way to ensure that the final rendered size was the same on all the screens.
If you think about it, you wouldn’t need to buy so many devices to do these kind of tests because you would know they would have the right type size everywhere. You would be able to focus on JS bugs and what not.
Thanks for the write-up Jeffrey!
I might disagree with you on one point though: Where you say “it would not be good for responsive web design”, I would instead say “it is not nearly as helpful for responsive web design under the current circumstances as it could be if the W3C specs for absolute units actually corresponded to absolute units”.
As I previously argued, being able to detect and specify actual physical sizes would only improve the kinds of optimizations we could make for responsive designs.
At the moment, because of the holes in how media query features work, so many of us have grown to think that responsive design should involve some guess work, but in fact the whole point of media queries is to eliminate guess work about the presentation environment.
Thanks, Nick. I’d agree and disagree by saying it could be immensely helpful for adaptive design (a range of fixed widths, for a lesser universe of known devices). As I understand responsive design these days, it’s all about ebb and flow; about design that works for devices that haven’t even been invented yet. In other words, even with media queries, there will always be guesswork. I suppose, though, even in an ebb-and-flow setting, it could be helpful to be able to specify the exact real-world dimensions of a given object. So I’ll agree with you in principle.
I’m not sure yet what I’d use it for but it’s certainly nice to have. The sad thing is that this tool would be much more useful if devices (mainly android) didn’t lie about their resolution.
Great Comments!
In the context of what designers are “supposed to do” about type size, as founders we know they know how to make responsive typography possible in the interest of publishers. Now, what we want to know more about, is how they can make responsive typography more adaptable for readers.
At the same time, in the context of ebb and flow, and uninvented devices, this calculator may be helpful to future device developers aiming to keep their resolutions adequate for the expected viewing distances of their devices.