Typographical Contrast

Figure 1 The New York Times relies on typography to help indicate variation and hierarchy in the navigation.

The online home of The New York Times was a definite source of inspiration during this redesign–primarily due to the fact that it is designed around the content. Ads are as unobtrusive as they can be. Typography is clearly important. And they frequently have some of the most beautiful and engaging infographics anywhere. It’s clearly a masterful work of art with a sincere focus on content.

Today though, I want to focus on home page navigation. Down the left side of the page is a very small, thin strip of navigational links. Space is at a minimum, but it is still incredibly easy to see the hierarchies at work. (Figure 1) Through only simple typographical differences, they save space and communicate the relationships of the links, and it’s all done using CSS.

I can’t speak as to whether the use of typography was a result of the space constraints, or whether the solution enabled them to save space, but it is clear that the subtle change is effective. Instead of indenting or using bullets, and losing horizontal space in both situations, the same effect is achieved without the negative side effects.

While it’s most likely unintentional, this is a perfect example of Edward Tufte’s principle of “smallest effective difference” which is about making the differences between visual elements as small as possible while still maintaining their distinctiveness. Jason Fried of 37signals wrote about how this principle related to some of their recent tweaks to their products.