fonts on the web

Many people, and not merely we graphic designers and layout nuts, have a favorite font. I do; if you're looking at this page on a Macintosh, chances are it's rendered in Helvetica, a widely-used sans-serif typeface developed in 1957 by Swiss typeface designer Max Miedinger.

To me, Helvetica is sublime beauty, gently pinioned on the page. It became quite popular during the 1960s and 1970s, my formative years; Helvetica has been my favorite font always -- in fact, my weakness for typefaces probably began with my intrigue and beguilement by Helvetica. My eye seeks it out, and is always caught by it, like the orange Volkswagens I saw everywhere when I had a girlfriend who drove one.

Here on my machine, though, and on the machines of many others like me (we Windows users), it's rendered in Arial -- a nice typeface, but rather a moth compared to the delicate butterfly of Helvetica.

I suppose that different users see the page rendered in different typefaces is partly due to the economics of competition; as usual, we consumers are the ones left with the crumbs of consequence. So let's begin, first, with

A note about typefaces and fonts.

I've already used the two terms, "font," and "typeface," interchangeably, which is generally the case, although there is a distinction.
A "font" is a component of a "typeface;" when I speak of Helvetica, I'm referring to the Helvetica typeface, of which, for example, Helvetica Regular Italic is but a font, as would be Helvetica Bold, et cetera.
It's rather like all the chords in the key of G are fonts; the key of G is the typeface.

So when I'm talking about Helvetica keeping me awake at night when I was a boy, I'm talking about the Helvetica typeface, although, as the culture has blurred the distinction, so have I, and have always thought of Helvetica as "my font."

Having said all that, I'll likely continue to use the terms somewhat interchangeably, but will endeavor to look after the line; I'm sure it will always be clear what I mean.

Serif or Sans-Serif?

Sans-serif typefaces

First, we're clear what serifs are? Those are the little barbs at the tail end of letters in some typefaces; their function is to provide a gentle, horizontal anchor, like a soft rule, on a line of text in a block, to keep the reader's eye oriented on the line. Although they may appear to be merely an adornment, they have a purpose, and also give text a certain credibility, a whiff of the classic.

Sans-serif typefaces have been around for millenia, but became popular in contemporary usage in Europe in the late 19th and early 20th centuries. The unadorned lines represented part of the bold and clean aesthetic of adherents to principles such as the Bauhaus school; for that reason, sans-serif typefaces are also known, principally to American font foundries as "gothic," a euphemism for "German."

Although, as with printed media, in which the user's eye and mind are assisted by the serifs, that doesn't necessarily apply on the web.
Yes, we have all seen absurdly long line lengths, on pages which span the width of a huge screen; my eye could certainly benefit from some clue that would keep me on that line (proper design principles up front would have helped, had my web-developer-brother-or-sister been on the ball -- those things can be avoided -- try telling your content <div> to max out at six-hundred pixels wide, for instance...).

Fonts on the Web: Snag Number One

Computer monitors and screens, despite their amazing color capabilities and their extreme, super-model thinness, still can only render images at 72dots-per-inch (dpi), or perhaps as much as 96 dpi, but that's it. Even with the sharpest image, with each one of those about-6000 pixels per inch given a specific color, the resolution is only going to be so good, and that's it. With a large image, our minds can fill in the lack of crisp detail, but as an image gets smaller, the lack of resolution becomes apparent. Eventually, with something as small as 12pt type, the serifs become extraneous information, and begin to look wispy and render oddly. The typeface must serve the text; if the type looks horrid, the text doesn't stand much of a chance, does it?

For this reason, web pages are generally rendered in a sans-serif type, as this page is. Serif typefaces look fine with larger samples of text, such as headings, so they often appear there, on web pages (and as they do here... at least, as of this writing -- with a couple of little tweaks to the code, I can change all the typefaces throughout the site).

Also, the clean, streamlined look of a sans-serif font suits the medium in which the text is delivered; web pages rendered in serif fonts run the risk of appearing pretentious, while newspapers and books rendered in sans-serif fonts might appear to lack credibility. This is another reason why serif fonts suit headings on web pages; they carry just a bit more emphasis, like sergeants among the recruits.

