The ISA-Bus

One blog to bind them all.

Using fonts on websites

Okay…it’s a bad idea to spend too much time offline. You lose touch. When I wrote this article I wasn’t aware that font embedding (@font-face) is actually a generally supported standard since summer 2009. Sorry. Most of this post is true nevertheless, so I’ll leave it as it is.—

Fonts are still a big problem in web design. CSS (or HTML with Netscape’s font tag) provides the means to instruct the computer to display text in a certain font, but it provides no means to send the font along with it. Donald Knuth’s TEX, which was a big inspiration for HTML, came with its own fonts, one for each tag. Now, it may be argued that HTML is a standard and not a software, thus this approach was not feasible. But there is no good reason why a font should not be embedded into a webpage the way an image or a MIDI file can be embedded.

In the late 90s it was not uncommon to use exotic fonts and simply offer them to the visitors for download. I remember one site using Ogilvie not only for headers, but for all the text of the index pages. The problem with this approach is that there’s a good chance the visitors won’t download and install the font. Back when I was surfing Diablo sites a lot, I did have Exocet installed, which was used by about every other of those sites. Exocet has a sentimental value for Diablo players, and it’s a good font, well readable even at small sizes. It still gets downloaded quite a lot. But I don’t think I had Ogilvie installed for a longer period of time.

So, the way to go is to use fonts that are most likely on a visitor’s system. But which fonts are these? Luckily there is an answer, thanks to Code Style’s long-running font survey. The interesting result is that platform is not really much of a problem here. There are a number of Microsoft fonts that are present on practically every Windows PC, nearly every Mac, and on two out of three Linux boxes. The main reason for this are the core fonts for the web, ten fonts (plus Webdings) that Microsoft distributed for free from 1996 till 2002. A commendable initiative, but as usual Microsoft received no thanks for it.

Core fonts for the web

Of these ten fonts, Andale Mono is for some reason rarely present on Windows systems, I don’t have it on mine either, so I’m ignoring it. The other nine deserve some closer look. In the list below, I have set the name of each font to be displayed in that font, so you can immediately tell if you don’t have it (in this case, please comment):

  • Times New Roman
  • Arial
  • Verdana
  • Comic Sans MS
  • Georgia
  • Impact
  • Arial Black
  • Lucida Sans
  • Trebuchet MS

Times New Roman

On Windows, this is the default serif font, and every Windows browser since Netscape Navigator uses it as the default font for everything that isn’t monospace. Not necessarily a good choice, especially not in combination with the typical browser style sheet regarding sizes and weight. Using a sans-serif as standard, as Konqueror and Arachne do, is a better idea. In most Windows browsers, a web page with no style of its own looks plain ugly.

I sometimes use Times New Roman for pretty much everything on a page, but I treat sizes and weights differently. Serif fonts should always have lines of different thickness. In the Daggerfall Embassy, all text in standard size or below is bold. Another way to achieve this is to sized the text at least 115%. On the webcomics page of Astoria, both methods are used. The standard text is 115%, the blockquotes are bold. This is a bit of a hack, if you resize the page, it quickly looks weird.

But in both cases I do not make the headers bold. Times New Roman looks better the larger it is (try zooming a page that uses it), but does not look good when it is large and bold. On the Legal Crime page, the headers are bold, but they are not very large, and bright text on a dark background is a slightly different situation as well.

Arial

As Times New Roman is the standard serif font, Arial is the standard sans-serif font. I rarely use it. Only the Game Gallery is completely in Arial at the moment. I’m not sure why I chose it, probably just an experiment. I don’t think I use it anywhere else.

Verdana

Microsoft had two fonts designed by Matthew Carter especially for screen display, Verdana is one of them. It is a very good font, but it should not be too large. I usually set it to 85% (The Orchard) or even 80% (An Introduction to Arena). On Download Central, I simply set it to 10pt. There isn’t much reason to set font sizes relative any more, browsers can zoom a page in any case.

Verdana at standard size does not look very good, compare the alt.folklore.computers FAQ. Just zoom it out one step, and it looks a lot better. I like to combine Verdana text with large Times New Roman headers. If I use Verdana for everything, as on Download Central, I keep the headers relatively small.

There is one issue with Verdana, and that is that at any given size setting, it will be larger than the other fonts. Stephen Poley thinks that is a real problem; I, frankly, don’t.

Comic Sans MS

This font gets used a lot but also bashed a lot, probably because people like to bash things that Microsoft made. It’s a good font, slightly cursive yet easily readable at small sizes. I used it for everything except the navigation on Svatopluk’s Arcade, but I’m not too happy with the style sheet. I don’t think the font and the somewhat dreary colors go together well.

I’m not sure if it’s a good idea to have it in too many sizes either. It’s probably better for projects that don’t have a hierarchy of headers, and the headers should probably be either graphics (maybe using a brushstroke font) or use something like Arial Black or Impact, in a different color. It’s a font derived from comics, after all. Just look how comics handle headers.

Georgia

It’s a pity I wasn’t aware, until now, that Georgia is such a widespread font regardless of platform, I would have used it more. Like Verdana, it was designed by Matthew Carter, and the two fonts share some characteristics. Georgia is wider that Times New Roman, and it looks better at small sizes. Look at the header of the Beginner’s Programming Tutorial in QBasic and you’ll see that it doesn’t look so bad when it’s big and bold either. That’s all I can say at the moment, I’ll have to experiment a bit.

Impact

This is mainly a font for headers. The Greyzed WordPress theme, that I use for No Fanbois Allowed, has the first two header levels in Impact. Since it’s a very slender font, you can get a lot of text into a single line. Impact shouldn’t be set to bold, it is bold by default. A slight problem with this font is that no other one can replace it correctly if a visitor does not have it.

Arial Black

Another header font. This is Arial, but really bold. The usual bold versions of fonts are what is actually called demi-bold. This is the real thing, the lines are twice as thick as the standard Arial bold. A font for a newspaper header.

Lucida Sans and Trebuchet MS

I can’t say much about these two since I’ve never used them. Lucida Sans is obviously the sans-serif font most likely to be present on any given computer system, but I didn’t know that until just now. Again, I’ll have to experiment a bit. Stay tuned.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: