A while ago I got the idea to do some research on font and their usage across the internet. I was trying to figure out what font or typefaces people use and why. To me this is rather interesting because if you have any background in design or typography you’ll know that type conveys meaning and emotion. Would this not be true about the web? Could the typeface of a site convey something about the author or the message they are trying to get across? Maybe something they were feeling when they had it designed? Or maybe there is a corporate style guide that the designer had to follow when building the site? Or maybe that style guide was made with the idea of conveying emotion?
Whew… that’s a lot of questions I have. I’m not got to even try to answer them because, frankly, I can’t. I don’t know what was going through the designers heads. What I can do is survey websites and present the results.
My initial survey was completed in early 2008 with about 100 sites. The sites I first selected were gleaned from the Alexa top 100 sites for the month of January 2008. Since I am from the US, speak English and am interested in western typefaces, I was only interested in English sites. It would be rather hard for me try to figure out different character sets other then Western/Latin. The rest of the sites I pulled were from sites I visit often.
This gave me a wide range of websites from categories of news and social network to retail and design. I figure that 100 sites or so of the whole internet would a fair sample to kick things off. Also I need some very highly and low trafficked sites to get a better idea of how people use type on the web.
I began by going into the CSS and pulling out the *, html and body selectors and seeing what those were set to. In a lot of cases one of those three selectors set the font for the entire site. Great! Job done! Well… sort of. Some sites didn’t have one of those selectors setting the font. So I had to dig some more. Some sites had it set on the p selector, some just had IDs and classes. I ended up going through lots of CSS, some of it nicely organized and some of it downright disgusting.
As anyone who has been working with CSS and browsers for a bit, you would know that for the best results you want to set more then one font in your CSS declarations. So seeing something like this was far from uncommon:
font-family:Arial, Helvetica, Verdana, sans-serif;
I collected all the font information I could because who knows it could be useful at some point. Most of the font stats in this post and in the survey are based on the first font.
The odd bits
While going through the sites I noticed was that some sites would use one type for headings and another type for body text and yet another for their footer. In the case of Coudal Partners out of Chicago, they use Gill Sans for their H1, Times for the rest of their headings and Verdana for most of everything else. Now this puts me in a tight spot. All three faces are in the site, but I can’t then lump a site into a category or group. It got me thinking about what people “would/should/could” be reading the most.
I settled on going with what a majority of the text was set to. In the case of Coudal I settled on Verdana. Why? Because my thought was thus: If I (the user) is going to read, I’m going to read the majority of the text, so I’m going to see that face the most. In turn Verdana was used for a majority of the text in this case. I followed this same thinking for all the other sites I collected data on.
So why did Coudal use three typefaces on their site? I’m not sure but I bet it has something to do with a question I asked before: Could the typeface of a site convey something about the author or the message the are trying to get across?
The interesting bits
Some of the more interesting bits I found were the unbalanced serif to sans-serif ratio. In a sample of 112 sites 8.93% or 10 sites used serif fonts. Of the sites that used sans-serif fonts Arial came out on top with 46 sites. 35 sites had 1 primary font and 2 secondary fonts. 27 had 4 total fonts set. This one amazed me: 1 site (reference.com) had 8 total fonts set.
"Lucida Sans Unicode", "Arial Unicode MS", "Lucida Sans", "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
This blew me away. Why would anyone want to set 8 fonts?