Also, I like the emotional relationship that serif typefaces have with sans-serif typefaces; I devoted much to designing the typeface scheme of this site, with the use of both kinds of faces.

In the end, it would seem that the technology limits our choice among the two faces, but also, in the end, the technology is best suited by face we've had to choose, so the balance of the universe will have to look elsewhere for disruption.

Sans-serif fonts on the web it is.

But which font?

Fonts on the Web: Snag Number Two

The fundamental technology of the web is quite clever -- (generally) small files containing the pertinent data, the content to which we're interested in hyper-linking, along with the small amount of information the web browser requires to make the data available to you.

Text doesn't require all that much coding bandwidth, that many kilobytes (if that, even), to transmit. Word documents can run into larger file sizes due to the meta-data they contain: the formatting information.
With the web, however, the text is rendered in a typeface that didn't have to arrive along with the html file, like all the images did, but rather from among the fonts the user has installed on their machine.

For one, fonts would be rather tricky to have as web file accompaniments: they function by being a system component on a user's computer; for them to arrive with a web page and function to render the site, they'd have to install themselves on the user's machine, and that's the fundamental boundary of the interface with the web that must never be crossed; computers and browsers will not permit files to enter that can execute themselves like viruses, by entering the computer's headquarters and setting up shop.

For another, the font file would increase the amount of data that needs to be transmitted to render the page, and quick rendering is always the goal. Web developers, then, must write pages that alert the browser which fonts they'd prefer; the browser will go look in the user's system directory at the installed fonts, and take the first one from the list, and render the page with that.
If the html or css doesn't specify a font, all is not lost; the page will be rendered by whatever the browser considers the default font.

So, the implications of these two snags is that the typeface you select for your web page is going to be limited to the fonts the user has on their machine, and of those fonts, the serif faces likely won't do. Still, how many fonts do you have installed on your machine? Dozens? Hundreds? (I have a few hundred, but then -- I do design work, and need lots of resources). So the odds must be pretty good that you'll have my nifty font that I like so well?
Why is it you keep referring to the "handful of available fonts?"

Fonts on the Web: Snag Number Three

Although there are technically dozens of operating systems installed on computers everywhere, there are principally two in use by the general population: Windows and Macintosh.
The operating system, as you know (hey - you have sufficient savvy to find your way here -- we'll assume you know what's going on), arrives on your machine along with a font library, which you can access when generating word processing documents, or in graphics editors and things like that. These are your system fonts.

Both Windows and Macintosh have a number of fonts; seems to me that in the early days, when I had a Mac Classic, there were maybe twenty fonts on there? And a dozen or so on my first IBM PC, back in 1983?
Now, though, the system has a much larger picnic basket, apparently, and dozens, perhaps a hundred or more, fonts are included and installed on the user's machine.

The little challenge with which we must deal is that, of the many fonts available to either user, there aren't that many that cross over, and are available on both.

For example, I mentioned that my favorite typeface of them all is Helvetica.

Here's a sample:

really -- isn't it pretty? Helvetica is the standard sans-serif font installed with the Macintosh operating system (among many of them), and is the one generally specified by developers for standard text rendering. Lovely typeface.

Arial is the common sans-serif font installed with the Windows operating system;

Here's a sample:

I don't know if the sample is enough, but can you see it? Arial just doesn't have the lithe, graphic finesse that Helvetica has; rather a wrestler compared to a ballerina.
Still, it's the font I see the most -- I'm working on a Windows machine (by preference, thank you -- I am, I suppose, for all my gentle, nature-loving habits, somewhat of a techno-geek, and prefer the interface), and worse yet, don't even have Helvetica installed on any of my computers! Basically, I can't afford it -- or, have put my resources elsewhere. Or whatever.
But I don't have it, and I envy you who do. This site is intended to look best with Helvetica, although it looks pretty much just fine with Arial.

Both fonts have the best qualities we'd like from a sans-serif font: consistent line-weight and clean lines; nothing to distract us as we thread our information off the screen.

