Web Text Size in the Past, Present and Future

Historically speaking, changes to the norm aren’t always well received, if they are too “different” or “out there”. Usually, there are a few people ahead of the curve that spread the word of change to the masses, and often times are met with resistance or at times backlash. Take D Bnonn Tennant’s article for Smashing Magazine “16 Pixels: For Body Copy. Anything Less is a Costly Mistake”. Eliciting over 400 comments, this surely was one hot topic for debate amongst web designers. Many praised his article while others flat out argued against his concept, and of course some took the opportunity to expand upon his point a bit, adding pertinent points or debating details of his argument.

At first glance, his headline caught my eye. 16 pixels for body copy? It sounded so big at first. But in the coming months, coincidentally I found myself increasing body copy size in my own designs more and more, and liking the results. After years of designing at “smaller” font sizes, I realized that font sizes in my designs had jumped up more in two seasons then they had in several years. There tends to be a collective conscious in the web design community, fueled by hungry creative minds collaborating and sharing as we blaze trails and raise awareness for new movements. I found myself amidst a sector or early adopters of larger body sizes for body copy.

The article really had me thinking–why have font sizes been the way they were for so many years? Having started out in print design, large type and too tight leading were often signs of a novice. Half the battle of pushing students in art school typography class was to get them to make their fonts small enough, their leading large enough, and leave enough white space to make a design pleasing to the eye. Web is, a whole other ball game. It was an easy enough transition to increase my font sizes when I started designing for the web years ago. It made sense that our monitors are a further distance then a handheld printed piece and thus need to be larger. All this being said, I can’t help but wonder if that coveted smaller type that made for the desired aesthetic in print, somehow fueled some of the early smaller font sizes in web design.

I also believe that smaller fonts were a result of smaller monitors. As monitor sizes increased over time we were able to have more room to work with width wise. Lastly, I believe that one of the driving forces behind smaller text was this long standing notion of cramming everything above the “fold”, something that’s since been dismissed. Check out UX Myths for a nice lists of evidence–a humorous example and favorite of mine can be seen here. Surely, we put the most important stuff above the fold, but these days we’re not limited in that area.

I think the grey area is what left Tennant’s article so open to debate. Perhaps the controversial element and possibly the reason for the heated comments on Tennant’s article was over the black and white nature of the piece. He challenged readers to let him know if they were not convinced by the time they finished reading his article, that 16 pixels in the new minimum standard for body copy. So obviously intense scrutiny followed. To indulge inquiring designer’s, let’s take a look at some of the commenter’s criticisms:

One criticism is that his article didn’t take into account variations from font-to-font. One must consider x-height of a font as it relates to legibility–fonts differ in size from one another and what’s legible at one size in a font may not be ideal in that same size for another font.

Another person brought up the fact that the article didn’t address viewing on devices other than a pc–phones and tablets that are hand held closer closer than the distance at which a monitor typically sits. This criticism in particular, opens up the topic of how typography plays into responsive web design, which, while not a new concept (Recall the Dao of Web Design?) is something I think we’ll increasingly see this year. For those that haven’t already, I would check out Ethan Marcotte’s book Responsive Web Design.

Larger font sizes might not be what we’re used to seeing up until this point (but gosh, lately there’s been an explosion of responsive sites with nice, large, readable, tasteful text). My gut reaction to larger fonts is a good one. Blog sites in particular are so much easier to read with bigger type. Now that there is less fear of scrolling and the myth of the fold has been abolished, I’m looking forward to seeing and creating sites with easy-to-read text. After all, that’s part of good UI design, right? As web designers, we should continue to have a mind of our own and not rely on ‘rules’ so much as continue to think analytically and pay attention to UI research over time. Afterall, web standards are constantly evolving. We’ll be keeping in mind that sites are now viewed on numerous devices. As good UI becomes an increased focus the more the web evolves, we’ll be looking to meet the needs of this ever growing and shifting medium.

How do you stay on top of UI developments?