Fonts for web design: a primer | Hacker News Reader

Fonts for web design: a primer

dev.opera.com

45 pointslamnk21 comments

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.

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

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

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

Which probably infringes the copyright on the the fonts.

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.

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.

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")

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.

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

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

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.

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

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.

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.

Arial is the default sans on Windows, and Helvetica on Mac, so I'm not sure what "fugly font" you're talking about.

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.

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.

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.

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.

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)

> 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.

Reply on news.ycombinator.com