Web Log Costa Blanca

All fonts used to have serifs. The first sans-serif font appeared in 1816, but as a novelty, and until halfway through the twentieth century people only used sans-serif fonts for titles and decorative effects.

They are now widely used for ordinary reading text. On the Web, as I mentioned in yesterday’s post, they are far and away the most common kind of font.

But are they really as legible as serif fonts? I sometimes wonder if the well-known fact that people scan Web pages rather than read them isn’t in part due to the fact that sans-serif fonts remain a tiny bit harder to read at any speed.

Whether that’s true or not, canny Web designers lay out pages for scanning rather than reading, and pick fonts which enhance their usability. The fundamental things apply.

To sse the effects of different fonts on the same text, you might like to take my Spanish Journey, a trip through a set of identical home pages using different designs with different fonts, from Times Roman to Comic Sans and beyond (because I make some use of Flash).

Serif fonts have small strokes at the end of the main strokes of each character. (Sans-serif fonts don’t.) You can see them fairly easily even in my small illustration, in the word “Serifs”. You can’t see them in the words you are reading.

Many twentieth-century experimental studies suggest that serif fonts are easier to read on the printed page. More recent studies suggest that sans-serif fonts are easier to read on a computer monitor. However, these studies were mostly carried out before monitors and graphics cards reached their present high levels of definition. (Older configurations blurred characters with serifs.) And many printed books use sans-serif fonts throughout.

I suggest that this is an area for the designer’s judgment. Look at each available font, and decide the impression each one creates. On a test page, put up a paragraph in every single available font. Which one will work best on the site you are designing?

I mainly use sans-serif fonts, especially Verdana (designed for the Web, and probably its most ubiquitous font). They tend not to draw attention to themselves (i.e., only other designers notice). However, I do occasionally use a serif font.

For the Calpe bookshop Librería Europa, I set a font-family of ‘Book Antiqua’, Palatino, serif. Book Antiqua and Palatino are almost indistinguishable, and one or the other can be found on almost every Web user’s computer. I liked the slightly ‘bookish’ air it gave the site’s few pages. What do you think?

Actually, there are supposed to be five basic font families. As well as the four I listed in my last post, there is a family called “fantasy.” What qualifies a font to be included in this family? The answer is: not belonging in any of the first four. In other words, it’s just a sweeper, and no designer would use it unless the aim was to produce random effects on different visitors’ computers. We can ignore it.

The list of eleven more detailed options I gave is my own, designed to make sure that any text that I am responsible for appears with some sort of similarity across platforms. Some would add Century Gothic and Franklin Gothic to the list, since they appear on most PC and Macs. (They are both sans-serif fonts.) And for a more comprehensive list, with visual examples, have a look at this popular list of “browser-safe fonts.”

In the print world a typeface is a set of printable characters that go together, such as Times Roman (designed by Stanley Morison in 1931) or Helvetica (designed by Max Miedinger in 1957). A font is a particular size of typeface, such as 12-point Times Roman, or 11-point Helvetica. For some reason—probably because it’s a shorter word—the computer world uses font to mean typeface. I’ll do the same. Font is the term used in the Cascading Style Sheets specification, so there’s no point in trying to keep the old printers’ distinction alive.

Designers can and do create new typefaces (sorry, fonts) all the time. But they won’t work on the Web unless they are already installed on every visitor’s computer.

I hope you didn’t let that disturbing fact glide past you. Yes, the only fonts in which a visitor can see normal text are fonts installed on that visitor’s own machine. I came across a “tutorial page” a couple of years ago, in which the page author gave some examples of fonts. “This is BigBear font,” he said. “This is MiddleBear font. This is LittleBear font.” (Or whatever.) He clearly didn’t realise that all three would come up in my browser as Times New Roman (Microsoft’s version of Stanley Morison). I didn’t have his fonts installed on my machine.

What a designer can do is incorporate special fonts in images. This is fine for headers and side bars and so on—but hopeless for pages where there is a lot of text or the text needs occasional revision. If you want to add or change a word in ordinary text, it takes a second. If it’s in an image, you have to re-design the whole image.

For Flash animations and presentations, you can also use any font of your choice. Flash will download all the characters you need onto your visitor’s computer. But again, this takes time, and would not be the solution of choice for typical text.

So what, as a designer, are you left with? Which fonts are installed on every computer? (more…)

In my last post, I referred airily to ‘design elements.’ It occurs to me that not everyone appreciates that Web design is more than a matter of layout and colour schemes. Every single element of a Web page needs to be designed in its own right.

I am particularly conscious of this when I talk to clients who seem to think that, once you have some material, designing a Web site is a pretty automatic process—something a business person might entrust to a competent secretary.

So I thought it would be worth while running through all the elements that need to be designed, to highlight both the choices that have to be made and the visual experiments that have to be carried out.

In my next post, I’ll start with the most obvious element, the words on the Web page—text.

For browsing the Internet, do you use Firefox? (If not, why not?) If you do, here is a simple way of checking for last-century design practices.

Pick a page from the site you want to check. Click on the View menu, then select Page Style > No Style. A modern professional site will immediately transform itself into a vertical list of design elements, without styling or layout.

You can try it on this site, this page, right now. I designed the local bits of this, but the overall look and layout is from WordPress—a twenty-first century enterprise if there ever was one.

This site will change, in obvious ways. If the site you pick stays much the same, then it has been designed by people stuck in the twentieth century, using toy tools made for amateurs and cowboys. Don’t let them anywhere near your money.

There is probably a way of carrying out this check using Internet Explorer 7. But since Microsoft invaded my copy with Spanish—see my post of the 19th of May this year—I can’t find special options like this.