Liberation Fonts

Liberation

The Perfect Tool for Web Typography

UPDATE: Since I wrote this article, other more dedicated testers have perfected browser font embedding methods beyond what I offer here. I hope this article still proves informative, but please ignore the actual CSS and use FontSquirrel instead. You can download the Liberation fonts (and lots of other fonts) there as pre-made packages with multiple font formats and the appropriate CSS.

Like most designers, I'm excited about @font-face and the future of online typography — but let's face it: that future hasn't quite arrived. Though support for embedded fonts has finally become more-or-less mainstream, there are still a lot of issues to resolve, not the least of which is the licensing thicket. The complexities of font licensing online deserve an article of their own, but I am not the one to write it — suffice to say they make designers and our clients nervous about embedding commercial fonts since the legal issues are difficult to understand and not even fully resolved in the courts.

Very few free typefaces can carry the weight of an entire website without revealing significant flaws.

Free fonts are the most obvious solution to this problem, and they work well for many applications, especially one-off graphics, stylized headlines and the like. But as any typographically-inclined designer knows, very few free typefaces can carry the weight of an entire website without revealing significant flaws.

Moreover, there are still some technical obstacles that apply to any font. Large font families come with large file sizes that add up quickly, drastically increasing the overhead of a site. Different browsers react to this in one of two ways: some will delay drawing the entire page until the fonts are loaded, while others will display text in the next available font and update it once the download is complete. The former is ideal from a design perspective since the user will never see a "broken" version of the page, while the latter is ideal from a usability perspective because it doesn't delay the loading of content. Unfortunately, it also results in what designers have dubbed the FOUT, or Flash Of Un-styled Text, which can be disorienting to the user and destructive to certain page layouts. Finally, there's the ongoing concern that only the most recent versions of some browsers support embedded fonts, and that some users may deactivate the feature to save time and bandwidth.

What's the outcome of all this? Web fonts are fun, but they are still far from perfect. As a result there's still a lot of Georgia and Verdana out there, and with good reason: both are highly versatile and meticulously well-designed typefaces. Even Times and Arial can be surprisingly effective when wielded by a skilled web designer — but there's no denying that we are all getting bored of these fonts. I can't fix the world of online typography, nor do I have any revolutionary new hacks, but I can share one new weapon for the arsenal that I think helps to spice things up a little: the Liberation family of fonts.

Liberation Font Preview

Liberation Serif, Sans and Mono: three high-end professional fonts available under the GNU General Public License — the same one that governs Linux and other open-source software — completely free for use and modification by anyone for any purpose.

For those unfamiliar with the GNU GPL, the basic principle is that everything must be made available for free, along its source code (in the case of a font, of course, there is no separate source code). Anyone can use or modify stuff released under the GPL, and can redistribute it as they see fit, so long as it remains under the GPL — meaning whatever was free will always be free; you can contribute and revise, but you can't claim ownership. When you use Liberation on your website, it's nice a link to the open license, but this is mainly a show of good faith and support for the GPL. There are essentially no legal concerns with using this font in websites and documents, commercial or otherwise.

Note: one caveat in this instance is that while the font is released under the GPL, the name "Liberation" is trademarked by Red Hat, Inc. The main consequence of this is that if you modify the font using a tool like FontForge, you must also change its name. For safety's sake, I also include Red Hat's trademark notice above the @font-face declaration in my CSS. This is discussed further in the section Implementing the Liberation Fonts.

The Benefits to Designers

