5 ms·

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

by russell 17y 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 17y 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 http://www.codestyle.org/servlets/FontStack
- erlanger 17y 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.
  - pbhjpbhj 17y ago
    I'd speculate that few users know that a preferred font is set by the browser and will simply think the designer set a fugly font or at least set the one most other pages seem to use.
    - erlanger 17y ago
      Arial is the default sans on Windows, and Helvetica on Mac, so I'm not sure what "fugly font" you're talking about.
      - pbhjpbhj 17y ago
        I was meaning if the designer sets "sans" (or serif or fantasy, etc.) then the user doesn't know the origin of the actual font choice (their browser default and OS installation) but will assume that the specific font used was that chosen by the designer. Most users won't compare a page on multiple OS, those that do may still not realise the source of the displayed font (they could assume the designer chose different fonts for different browsers or OS, say) and so would not know how to alter which font is used.
        erlanger 17y ago
        There are many situations when DejaVu Sans, Helvetica, and Arial look equally good. The print designer notion that the design must look identical everywhere is obsolete for the web, which remains a medium controlled by the user. Jakob Nielsen has written a ton on this subject.
        pbhjpbhj 17y ago
        Was that in response to my comment - I'm intensely aware of the pitfalls print designers fall into having remonstrated with several against static design and over specification of visuals. Nielsen is good (perhaps a tiny touch purist for me), I seldom disagree, however, with the overarching theme of the Alertbox posts. The web in theory is a user-controlled medium, in practice it is controlled by a mixture of web designers and browser makers; browser defaults of appearance and behaviour are pretty convergent. Like I intimated, the common user barely knows the term "browser" never mind where the font settings are. Whilst one can overload a pages CSS with one's own stylesheet nobody appears to do that.
alabut 17y 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.
- ugh 17y 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/unrestricted/WeisenmillerDissertation.pdf http://scholar.lib.vt.edu/theses/available/etd-102999-110544... (PDF) http://www.laurenscharff.com/research/AHNCUR.html http://www.laurenscharff.com/research/AHNCUR.html http://sigchi.org/chi95/Electronic/documnts/intpost/tst_bdy.htm http://sigchi.org/chi95/Electronic/documnts/intpost/tst_bdy.... http://www.surl.org/usabilitynews/22/font.asp http://www.surl.org/usabilitynews/22/font.asp https://eldorado.tu-dortmund.de/dspace/bitstream/2003/24419/2/dissertation_liebig.pdf https://eldorado.tu-dortmund.de/dspace/bitstream/2003/24419/... (PDF, German) http://www.designtagebuch.de/die-gefuehlte-lesbarkeit/ http://www.designtagebuch.de/die-gefuehlte-lesbarkeit/ (German)
erlanger 17y 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.

by russell 17y ago

psadauskas 17y 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 http://www.codestyle.org/servlets/FontStack

erlanger 17y 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.
- pbhjpbhj 17y ago
  I'd speculate that few users know that a preferred font is set by the browser and will simply think the designer set a fugly font or at least set the one most other pages seem to use.
  - erlanger 17y ago
    Arial is the default sans on Windows, and Helvetica on Mac, so I'm not sure what "fugly font" you're talking about.
    - pbhjpbhj 17y ago
      I was meaning if the designer sets "sans" (or serif or fantasy, etc.) then the user doesn't know the origin of the actual font choice (their browser default and OS installation) but will assume that the specific font used was that chosen by the designer. Most users won't compare a page on multiple OS, those that do may still not realise the source of the displayed font (they could assume the designer chose different fonts for different browsers or OS, say) and so would not know how to alter which font is used.
      - erlanger 17y ago
        There are many situations when DejaVu Sans, Helvetica, and Arial look equally good. The print designer notion that the design must look identical everywhere is obsolete for the web, which remains a medium controlled by the user. Jakob Nielsen has written a ton on this subject.
        pbhjpbhj 17y ago
        Was that in response to my comment - I'm intensely aware of the pitfalls print designers fall into having remonstrated with several against static design and over specification of visuals. Nielsen is good (perhaps a tiny touch purist for me), I seldom disagree, however, with the overarching theme of the Alertbox posts. The web in theory is a user-controlled medium, in practice it is controlled by a mixture of web designers and browser makers; browser defaults of appearance and behaviour are pretty convergent. Like I intimated, the common user barely knows the term "browser" never mind where the font settings are. Whilst one can overload a pages CSS with one's own stylesheet nobody appears to do that.

alabut 17y 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.

ugh 17y 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/unrestricted/WeisenmillerDissertation.pdf http://scholar.lib.vt.edu/theses/available/etd-102999-110544... (PDF) http://www.laurenscharff.com/research/AHNCUR.html http://www.laurenscharff.com/research/AHNCUR.html http://sigchi.org/chi95/Electronic/documnts/intpost/tst_bdy.htm http://sigchi.org/chi95/Electronic/documnts/intpost/tst_bdy.... http://www.surl.org/usabilitynews/22/font.asp http://www.surl.org/usabilitynews/22/font.asp https://eldorado.tu-dortmund.de/dspace/bitstream/2003/24419/2/dissertation_liebig.pdf https://eldorado.tu-dortmund.de/dspace/bitstream/2003/24419/... (PDF, German) http://www.designtagebuch.de/die-gefuehlte-lesbarkeit/ http://www.designtagebuch.de/die-gefuehlte-lesbarkeit/ (German)

erlanger 17y 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.