Posts Tagged ‘fonts’

Dr. fontLove or: how I learned to stop worrying and love typography (but I still hate sIFR)

Saturday, August 22nd, 2009

I really fucking hate sIFR (Scalable Inman Flash Replacement).

There that got your attention. Well, not the “(Scalable Inman Flash Replacement)” part, you probably fell into one of two categories, the first being people who realise it’s something website related and technical or you presumed it’s a piece of newfangled Japanese sex apparatus, for genitalia impaired men.

Yet I’m not kidding around, it’s one of the few topics that actually makes me have to restrain myself from getting physically angry with people ( I am usually a fairly calm and passive person). It’s very unproffesional to react this way I know, but to me sIFR was one of the biggest crime’s against websites and it makes my blood boil. It sucks for so many different reasons I really don’t want to go into, at the end of the day it is not a tool for professional websites - amateur maybe a different story, but you’ve been warned, use it and your creating a second or third rate experience.

dr-strangelove1

So, when on my latest project, the client insisted that the headings be in “Helvetica” for all browsers and platforms, I had to hold back the urge to stab myself in the face repeatedly with my pilot 0.5 ballpoint pen.

In a desperate attempt to try and find some other solution, I spent a chunk of time researching other possibilities and found some progress had been made in the world of web fonts.

To start with the losers, Sifr, Cufon, still suck, they suffer from a host of problems that can be read about here in my stylishly titled Hate list.

Image replacement is probably the best option, but has a massive maintenance overhead, which can be automated to an extent, but still is a big risk.

But where as three years ago, these were the only options, now we have @Font-face.

This is the perfect solution, the solution that should have been available from the beginning so we could avoid all these bad solutions and it’s cross browser (well, the important ones anyway).

The @font-face rule allows us to specify a url which points to the font itself and then let the browser use it to render the desired content. Like so:

@font-face {
  font-family: someFontName;
  src: url( /fontURI.ttf ) format("truetype");
} 

.someClass {

    font-family: "someFontName";

}

But is it cross browser? I hear the cry. Well, no. Not exactly. IE has actually had this custom font support since IE 5.5, but you have to use Microsft Weft to convert your trutype font to ETOF a Microsoft proprietary format that contains a reference to the site it is to be used upon. To read more about how to create the IE version (it’s super simple) read this article
Expand Your Font Palette Using CSS3

So why didn’t we use this before? - well up until only recently did Firefox start to support this (Safari has for a while, chrome probably will soon and opera - well no-one really cares do they?) there is still a fairly large ongoing debate about font copyrights - in my opinion it will go the same route as music, open source stuff and eventually just end up being free and paid for by reputation and advertising, but everyone else has yet to realise that copying a font is very easy see Arial (- hint is almost identical to Helvetica). But either way it now means as a developer we can support all the major browsers with this new font paradigm.

The interesting thing to me is that the open source font idea shifts the balance - now our designers can look to a range of free fonts that we can embed to expand and refine their designs:

40 excellent freefonts for professional design

Obviously we still need to bear in mind some restraint, so that these only get used for headings or quotes, obviously for readability, body text needs to be one of the traditional fonts.

But we can also start opening up the world of custom open source fonts for new brands that we create. This really opens up the door for fonts to go the same way that professional photography went when flickr or iStockPhoto was created - and the tools to make this easy are already out there:

http://fontstruct.fontshop.com/

some of my favourites, which I admit might not be particularly practical:

soma

a_fault_in_reality

framestore

aerologica

legorama

All in all, font-face is a great thing for both designers and developers alike! Bring on a Rich typographic web!