{
Mouse over me to see the matching metrics of Liberation Serif and Times New Roman.

Why am I so ga-ga over Liberation? Well, there's a few reasons. One is that I love the GPL, but these fonts are also a powerful design tool. For starters, they are pretty nice typefaces. Liberation Serif is blockish transitional face that is reminiscent of Melior, while Liberation Sans is a simple neo-Grotesque with strong humanist elements, especially in the capital letters. Liberation Mono is one of those fixed-width fonts that manages to look surprisingly natural, and it harmonizes perfectly with Liberation Sans.

But these fonts wouldn't necessarily stand out on their own merits. Here's the real reason they are so special: their metrics are identical to Times New Roman, Arial and Courier New respectively. That's right: every letter, every ligature, every kerning pair is identically spaced, so text styled in either font does not shift by even a single pixel. In terms of layout they are completely interchangeable.

This is where the power of the Liberation fonts lies. The matching metrics solve two big problems: compatibility and the FOUT. Missing fonts might compromise the design, but you can be confident they will never break it. Users who experience the FOUT may blink at the change in style, but the text won't suddenly move and change size and re-wrap and completely transform what they are looking at.

Are these fonts better than our other reliable online choices? I'm not sure. But they are new and different and they expand our options a little, which is good enough for me. In case you haven't noticed yet, nearly all of Fresh Eyes is designed in Liberation Serif. I stuck with standard fonts for the monospace text for three reasons: to avoid the extra load time, to keep the code samples typographically distinct, and because I'm not as sick of Courier as other common web fonts.

Implementing the Liberation Fonts

The first step is to download the Liberation fonts in TrueType format here. If you want them to work in Internet Explorer too, you'll have to use the ttf2eot tool to create Embedded OpenType versions, but personally I don't bother since I know Explorer users will see the adequate substitute of Times New Roman. If you do plan to do this, here's a guide.

There are plenty of tutorials out there on using the @font-face rule in CSS, so I won't repeat all the details. Here's the code you need to embed one of the Liberation families in full:

UPDATE: Tools like FontSquirrel make this much easier. Use those instead of this code.

@font-face { font-family: Liberation Serif; src: local("Liberation Serif"), local("Liberation Serif Regular"), local("LiberationSerif-Regular"), url(LiberationSerif-Regular.ttf); font-weight: normal; font-style: normal; } @font-face { font-family: Liberation Serif; src: local("Liberation Serif Italic"), local("LiberationSerif-Italic"), url(LiberationSerif-Italic.ttf); font-weight: normal; font-style: italic; } @font-face { font-family: Liberation Serif; src: local("Liberation Serif Bold"), local("LiberationSerif-Bold"), url(LiberationSerif-Bold.ttf); font-weight: bold; font-style: normal; } @font-face { font-family: Liberation Serif; src: local("Liberation Serif Bold Italic"), local("Liberation Serif BoldItalic"), local("LiberationSerif-BoldItalic"), url(LiberationSerif-BoldItalic.ttf); font-weight: bold; font-style: italic; }

This code includes catch-alls that try to find the fonts locally before downloading them. It doesn't include the extra set of declarations for Explorer-compatible EOT fonts. To embed the other Liberation families, simply change every occurrence of "Serif" to "Sans" or "Mono" as appropriate. If you keep the fonts and the CSS in different folders or host the fonts remotely, adjust the URLs accordingly.

When use the Liberation fonts, you should mention the GPL. It's actually a slightly modified version of the GPL with a special "font exemption" that allows you to use the fonts without also putting your content under the GPL, which is what the standard license might otherwise imply. I like to add a comment above the @font-face rules in the CSS file:

/* Liberation fonts are used under the GNU General Public License. LIBERATION is a trademark of Red Hat, Inc. Learn more about the GPL at: http://www.gnu.org/licenses/gpl.html Download the Liberation font families at: https://fedorahosted.org/liberation-fonts/ */

I Feel Liberated!

Endless thanks to Red Hat for making these great typefaces available! The original purpose of the Liberation fonts was to give Linux users a replacement for the standard Microsoft Office fonts, but whether Red Hat realizes it or not, the fonts are a perfect tool for web design too. Read more about the history of Liberation fonts here.

Thanks Red Hat!

Note: the linked press release is from 2007, before the fully-hinted versions of Liberation were released. The fonts did in fact get hinted shortly afterwards, which is why they look so great online!