New to Typophile? Accounts are free, and easy to set up.
CSS font stacks article
Posted by Frode Bo Helland in
11 Jun 2009 — 9:49am
11 Jun 2009 — 9:49am
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 |
User login
Support our Sponsors
11 Jun 2009 — 10:23am
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!
11 Jun 2009 — 10:30am
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!
11 Jun 2009 — 10:32am
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.
11 Jun 2009 — 11:47am
Font names in CSS declarations must be enclosed in quotation marks if they include a space character, hence
font-family: Franklin Gothicis illegal (though browsers quite likely would accept it and do what you intended).—
Joe Clark
http://joeclark.org/
11 Jun 2009 — 1:19pm
Thank you Joe. I'll make sure to fix that up for the final version.
11 Jun 2009 — 2:19pm
Shouldn't that be inch marks, btw?
11 Jun 2009 — 5:30pm
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!
11 Jun 2009 — 5:52pm
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.
11 Jun 2009 — 5:55pm
I need the screenshots from computers where the actual fonts are installed, doesn't I?
11 Jun 2009 — 5:58pm
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?
11 Jun 2009 — 6:05pm
I am getting a lot of Courier, probably because I run FEX and only activate the fonts I need ...
12 Jun 2009 — 5:17am
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.
12 Jun 2009 — 6:15am
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?
12 Jun 2009 — 6:24am
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.
12 Jun 2009 — 6:30am
Sorry Frode, then I did indeed misunderstand you.
I've only got OSX (and emulated Windows) :-\
12 Jun 2009 — 8:15am
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.
12 Jun 2009 — 8:33am
Thanks a lot!
13 Jun 2009 — 11:49am
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
13 Jun 2009 — 12:03pm
Takk Alexander!
14 Jun 2009 — 3:19pm
Any of ye old crabs sport Microsoft Office 08 (OSX or Windows)?
15 Jun 2009 — 5:54am
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
15 Jun 2009 — 6:36am
Thanks Don. I've already corrected the top two. I'll look into the last one.
17 Jun 2009 — 4:53pm
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!