Typography and User Interfaces

by Krishna on October 20, 2011

Google’s newest release of Android, Ice Cream Sandwich, has a new font called Roboto. There has been a minor controversy as Roboto seems very much like Helvetica which, being copyrighted, Google cannot bundle along with the open source Android. And there has been some criticism of the font itself.

For programmers in the past, these discussions about font faces would have seemed esoteric. It was not long ago that user entry screens used mono-spaced fonts. Command-line programs had a prompt, the user entered some text and some reply comes back, all with white text on a black background. Then we had GUI screens, but there were also Windows and Mac standards and so everyone’s programs looked like everyone else’s. Even the programs that dealt with print work mostly followed these standards.

When the web came along, programmers found that they could chose any color and any font they wanted, and for a brief while, everyone went mad with throwing colors at the screen. Those were the days of ubiquitous Flash websites as businesses thought that the web = marketing brochure (something that still lives on in restaurant websites). As sanity retained, people went back to boring. The browser and operating system fragmentation meant that you were restricted to a few fonts that you knew existed on everyone’s computer (Arial, Times New Roman). Verdana was hot at one point and I remember wondering if it existed on different computers.

Well, the times are changing. The most important development is the high resolution on smaller computing devices like the smartphone. In the old 800 x 600 resolution world on a 14″ monitor, fonts didn’t make much of a difference. Jeff Atwood, in a 2007 article, explains the difference in font rendering between Microsoft and Apple. Apple favors accuracy of font rendering which can hinder readability at low resolutions. But today you have an iPhone which has 960-by-640-pixel resolution at 326 ppi on a 3.5 inch (diagonal) display. That is a fundamentally different world. And how your font looks like and how it is rendered matters a lot because users can see the difference.

Now, taste differs from people to people, but there are always general trends. The “Comic Sans” font is called so because it implies fun and mischief to most people. So in today’s world, it behooves programmers to understand what kinds of fonts appeal to people and which typefaces are suited for what environments. What kind of fonts should you use for headers? Or even different kinds of headers? What fonts for text that is displayed in paragraphs? When should you use bold, italics and underline? What colors should you choose and what should you stay away from?

In the past, these kind of decisions were the realm of designers, not programmers. And I suppose with development of large websites that attract lots of traffic, you could have dedicated designers who pay attention to these things. But there are many websites and web applications that are developed with little involvement from designers.  If programmers could educate themselves about typography, there would be more beautiful-looking and readable applications.

Comments on this entry are closed.

{ 1 trackback }

Previous post:

Next post: