CSS font stacks article

Primary tabs

24 posts / 0 new
Last post
Frode Bo Helland's picture
Joined: 26 Feb 2007 - 1:03pm
CSS font stacks article
0

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.

Aaron Bell's picture
Offline
Joined: 8 Apr 2009 - 3:50pm
0

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!

Aaron Bell's picture
Offline
Joined: 8 Apr 2009 - 3:50pm
0

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's picture
Joined: 26 Feb 2007 - 1:03pm
0

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.

Joe Clark's picture
Offline
Joined: 6 May 2005 - 1:23pm
0

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's picture
Joined: 26 Feb 2007 - 1:03pm
0

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

Frode Bo Helland's picture
Joined: 26 Feb 2007 - 1:03pm
0

Shouldn't that be inch marks, btw?

Frode Bo Helland's picture
Joined: 26 Feb 2007 - 1:03pm
0

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 Stössinger's picture
Joined: 19 Jun 2006 - 3:01pm
0

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's picture
Joined: 26 Feb 2007 - 1:03pm
0

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

Nina Stössinger's picture
Joined: 19 Jun 2006 - 3:01pm
0

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?

Jan Schmoeger's picture
Offline
Joined: 12 Dec 2008 - 5:39am
0

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

Frode Bo Helland's picture
Joined: 26 Feb 2007 - 1:03pm
0

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.

Kent Lew's picture
Offline
Joined: 21 Apr 2002 - 11:00am
0

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's picture
Joined: 26 Feb 2007 - 1:03pm
0

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 Stössinger's picture
Joined: 19 Jun 2006 - 3:01pm
0

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

Theunis de Jong's picture
Offline
Joined: 22 Apr 2008 - 5:06pm
0

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's picture
Joined: 26 Feb 2007 - 1:03pm
0

Thanks a lot!

alexander fjelldal's picture
Joined: 14 Dec 2004 - 6:25am
0

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's picture
Joined: 26 Feb 2007 - 1:03pm
0

Takk Alexander!

Frode Bo Helland's picture
Joined: 26 Feb 2007 - 1:03pm
0

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

Don McCahill's picture
Offline
Joined: 30 Mar 2006 - 7:55pm
0

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's picture
Joined: 26 Feb 2007 - 1:03pm
0

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

Frode Bo Helland's picture
Joined: 26 Feb 2007 - 1:03pm
0

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!