Fonts for web design: a primer

http://dev.opera.com/articles/view/fonts-for-web-design-a-primer/

by lamnk • 17 years ago

45 21 17 years ago

dev.opera.com

russell• 17 years ago

There are lots of good articles out there on font choices for the web and this seems to be a reasonable, if cursory, introduction. I personally dont care for either Times and prefer Georgia for a serif typeface that works for both monitors and print. Verdana is a good choice for headings.

If you havent thought about fonts, I recommend spending an afternoon googling around. There are lots of good articles. Font selection is one of he areas where a lot of web developers fall down, usually by using too many or ones with poor readability.

psadauskas• 17 years ago

I use the font stack builder here[1] to make css font stacks 10-12 fonts long, to cover the fonts that look best under each of windows, linux, and osx. They're not identical, sure, but I find that for headers and body copy, as long as they're close, that's fine with me.

[1] http://www.codestyle.org/servlets/FontStack

erlanger5• 17 years ago

I find myself deferring to the OS more and more these days, specifying simply "sans-serif" and "serif" where the precision doesn't matter. A bonus is that your page will listen to browser preferences.

alabut• 17 years ago

usually by using too many or ones with poor readability

Very true, and if I had to distill the advice in the article down, most developers would go far by starting with these guidelines:

1) only use serifs for headings.

2) only use sans-serifs for body copy.

3) keep the number of different fonts on the page under 3 at most, including the logo and any other graphic flourishes.

ugh2• 17 years ago

Guidelines one and two have no empirical support. It seems to be the case that choice of font is merely a aesthetic decision.

See:

http://scholar.lib.vt.edu/theses/available/etd-102999-110544... (PDF)

http://www.laurenscharff.com/research/AHNCUR.html

http://sigchi.org/chi95/Electronic/documnts/intpost/tst_bdy....

http://www.surl.org/usabilitynews/22/font.asp

https://eldorado.tu-dortmund.de/dspace/bitstream/2003/24419/... (PDF, German)

http://www.designtagebuch.de/die-gefuehlte-lesbarkeit/ (German)

erlanger5• 17 years ago

> Verdana is a good choice for headings.

A font designed to be readable at small sizes is good for headings? I seldom mix sans, but I usually will use an Arial heading with Verdana copy. Verdana becomes very unsightly above 14px, in my opinion.

simplegeek2• 17 years ago

I don't understand one thing & I will really appreciate if someone can answer this for me. Suppose, I've made a PDF for my customers and PDF uses either Calibri or Gerogia then will these fonts be available on all platforms? I mean will customers be able to read the PDF that uses Calibri or Georgia on all OSs? Please enlighten me. Thanks.

mncaudill• 17 years ago

Fonts can be embedded into PDFs, if I remember correctly. Most PDF creators handle this for you automatically by default.

simplegeek2• 17 years ago

Ah, I see, I had no clue about this. Thanks.

grinich• 17 years ago

They can also be fairly easily pulled out of PDFs, if you need it for another purpose.

erlanger5• 17 years ago

You should always put a PDF with non-standard fonts through Adobe's "preflight" (it's part of Acrobat) or an equivalent processor. It will tell you if the fonts will be embedded, and an assortment of other useful things.

tel• 17 years ago

Unlike web typography, PDFs usually use font embedding to ensure that they display "identically" on all platforms. To do this, some subset of the intended font is included in the PDF file.

Due to this habit, you probably wouldn't think of a PDF as using Calibri or Georgia. It could use one, the other, or both. Font choice becomes a static thing.

robotrout• 17 years ago

All right, answer me this question.

If there's anything that proves that you're hip and cool and just the smartest thing since Einstein, I'd guess that even more than trashing PHP, it's got to be trashing Comic Sans.

Why does Comic Sans get berated for "being used too often", when nobody says that Times or Arial, for example, are used too often?

Is it trashed for "being ugly"? It can't be "ugly" and "used too often" at the same time, any more than an ugly house can be photographed too often. Also, what does "ugly" mean? Illegible?

Personally, when I'm judging how legible a font is (how easy it is to read when it's small, for example), I have to say that Comic Sans does very well.

Perhaps it's a polarizing design, where some people just hate it, and it's better to bore everybody than to cause that level of heartburn to those of a more sensitive persuasion. Is that it? If so, who are these people, exactly? The general public, I think, really has more important things to worry about than somebodies font choice, so who are these delicate flowers that we're protecting?

I would just be interested in knowing where this animosity is coming from, and whether it's based on anything real, or is it like metro-sexual fashion preference, and it's only based on "what's in"? (Or in this case, "what's out")

ugh2• 17 years ago

Typography has a long history and tradition. Rules that might seem pedantic to the outsider. But those rules and traditions give anything touched by someone who know’s what she is doing that special polish. “So what?” you might ask, but sometimes it’s nice to see that someone cares about small things. Like correct quotation marks.

Truth is, there is nothing wrong with Comic Sans as a font. It is perfectly alright to use it for your children’s birthday invitations. Or if you are a peditrician for your door sign. There are nicer fonts for such jobs but if you don’t want to spend any money, using Comic Sans is perfectly alright.

But you cannot just use any font for any job. Well, you can, and Comic Sans may be every bit as legible as Verdana. But there is always a aesthetic side to the question, which font you should use. It’s not just about legibility. It’s about using the right tool for the right job. Comic Sans was never intended to be used in menus of classy restaurants. You just don’t do that. And in that respect, Comic Sans has just become overused. Comic Sans may be the most visible sign that it’s no longer professionals who are in charge of picking fonts. I (not being a professional myself) don’t think that is such a huge problem. But it would be really nice if the general public knew a little bit more about typography so that everything’s not lost.

pbhjpbhj5• 17 years ago

"Comic Sans was never intended to be used in menus of classy restaurants."

No, they must use Vivaldi, ditto wedding invitations. ;0)>

Fonts for web design: a primer

Related Stories