Other favorite sans-serif fonts include:
Frutiger Linotype is a commmercial font, and one I favor in graphic work.

Pretty sure Century Gothic is a standard Windows font; it's a nice one, but its friendly roundness can remind me of children's show hosts (pedophiles all, I am now quite certain) from my youth. I like it in small doses, though; rather like saffron, it has its place.

Franklin Gothic is a classic, and is a font in a large family of fonts available in the typeface, including:

Franklin Gothic Book
Franklin Gothic Book Italic
Franklin Gothic Book Condensed
Franklin Gothic Book Condensed SC
Franklin Gothic Book Condensed Italic
Franklin Gothic Book Compressed
Franklin Gothic Book Compressed Italic
Franklin Gothic Book Extra Compressed
Franklin Gothic Medium
Franklin Gothic Medium Italic
Franklin Gothic Medium Condensed
Franklin Gothic Medium Condensed SC
Franklin Gothic Medium Condensed Italic
Franklin Gothic Demi
Franklin Gothic Demi Italic
Franklin Gothic Demi Condensed
Franklin Gothic Demi Condensed Italic
Franklin Gothic Demi Compressed
Franklin Gothic Demi Compressed Italic
Franklin Gothic Heavy
Franklin Gothic Heavy Italic

One of the heftier sans-serif fonts, this one's a classic...

....and the same goes for this one.

Another favorite typeface; my logotype, over there at the upper left corner of this page, is rendered (with Photoshop, and presented as an image), as Eurostile.

Monospace fonts

These are the fonts used to render machine text, or text intended to suggest machine text (as, for instance, the code samples around this site). Most typefaces have varying degrees of width among the letters: a "w" is wider than an "i". However, with monospace fonts, as the name suggests, each letter in the typeface occupies the same width. This is convenient for reading lines of programming, and partly as a result, these fonts have entered our aesthetic world as represntatives of basic technological function, with no embellishment.

Naturally, however, that intrinsic emotional response is available to designers as a choice and as a tool; for instance, the background image on some pages of this site has large keywords, faintly rendered in highly-stylized monospace type, to suggest some of the organic underpinning -- the emotional content, if you will -- of these rudimentary technological artifacts, which must be given some regard; rather like the teenage dishwasher in a restaurant; you don't think about him, but he has a huge impact on the quality of your experience.

Here are a couple of samples of typical monospace fonts:

This one is absurdly common, as to be nearly vulgar (see what I mean?). It's how the code samples ought to be rendering, since I can depend on every machine on earth having this old standby font, and it's what I've specified in the code. Looks just like an old-school typewriter face, which is noble, I think.
As an interesting note, the "Lorem ipsum" text is conventional dummy text, used to fill spaces for which room is left for text, but for which the text has not yet been generated; a representative and meaningless example, as it's intended to be.
The same block of text has been in use, as stand-in dummy text, for about five hundred years, since the invention of movable type. Another noble quality -- must remember those roots.

A common sight for old-school Mac users; the default machine font there, as I recall. A nice font; quite utilitarian, and without the slight tang of ostentatiousness that Courier seems to carry at times.

A serif typeface commissioned by the British newspaper, The Times, in 1931, designed by Stanley Morison and Victor Lardent. It's a handsome typeface, I suppose, but it has become too cliché. by the way, did you know that "cliché" refers to a printing plate that is no longer vivid and crisp, having worn out from use? How appropriate. It's fine enough for printed matter, but I prefer something a little gentler. The most ubituitous font on the planet; it's everywhere, like rats are everywhere.

A group of old-style serif typefaces named for the punch-cutter Claude Garamond (c. 1480 � 1561).
Garamond is considered to be among the most legible and readable serif typefaces for use in printed media.

An old style serif typeface designed by Hermann Zapf in 1948.

A serif typeface designed by Morris Fuller Benton in 1919 serif typeface designed by Morris Fuller Benton in 1919.
Century Schoolbook is familiar to many in North America as being the typeface with which many children first learned to read.