Rubious

Archive for July, 2009

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

Wednesday, July 1st, 2009

logo-wordmark-version-vertical-preview

At last, a new feature is available on two major web browsers which gives typographic freedom to designers. If you are using Safari 4 or the new Firefox 3.5, you can now view fonts specified by the web designer — even if they are not installed on your system.

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 Spring Bud we will design our websites with @font-face in mind.
Contact us for advice on how to add some style to your website.

Links: