Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Web typography in 2011

DZone's Guide to

Web typography in 2011

· Web Dev Zone
Free Resource

Tips, tricks and tools for creating your own data-driven app, brought to you in partnership with Qlik.

Remember the days in which you had to store a portion of text in an image because your graphic designer wanted to use a very rare font?


Yes, even in the late 2000s, you could only target text in CSS with a font which was present on the user's machine. This lead to specifying more and more fallbacks fonts and a final family from which a user's font could be chosen in case every other font was not available:

font-family: Helvetica, Verdana, sans-serif;

Now that bandwidth and the browsers capabilities have increased, they are starting to fully support the old speficication and most of them are adding new features to your style sheets with CSS 3. You can load fonts dynamically and use them on the user's machine, just by adding some rules to your CSS files.

This is actually a CSS 2 feature, but at its introduction the major browsers like Internet Explorer and Netscape targeted different, incompatible formats like Embedded Open Type and TrueDoc. Only in the latest versions they are starting to support TTF, the most diffused format which every typographic software can manipulate.
In the most basic example, you link an URL containing the font definition file to a symbolic name thay you can use afterwards in other properties:

@font-face {
    font-family: "Prata";
    url("prata.ttf");
}
p {
    font-family: "Prata", sans-serif;
}

Remember that url() values in CSS are relative to the position of the CSS code, being it an external file or the current HTML page; you can also specify absolute URLs.

The pros

The advantages of CSS-styled text over keeping it in an image are multiple:

  • searchability and selection for copy&paste.
  • Ease of maintenance: modifying the text is just a matter of modifying a few bytes with a text editor.
  • Applicability of other CSS rules like font-size and text-align.
  • Accessibility for screen readers, text browsers, crawlers, and any other tool that reads a page without rendering its graphical appearance.

Once loaded the font, scales very well. It's KISS principle and "separate content from presentation" principle united.

Support

HTML5 Rocks gives us a compatibility table where we see IE 9, Firefox 3.5, Android and iOS browser version, Chrome, Safari and Opera from a bit. The problem is most of them, if we consider also older versions, want to download the font in a different format (TTF, EOT, WOFF, SVG...)

Fortunately, we have at least two choices to win the formats war: Font Squirrel and Google Web Fonts.

Font Squirrel is a web service that offers you to download @font-face kits containing a free font stored in all the possible formats, along with a small CSS file that you can @import in yours. Alternatively, you can upload a font you have available and have it converted, generating a new @font-face kit just for you.

Google's approach, as always, is more oriented to the cloud: Google Web Fonts lets you choose a font, its styles and the character sets you need; after having informed you of the impact on page load time, it will give you:

  • a <link> element.
  • An @import instruction.
  • a few lines of JavaScript.

You can select any of the above to start importing a font served by Google's CDN into your pages. The final bulletproof code that will be interpreted in the browser looks like this:

@font-face {
    font-family: 'Prata';
    font-style: normal;
    font-weight: 400;
    src: local('Prata'), local('Prata-Regular'), url('http://themes.googleusercontent.com/static/fonts/prata/v1/Q4MFb6hnPeDYpBc-5E8p_w.woff') format('woff');
}

Legalese

Fonts are akin to images and videos: they are protected by intellectual property laws and their distribution is affected by the web as a giant copying machine.
So we can't just look for .ttf files that often come without a license (because it was removed) and upload them to our server: it will make an illegal operation clearly visible to any visitor of the website.

What can we do is to stick to open source fonts just like as we stick to open source code:

  • Google Web Fonts only features open source fonts. So you don't have to worry if you choose a font hosted by Google.
  • The League of Moveable Type has the goal of raising web design standards, and they are providing free fonts to support the diffusion of @font-face.
  • A good portion of Ray Larabie's fonts are free for any use, and they are listed on fonts directories with a price of $0.
  • freedesktop.org includes the free fonts which are included in GNU/Linux operating systems.

Conclusion

 

So you can start use new fonts right now, getting the benefits of text over images and not sacrificing your graphical design. But you have to keep an eye on browser support and on the impact on the total size of your page; moreover, you should check the licenses of the fonts you choose before hosting or linking to them.

Explore data-driven apps with less coding and query writing, brought to you in partnership with Qlik.

Topics:

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}