It’s time to say goodbye to Pt units.
Why so much is “lost in translation” during a hand-off.
Recently I stumbled upon the article “It’s time we say goodbye to pixel units” by Nick Gard and it stuck in my head.
I agree with his arguments and my developer's brain responded immediately with: “Yeah, sure! Let’s do it!”. After some days the thought about the “bad pixels” still crawled my brain.
When was the last time I have seen a hand-off by a designer that actually gave me anything but absolute pixels? Heck, I would have killed for pixel units for typography. But noooooo … in the digital age, I still get some lousy pdf or ppt files with pt as font size measurement.
Then I went ahead and start googling for conversion point to pixels, just to find out that it all “depends” on the pixel density of your screen.
“But Vlad, why don’t you simply ask the Designer?”
Because my dear reader: in my world of a developer, designers are handing off their designs to a virtual pile of projects and when the time and resources allow a developer to pick it up and start implementing. Between filing through piling of the designs and the actual coding work, several months can pass.
My developer's brain:
Breathe in, breathe out.
The next project will be better!
Next time you get a proper handoff, promise. 🤞
Let’s back up a little to get a grasp on the history.
According to the article of Thomas Phinney from 2011:
The point size of the type was simply the height of the metal body the type was cast on.
A physical artefact transferred to digital as following:
In digital type, the font’s letters are drawn on a grid, where an arbitrary number of units (often 1000 or 2048) are set to equal the “em” which is then scaled to the current point size for output.
Let me get this straight, we moved away from the physical limitations or necessity of description and yet are using the old measurements?
Remember this was about typesetting in digital vs. physical typesetting from Gutenberg Press, where actual blocks of letters were organized and then pressed against paper to make an ink imprint.
Now comes the web:
The web can use points, but just defines them in terms of pixels. It has inherited the Windows definition of that ratio, so on the web by default 1 pt = 4/3 pixels, so 12 pt = 16 pixels (but see below).
Remember it was in 2011, before high-density displays like the “Retina Display” of the iPhone 4. And this definition only holds if your dpi (dot-per-inch) was set to 96dpi. It just got messier from there.
There is a beautiful article by Peter Nowell “Pixel Density, Demystified”
Let’s get to the “Point” of why we are still using Pt as measurement.
Short answer: the same reason we use horsepower with automobiles, people knew what horses are and could understand how many horses will be replaced by an engine.
Guess who the first digital designers were? You guessed right, pioneers who came from print design. How do you tell them that their everyday slang doesn't fit anymore? You can’t. If you want to sell the benefits of new products, don't alienate your customers. Horsepower and engines once again.
The designers could all keep their slang and the developer have done the nifty calculation work, easy peasy with a predefined set of resolution and the actual paper print medium.
We stuck with Pt and Inches or Millimetres for the sake of the designer's sanity. At that time the computer was just a tool to ease your work, not to consume media or read novels on it.
Everything changed when the computer became an everyday object, the internet arose and now the designers were asked to design for a pixel-based medium. But the software used for designing was still handcrafted for paper print, with terminology dated back to a printing press.
A designer went on and created a layout, with points and inches/millimetres, handed it off to the developer to do the math magic behind the scenes, once again.
Innovation is by definition a process of taking something that is there and improving on it. Before we all cry out to ditch the absolute media measurements of px and embrace the uncertainty of percentage-based layouts, we need the first generation of pure digital designers, untainted by historic slang and thinking processes of a static medium.
These designers know that their medium can scale indefinitely. You can recognize a real, first-hand interaction designer by his approach to content placement. They don’t think in the two-dimensional manner of a flat medium, they think about a third dimension and play with it, scaling images on demand, showing popups on mouse over or even change the website altogether according to the user interaction.
Of course, there were attempts to do similar things according to interactivity with so-called “gamebooks” but that was still a workaround to compensate for the limitations of a static medium.
We absolutely and definitely need to get rid of absolute measurements, but we need to do so in our head and the whole design process, not just the surface where they are actually displayed. As long as we are forced to do a lot of “translations” between different stages of design and development, we will face the usual communication problems. Too much is just “winged” by designers and developers alike.
As a designer, use Pixels if you can on the top level and try to use multiple subsequentially. For Example 16px as the base for the body and then 32px (200%) for Header, 24px (150%) for Sub-Header etc. This nicely translates to the used EM units in digital media. If you are lucky to design for native apps you are already served with a solution, beautifully described in Pixel Density, Desmystified by Peter Nowell.
As a developer communicate your needs for digital media to a probably transitioning print designer, maybe they never encountered this before.
