Two Wrongs

(don't make a right)

Fallback Font, Good Fonts and a General Font Recommendation

by ~kqr

This article is going to be what they in the industry call "a big no-no", where I mix and blend three completely different topics into one article because I happen to have a few thoughts on all of them I want to share.

Of course, I welcome you to read all of it, but if you're stretched for time and interested only in the backend side of the web, read the section on Technical Trouble/Embarassment. If you're more interested in the frontend, read about my Fallback Font. If you're not a web person but into typography, you can choose to read only my Font Recommendation.

I'm also going to say "font" a lot when I really mean "typeface", because that's what regular people do. In fact, every single mention of "font" in this article should be read as "typeface".

Technical Trouble/Embarassment

I've had a problem on this site where I couldn't get Firefox to render the webfont I have picked out. See, I'm weird in that it matters to me which font things are typset in. I get angry when I see something that is typeset without regard to aesthetics, and I get similarly pleased and all calm inside when I see something that is beautifully typeset.

So when my browser fell back to some ugly-ass system font on my own site I got a little upset.

What's worse was the request my browser made to the foundry servers seemed perfectly fine. It was well-formatted and had the proper headers. It was just that their servers responded with a 403 permission denied.

I thought that if the request I send out is fine, then the fault must lie in their servers, right? The REST principle and all. After a few emails back and forth with a relatively un-technical support person, I examined the headers my browser sent in finer detail. One of them stuck out to me.

DNT: 1

DNT... as in... Do Not Track? Wait a minute, I have some privacy addons. Can they somehow be responsible for this?

So I disabled all privacy addons and refreshed the page. And of course, now it worked. I looked at the network tab in the developer tools to see if there was a difference, and immediately noticed a tracking gif entry that wasn't there before.

So my foundry (Webtype – they're cool people!) uses a tracking gif to count the page loads they get from a page with a webfont embedded. This makes sense, because webfont licensing is based on page views (though Webtype have been very nice when I've occasionally exceeded my traffic limit). The reason it worked before was because the foundry used to allow browsers to load the font even if they didn't load the tracking gif, but they recently updated their policies to combat incorrect usage.

So I got back to the support, told them what the problem was for future reference, and thanked them for their time. I was a bit embarrassed I hadn't eliminated problems completely on my end before I contacted their support – I had falsely assumed the web would be RESTful even when it comes to this...

I have worked in frontend web development. When a project manager came in and said, "Hey, our client Doris have reported a problem in Internet Explorer 4 on Windows 98 on her library computer", I would say, "Okay, that's not my problem." Because even though I'm the developer responsible for our users experience, there are limits to how low I'll stoop.

This is not like that. I understand if you readers don't want tracking gifs in your browsers. That's totally defensible, and my problem – not yours.

Fallback Font

For this reason, I have finally provided an open-source fallback font for this site. Open source means I get to host it myself and embed it as a webfont on my site in the simplest way possible without restrictions.

Now, does this mean everyone will have the correct experience? No, for two reasons.

First of all, I've implemented it in the simplest way possible. Some old Safari and Android browsers do not support this. If you're running an old Safari or Android browser and you're blocking tracking gifs, then it's no longer my problem and you'll have to deal with whatever your browser shows you.

Second of all, the fallback font is different from the main font. See, font sizes are a tricky thing. Two fonts, both at 48 px, can have very different heights and thicknesses, which gives the final document a very different feel. To a degree, this affects both my fonts as well, and there seems to be no good way to deal with this in browsers. You can't make adjustments to font sizes based on font family. Browsers and typesetting are a really bad combination, unfortunately.

Font Recommendation

The fallback font I decided on for this site is no less than Linux Libertine.

Linux Libertine is really nice. As in really, really, really nice. It has the qualities of a professionally designed font, which is rare among free fonts. It has a huge character set, including features normally not seen in free fonts, such as small caps and old style figures. It supports many languages.

And it's open source. How cool is that? An actual good font that you can use however you want? Give me more of that, please.

I have in my mind this idea that a person should have a "general font" which they always use unless they have reason not to. Like a fallback but for people. Why is this a good idea? Because it links documents to you.

You want people to read something and say, "You know, this must have been written by Ashley before she quit!"

"How do you know?"

"I'm not sure, but it looks like a typical Ashley document."

Choice of font is a strong branding ingredient.

So I'm a geek and I'm prepared to pay for my font, but I understand other people may not be. If you're not, I recommend taking a look at Linux Libertine to see if it may suit you as Your Font for general use.

There are three main reasons I recommend Linux Libertine, and those are basically the reasons it's so good. First, it comes with almost no strings attached. Second, it has an advanced enough feature set that you won't grow out of it as quickly as you may other free fonts. Third, it is typographically sound and fits most kinds of documents.

The choice of Your Font is important, because you really shouldn't change it to something else later on. If you change it, you'll lose the connection to previous documents typeset by you, and any new documents you typeset will take a while to get associated with you. So make sure you pick a good one from the start.

Maybe it's something to consider, anyway.

If you enjoyed this article, you might like others tagged with