CSS font stacks article

[Frode Bo Helland]

This topic was imported from the Typophile platform

A bunch of years to late, but still: Here's my article on CSS font stacks.
I'd love your opinions on it. I'm not a native English speaker, so please correct my language.

Attachment	Size
font_stack_article.pdf	127.15 KB

[aaronbell]

Good work! You're providing a really good summary of what fonts are available where and multiple different options for font-stacks. The one thing I would really like to see are examples of the fonts in titling and body copy, since some stacks sit better in one or the other.

One of the things that I have noticed with these font stacks are that the fonts often set wider or heavier than one another, even at the same font size, so being able to predict those differences would be useful. Here are some more sites that I've found useful:

http://www.sitepoint.com/article/eight-definitive-font-stacks/

http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/

http://unitinteractive.com/blog/blog-images/BetterFontStacks.pdf

But overall, it looks good!

[aaronbell]

Oh, and also something fun. Apparently Firefox 3.5's implementation of @font-face also makes use of the idea of stacks to help save on page weight:

http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/

Interesting to consider!

[Frode Bo Helland]

Hi Aaron. I intend something like that to be the follow-up. Hopefully a few different text sizes (9-12 px) with a display size (24px). It'll take a lot of work, especially with the Linux fonts.

[joeclark]

Font names in CSS declarations must be enclosed in quotation marks if they include a space character, hence font-family: Franklin Gothic is illegal (though browsers quite likely would accept it and do what you intended).

—
Joe Clark
http://joeclark.org/

[Frode Bo Helland]

Thank you Joe. I'll make sure to fix that up for the final version.

[Frode Bo Helland]

Shouldn't that be inch marks, btw?

[Frode Bo Helland]

If you can spare a few minutes to help me out with some screen shots of the html files listed in the adress below, I will be very grateful. I need screen shots from different web browsers and platforms to see how the fonts appear. Fonts not installed on your system will display as a monospaced font.

http://www.frodehelland.com/css_font_stacks

Mail me at: frodefrodefrode (at) gmail.com

Thanks!

[nina]

I don't guess you need another OSX/Firefox user's screenshots…

You might want to use one of those screenshot factories, like browsershots.org. That way you can quickly get comprehensive coverage of a ton of OS/browser configurations. I use such sites quite extensively for testing web designs FWIW.

[Frode Bo Helland]

I need the screenshots from computers where the actual fonts are installed, doesn't I?

[nina]

Oh, I thought you wanted to get a reasonably large sampling to see how likely all these fonts are to be installed on which browser/platform?

[paragraph]

I am getting a lot of Courier, probably because I run FEX and only activate the fonts I need ...

[Frode Bo Helland]

Maybe I didn't explain good enough. Doing a survey on typophile would never reflect the fonts available to the rest of the world :) I'm trying to get samples of the fonts (and how they look with different rendering) to accompany my article.

[kentlew]

I'm guessing you don't want a bunch of screenshots in which nearly everything is displayed in Lucida Grande because I don't keep any, except the most essential or basic, of those system fonts loaded, right?

[Frode Bo Helland]

Have no use for those :) I have screenshots from Firefox and Safari running on OSX, I guess Windows won't be a big problem. Linux on the other hand.

[nina]

Sorry Frode, then I did indeed misunderstand you.
I've only got OSX (and emulated Windows) :-\

[Theunis de Jong]

Just sent the shots from IE7, running on a real Windows XP machine.

My home system is a few years older, perhaps I can find a few minutes to check if they are the same over there.

[Frode Bo Helland]

Thanks a lot!

[alexfjelldal]

Great work! this is something i am too lazy to make on my own, but always have missed... The article is excellent.

Bra jobba!!

Alex

/////////////////////////
www.alexanderfjelldal.net

[Frode Bo Helland]

Takk Alexander!

[Frode Bo Helland]

Any of ye old crabs sport Microsoft Office 08 (OSX or Windows)?

[Don McCahill]

Frode

There are some mistakes in your text. I have identified and corrected the following:

Web browsers depend on the users' own

a list of typefaces where one takes over where the previous failed

same way we use them in print is on its way

[Frode Bo Helland]

Thanks Don. I've already corrected the top two. I'll look into the last one.

[Frode Bo Helland]

Hi guys. I've been able to get hold of samples from Safari/Firefox in OSX (including the Microsoft Office 08 fonts), Firefox in Windows (with Cleartype) and to some extent Firefox on a Linux machine (still missing some fonts).

I'm still trying to get hold of these:

• Samples from earlier Safari editions (on Windows). It uses it's own rendering engine. Does any of you have it running?

• I also need samples from Windows (Firefox or IE) without Cleartype.

Thank you for all the help so far!