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?

Check out the survey

Conditional comments. Browser hacks. You might like them, but I don’t.

Why don’t I? Mainly because they present a unique set of instructions to one or many browsers but usually not to all of them at the same time. So what big deal? Right? I mean we’ve done that for years why, should we stop coding and presenting things for a particular browser?

Browser Hacks

You can do some pretty neat things with sending one set of instructions to one browser and another set to a different one. Take a look at the CSS Zen Garden design Gemination. It is presented as one design to IE and another design to the other major browsers. This uses CSS to set styles for one browser then over writes them for another browser. Now while this isn’t conditional comments, it still follows the same idea: one set of instructions is being sent to one browser and a different set for another.

Conditional Comments

Conditional comments are Microsoft’s way to target different versions of Internet Explorer. Jens Meiert presents rather strong arguments as to why conditional comments are bad. I won’t get into that side of things he does, but there is another side. This other side is what I call conditional CSS.

Conditional CSS

Do you ever run into a website that requires you to use a specific browser? I’m talking recently, not 10 years ago. Well I have… It wasn’t pretty. The web has grown up lately (in case you haven’t noticed) and browsers are getting better at rendering things. There is no longer a need for Internet Explorer or Firefox only websites.

Conditional Comments are mainly used for CSS. Browser hacks are based on the differences in the support of CSS by a specific rendering engine. A combination of conditional comments and browsers hacks is what I like to call conditional CSS (cCSS). cCSS is a way for you to deliver different instructions to different browsers. You shouldn’t ever need to do this. Browsers are now at a point where they’ve started to render things very closely the same. If you continue to use cCSS at some point in time it will begin to break sites that you’ve built in specific browsers.

Pixel perfection

One reason that people use cCSS is to make websites looks exactly the same in all the major browsers. Well they don’t need to be. I realize that this might be in contradiction from what I was just saying but hear me out. By not using cCSS you’ve ensured that your site will be more future compatible than ones with hacks. You’ve also removed the need for extra CSS that adds file weight. Think about this: do you want to download an extra CSS file for each browser only if you are using just one?

cCSS comes down to this: it’s an un-elegant way to produce websites. You should be able to build out sites with very little hacks and conditions. Be un-conditional. Take out your cCSS and start building better more standard websites.

When Eric Meyer first came out with his reset style sheet I jumped on it and put it in all the sites I was creating then. It caused some problems, it fixed others and it added about 800 bytes to the CSS. I was using it as a “silver bullet” to fix my layout problems. And I was wrong. I mis-read Eric’s post many times. What he was saying was that his reset CSS was a starting point for us to make our own or to customize his.

It makes me wonder: If I got that wrong, how many others did too? A colleague and friend of mine, Jon Zuck said that he didn’t like Eric’s method because it was like taking a shotgun to the styles. I’ve also had other conversations with people ranging to loving what Eric has done and to hating it.

After much thought I’ve created my own starting point. It covers most of the common elements I use in nearly every site I build. It is what I use as a base for a new site I create, though I end up changing it more often then not. I’ve uploaded a CSS and a XHTML file as examples of what I’ve done.