Font (typeface) selection for the Web? [closed]

Question

I got to thinking about font (typeface) selection today. A site I did for work came with this professsionally done style guide that detailed colour selection, font selection, spacing, etc. It's the first time I'd seen anything like that but I have to admit, what they'd chosen did look good.

Now I've previously read about colour theory so I know about complementary colours and choosing colours schemes with say 1, 2 or 3 different colours. So I'm fine with that side of things for my pet project anyway.

But I haven't really seen anything about typeface selection in the Web context. I found some discussions on fonts for printing where you had the option of downloading and including custom fonts. That's not an option on the Web. You're limited to what browsers (or, rather, operating systems) support. I'd be interested in reading something about what IE and Firefox support on Windows and Mac (sorry, Linux is too marginal to be a consideration for anything other than CSS font-family fallback) and what those fonts convey: whether they're serious, formal, casual, inviting, etc.

Anyone know anything like this?

Answer 1

What you are looking for is web safe fonts to use in your CSS.

The site CSS Font Stacks seems to be the best resource that is kept updated.

A web safe font is a font that is commonly already installed on a given user's operating system so it doesn't require the user to download a font file when viewing the website. Using a web safe font has the advantage of allowing a website to load faster as it does not require an additional download.

The downside of using a web safe font is that the font may be available on one user's operating system but not another user's. A solution to this problem is to use a font stack which the site above provides. A font stack is a list of similar fonts so that if a user doesn't have a font on the list then they can use a similar font later on the list.

Answer 2

This is an excellent reference on web typography I keep coming back to. Covers the basics of typography and how they apply to the web.