Font Survey
The reason
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.
The start
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.
The process
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?
Interesting. Not very many sans-serif fonts. It would be interesting to compare these stats with just stats on headings. Of course sometimes headings are images (so the site can use fancy fonts), but I wonder if there is a higher percentage of sans-serif in headings than in body text.
Comment by Zach — July 16, 2008 @ 3:34 pm
According to an article I read ages ago the Verdana font is the best one to use for readability on websites.may have been on Jacob Neilson’s site but not sure…
Comment by Histrel — July 16, 2008 @ 4:04 pm
@Histrel Yes a lot of studies have been done about readability, Jeff Atwood has a great one over at coding horror. I wasn’t really doing of study of how readable fonts were but rather their usage.
It seems that most general use sites use sans-serif and sites that are made by great web designers (people who know a lot about typography) use serif fonts. That is something I’m planning on getting into later in this project though.
Comment by ajaswa — July 16, 2008 @ 4:15 pm
I think usage is the key to your learnings. I know for a fact the reason “serifs” are widely used in traditional print is to guide the reader through the text, making the body text easier to read. I’m willing to say the same reasoning applies to web fonts. Thus, a sans-serif font is more legible on a computer screen. I think sans serif is a little more acceptable in print in Europe tho. But not more common than the serif. I would also lend your results to trends and majority usage on the web. Not to mention 99% of sites use sans serif fonts for their body text and probably 99% body text in print in serif. It’s just easier to read and the standard way to do it. Unless you’re trying to be artsy of course.
Comment by lucien frelin — July 17, 2008 @ 9:49 am
Wow! I’m really impressed with the degree of research. I would suggest though, that authenticjobs.com maybe should be better listed with the san-serif fonts, as the body text is overridden and what you see on the screen is mostly sans-serif.
I agree with Lucien about the de facto standard of serif for print and san-serif for screen. SS is definitely easier to read at a small font size on screen than serif.
I was surprised that so many designers use serif fonts… Even Andy Rutledge. Interesting. Not surprised that Georgia was more common since it was created specifically to be more legible (with a taller x-height) than Times New Roman.
Something that might be interesting for future research would be how many sites use a serif for headings and sans-serif for body text (and vice-versa) compared to how many are consistently serif or sans-serif.
Personally, I feel the expressiveness of serif fonts only becomes visible on screen at larger sizes, e.g. 20px, etc. when the contrast between thick and thin strokes is apparent. Hence, I often use serifs for headings, but never for body text.
Comment by Jon — July 18, 2008 @ 1:31 pm
@Jon As far as Authenticjobs.com goes: On the home page there are few places what show the Georgia font, however take a look at a listing you’ll see its nearly everywhere.
Comment by ajaswa — July 21, 2008 @ 8:29 am
Ah, yeah. At least you know I wasn’t job searching!
Comment by Jon — July 21, 2008 @ 9:26 am