True fonts on the web: what @font-face means for web design

The web was initially created to share technical papers amongst scientists across the globe. Formatting these papers was a simple matter: hypertext documents were created to contain simple text with links and references.

But now designers want more control over these documents. We want the web to be beautiful. And the latest browsers include fantastic new ways to beautify the web: opacity, rounded corners, text-shadows, drop-shadows, and now true fonts.

Take a look at a magazine, brochure or leaflet that you have nearby. Imagine if the designers of this leaflet were limited to just a handful of fonts, all of which are used on every other piece of published material. No way to innovate and impress the readers with beautiful typography. This is how the web has been since its inception.

Sure, there have been work-arounds to try to include fonts such as replacing text with images or with flash. But these are often slow to load, not standards compliant, or have drawbacks such as not being able to copy the text or show it in different sizes. The browsers have been holding back the web but that is all over with the latest release of Safari 4 and Firefox 3.5.

Click the links below for some great examples of beautiful typography. Please note that you must be using a modern browser to view these pages in the intended format: you can download Safari 4 or Firefox 3.5 for free, and dramatically improve your experience on the web.

Here at Rubious we will design our websites with @font-face in mind.Contact us for advice on how to add some style to your website.