Apollo Hosting- Company Blog

Ah, type, root of the web since it's infancy, where there wasn't much else. You're reading type right now. The question is, how does it look to you? You might not be seeing the same thing as everyone else when you read this blog. For instance, do you have "Century Gothic" installed on your machine? It's not a terribly uncommon font, and I honestly don't know which of my various design apps installed it, but it's certainly not as universal as say, an "Arial." Instead of digging through a font list in Word or navigating through that scary "Windows" folder, here's an easy test. Does this blog look the same to you as it does in this screen capture?

If those titles look different, and look different even now as you're reading this, then you don't have the Century Gothic font. And that's too bad. As you can see, the titles look a lot better in Century Gothic. That's the problem most designers face, typographically speaking.

Web Type: Or How I Learned to Stop Worrying and Love the Arial

If you ever wondered why, typographically, everything on the web looks very similar, the reason is simple. Designers can only really count on users having a certain very common core set of fonts. These fonts are generally referred to as "web safe," meaning you can specify them and not have to worry that someone will be browsing without them. The list of "web safe" fonts is very, very short. As the Wikipedia article points out, the only completely "web safe" font specification is the generic type, "sans-serif", "serif", etc. These aren't "fonts", exactly, they're instructions to the web browser to render text using what it considers the best available font that fits the description "serif" or "sans-serif".

I doubt even hard core standard nuts opt for this, as what 2 browsers consider the best choice for these fonts will differ, sometimes wildly. It relinquishes control over a core design element, something few designers are comfortable doing. That leaves picking fonts that most people "probably" have. Microsoft's Core Fonts for the Web initiative, though no longer active, has resulted in a workable safe list. If nothing else, it's kind of a greatest-hits-of-the-web for fonts, featuring favorites like Arial, Times New Roman, and (ugh...) Comic Sans.

CSS (and HTML before it), provide a way to specify your font declarations in a way that allows them to "degrade gracefully", or at lest, degrade in a manner the designer controls. A favorite is:

font-family: Arial, Helvetica, sans-serif;

The font-family declaration orders the browser to first use Arial, common on both platforms, but primarily associated with Microsoft Windows. If Arial isn't available, use Helvetica, again, common on both, but primarily associated with Macintosh platforms. Finally, if neither are available, then, as a last resort, it's left up to the browser's discretion to choose a font.

Titles Need Not Apply

No one is going to recommend getting fancy with body text. It's generally a bad idea, so sticking with one or two web safe options for your core content is a good thing. Titles are another matter. They can provide a core visual component, lending to branding and recognition. Designers want to have distinctive titles, but, just like the titles in this blog, are forced to contend with an immutable fact. That fact is most users don't have the fonts the designers would like to use installed on their computers.

The basic option, exercised for a while, was simply to use graphical titles- GIFs or JPEGs of text rendered in a graphics program with the desired font. No worries about the font, as all the user is doing is looking at a picture. Though virtually bulletproof from an end-user perspective, it's not a great solution for SEO or usability.

Two techniques have arisen more recently to deal with the lack of accessibility and undesirability of purely graphic titles. The first is CSS-image replacement, which, through a variety of different techniques, employs CSS to show a graphic (featuring the fancy font of your dreams) to the user while still making the text of the title available to "alternative" browsers such as screen readers and those nice, fuzzy search engine spiders.

The second option works in a similar fashion, but uses Flash. A popular version is called sIFR, and it works on the same principal as CSS image replacement. Instead of images, it uses Flash to render titles in the font of choice. Again, the underlying text of the title is readable by screen readers and spiders alike.

CSS3 To the Rescue?

Both these options are "workarounds". The new CSS3 spec includes a function called "@font-face." This declaration allows a designer to specify a font file on the web server for the browser to download, just like an image file, and use it to display the specified text exactly as intended. No GIFs or SWFs need apply. Just apply the style to your text and you're done. Simple, but...

Hardly any browsers, and none you've actually heard of, support this new declaration yet. It might be a while before anyone sees this functionality hit IE or Firefox. It might never hit either one, as there some "underlying issues" to fonts that could cause major browser designers to forgo @font-face, no matter how useful it might be.

This is the big one: did you know you have to pay for fonts? Well, a lot of them, anyway. I discovered this years ago, in my exuberant, self-taught youth. Admittedly I operated for a while under the idea that fonts were so "basic" they didn't cost anything. They were just different ways of displaying the same words; find one you liked and run with it. I have since learned otherwise, of course.

Many of the ones downloaded from popular online font repositories like fonts.com and 1001fonts have stipulations in their licenses that they must be bought for use in professional projects, or any kind of project that will see the light of day beyond a bedroom in your parent's house. So, the question becomes, what happens to these downloaded fonts when the user is done with the site. Font designers wont be particularly pleased if @font-face simply becomes a mass distribution system for their work.