Something to keep in mind with web fonts is that they don’t work like traditional print fonts. If I design a print brochure and choose (for example) Helvetica and Times New Roman at certain sizes and weights (bold, extra-bold, etc.), that’s how it will look – the print shop guarantees the printed brochure will look exactly the way my design indicates.

Web fonts are a completely different animal. I shall now write half a book explaining the whole thing in completely unnecessary detail. (It’s what I do.)

There are a million different fonts and typestyles available now, and its tempting to use them with web design – but I can’t. When a website loads on your browser, it doesn’t actually send any fonts – the code depends on the user having the same font on their machine as the designer had on his machine. The code basically says, “Okay, this paragraph in the web page this guy’s looking at is supposed to be done in Helvetica. Go on his computer and see if he has Helvetica. If he doesn’t, go ahead and use Arial or Trebuchet or just pick something close.” Which means as a designer I’m always aware that the web site the little old lady in Pasadena may see on her 15-year-old Dell may be different than what I’m seeing here in Iowa with my fancy Macintosh, depending on what fonts she has on her system.

So… Over the years things have shaken down a bit to the point where there’s about ten or twelve “Web Safe” fonts that are now common to every computer. Until very recently I was limited to using only those few fonts – and even with those I had to code in alternates (instead of just using Times New Roman, I’d have to list what fonts I wanted the user’s computer to default to if they didn’t happen to have Times New Roman, and list what style to default to if they didn’t have any fonts on my list – “Times New Roman, Times, Garamond, serif”). That’s why almost all web sites kinda sorta look alike in some ways.

Just recently, in the past year and a half or so, Adobe started rolling out “web fonts” that are kept on a server and are available 24/7. The software I use (Muse) will now code a website to say, “Okay, we want the user to see this paragraph in Questrial font, so before you put this page on the screen, go to Adobe’s font server and download that font real quick in the background, THEN show the page on the screen. If for some reason Adobe’s font server is slow or doesn’t work, show the user the site using plain old Arial instead as its a Web Safe font.” This system opens things up a LOT for designers – we now have hundreds of fonts to use with reasonable confidence rather than the same ten or twelve old Web Safe fonts we had in the past.

But it still doesn’t guarantee that every user who looks at a web site will see it exactly the way we design it… Each browser renders code differently. Internet Explorer, Firefox, Chrome, Safari, Opera – there are literally hundreds of others – all see things uniquely. Almost all browsers follow a certain set of rules – with Internet Explorer being the big, glaring exception. (If you look at the code behind a website, you’ll often see the tag “IE Hack” after a command followed by the exact same command written in different code that Internet Explorer can understand. It’s a pain in the…) So quite often folks who use Internet Explorer will see a completely different version of a web site than everyone else in the world.

And on top of that, each individual user often customizes their browsers themselves as well. Some people have their browsers show every site in big huge type so it’s easier to read, other people like to keep their browser windows small and narrow, some like it to be full-screen… It gets messy!

So, I’m always ready when I surf the web on someone else’s computer and trip over a site I designed – and it looks way, way different than it does on my computer.