December 2010

the elusive cursive font stack

15 December 2010 - 6:53pm — drew

There are some great articles and resources out there on the interweb about using font stacks in your CSS to ensure your site has the best chance of working well and looking as it's intended to on any combination of browser and operating system / device you can throw at it.

However, a site I worked on recently used the font all designers love to hate: Comic Sans. Almost all of the advice I could find about this font went along the lines of "it's rubbish - don't use it" (that's the polite version, obviously).

Luckily for those of us that absolutely positively have to use comic sans (and for the record, it's actually a really good fit for the site in question), it's very widely available across the main desktop platforms, and can generally be considered web safe. Probably for this reason - and its unpopularity with designery types - it tends not to feature in the most popular '10 great font-stacks'-type articles.

So, when I found out that comic sans is not included on the iPhone (or in iOS in general), I had a bit of a problem. Thankfully, there is a fairly close substitute font on iOS called Marker Felt, and it seems to work okay as a fallback.

[edit] not long after I came up with my font stack Apple added Chalkboard to iOS; I believe it replaced Marker Felt as the default in the Notes app, and it's arguably a better substitute for Comic Sans (see iOS screenshot for comparison). As far as I'm aware Chalkboard is available in iOS 4.2 and later, which should cover most iOS devices. I've now added this to the stack. Note the slightly arcane font name you actually have to use in the CSS.[/edit]

[edit] a helpful commenter has pointed out that in normal OSX, the font is just called Chalkboard. So, you can add this to the font-stack too. Note though that OSX has Comic Sans (where iOS does not), so it's up to you whether you'd prefer OSX users to get Chalkboard or Comic Sans and therefore where you place it in the list of fonts.[/edit]

So without further ado, I present to you my CSS font stack for comic sans, and the cursive font family:

[[css]]
font: 13px/1.5em 'Comic Sans', 'Comic Sans MS', 'Chalkboard', 'ChalkboardSE-Regular', 'Marker Felt', 'Purisa', 'URW Chancery L', cursive;
[[/css]]

I found the font survey at codestyle.org very interesting and useful in putting this together. I'm pretty confident that between Comic Sans and Chalkboard / Marker Felt most MS and apple platforms are covered.

What about linux and android?

Some sites won't care much about desktop linux, but android is surely on the support wishlist for the majority of new projects now.

The codestyle font survey suggests around 2/3 of unix users have Comic Sans. It is included in the msttcorefonts package but it's not included in stock Ubuntu. Derivative distros such as mint do include it by default I believe. There are of course other linux distros, for which the MS core fonts are also available (you're arguably looking at a small share of a small share...) but again it doesn't look like they're installed by default in SUSE, for example.

The codestyle font survey suggests "URW Chancery L" is the most commonly available cursive font for unix (almost 98% apparently). I can however see two problems with using this font; in my testing on Ubuntu it doesn't seem to work in recent versions of firefox, and I also don't think it looks very much like comic sans (see screenshots).

I don't know much about Purisa; other than the fact that it's installed in stock Ubuntu, and seems to be quite a nice hand-writing type font. Google tells me it's actually a thai font, but works well in English. I put it before URW Chancery L.

Realistically if a lot of the text on your site is supposed to be in comic sans, you'll want to do a good bit of testing with how it would look using one of these fallbacks. I'm not supremely confident that a site all in Purisa or URW Chancery L would be very legible. You may decide you're better off falling back to something simple (or providing an alternative using @font-face perhaps).

It looks like the list of default fonts available on android is very limited, and sadly there's no good substitute for comic sans. You could use some form of browser / agent sniffing conbined with JS and italicise your text in android perhaps.

On the other hand there is support for font-face if you want to supply your own substitute (although beware that one of the common 'bullet proof' font-face approaches doesn't actually work in android, but there is a simple solution).

I have also come across another quirk in android font-face support when experimenting with my cursive font stack. I've tried using a font-face font at the end of the stack (but before the generic family) - the aim obviously being that the android browser will use the font-face font when it fails to find any of the others.

This doesn't seem to work though - I can only get android to use the font-face font if it's at the start of the stack, which is not very useful when it should be the last resort fallback. A quick experiment with firefox suggests that it should work (and it's my understanding of the spec that it should - font-face is just defining another font-family for use elsewhere in the CSS).

I'll keep looking into it, but it seems for now that a font-face fallback for android would only work via browser sniffing and scripting. Which is a shame - hopefully I'll be proved wrong on that.

If you're tempted to supply your own copy of actual comic sans, I'd advise caution on the legal / licensing front, and also that you're careful to avoid the situation where browsers that already have the font available download your version instead. local() is supposed to deal with that situation, but also seems to be a cause of problems in android (as per links given above).

Finally here's a few words of text using my font stack, which can be used for testing on different browser / platform combinations... and a few specific fonts: