What designers can learn from the 1970 New York Transit Design Guidelines
I came across an amazing gem for designers this morning.
Initially, I searched for some old-school Helvetica posters, because I know these guys paid massive attention to kerning and letter-spacing back in the day.
Why was I searching for this and why is this valuable? Because, a modernist typeface like Akzidenz Grotesk can be gorgeous, but only when used correctly. With a few kerning and letter-spacing tweaks here and there, you get a much prettier result.
Good stuff for a little article, I thought.
But during my search for pretty Helvetica posters, I came across a magical document.
The New York Transit Design Guidelines. Check out the video below where designer Michael Bierut from Pentagram talks about this book.
After a little Googling, I found an interactive document of the entire original book! What I love about this gem is how much we can learn from it. How are they using the grid? How are they kerning titles and smaller paragraphs? How many different font sizes are they using?
Why is this interesting? In the 21st century, UI designers work a lot with Design Systems. This document is one of the first design systems ever. And, in modern designs, most typefaces are used out of the box, with no adjustments made, this is a huge missed opportunity to get your designs to the next level.
Three design lessons from the New York Transit Guidelines
Titles have a very tight letter-spacing
They dedicated an entire page to combinations of letters and how much kerning you need to apply for each combination. This will result in gorgeous typography but is hard to achieve in online design. What’s the alternative?
In Figma -6% letter-spacing achieves about the same result. This sounds like a lot, but here’s an example where I typed over the existing words with an average of -6% letter spacing.
Very small fonts, have enlarged letter-spacing
On closer inspection of the body copy, I noticed the letter-spacing is about +2% (if we’re talking in Figma language).
This might mean a 14px or 16px font on your website might benefit from increased letter-spacing and remain legible.
You don’t need so many font sizes
In the entire identity, they are only using three font-sizes. I’ve read and heard this advice before from senior designers to limit your font palette to 3 or 4 different sizes.
That’s it for today, I hope you learned something from this.
Jan-Paul Koudstaal
November 23, 2024Yeah, that manual is a classic. Goes well with the iconic Vignelli Subway map too. 🤗
You might already know this, and it’s sold out anyway, but a few years ago the manual was re-issued, and you can find many other beautiful brand guides on this website too: https://standardsmanual.com/products/nyctacompactedition