Mark Scerri – Eye on the web

My last post about 2 months ago was on fonts and how we should handle scenarios when the user does not have the required font. Well after two months a new method is on the block. TypeKit a viable solution to using non-standard web fonts.

From my previous post you might remember that with the @font-face we could attach the required font and use it liberally as in the following example:

@font-face {
	font-family: sample;
	src: url('sample.otf');
}

Then you can use it normally in you CSS:

h1 {
    font-family: sample;
}

However with this method there are licensing issues (becuase you are distributing the font). You cannot distribute and let users install the font everywhere. Font makers who make a living out of creating fonts are equally unhappy about this. TypeKit come into play. It is the first serious attempt to provide an easy framework for licensing of fonts. So how does it work?

TypeKit will negotiate license fees with the owner of the font. Then site owners pay a license fee to use a specific font on a specific domain. Users who visit the site will download the font without any licensing issues directly from the TypeKit servers. TypeKit will only provide the font if that domain has paid the necessary license fees.

As Internet Explorer only supports Embedded Open Type (EOT), TypeKit also provide the EOT font format.

Of course developers still need to be careful. There is the risk that a file is blocked if access to the server is unavailable. Therefore one needs to provide a standard fallback font. Finally TypeKit can provide developers and designers a solution that removes the legal ambiguity related to distribution of fonts.

Deciding which fonts to use for your web project has always been a big headache. Some designers simply cannot understand that some fonts will not be found on all operating systems and if they use that font the web site will look different under that OS. So how do we handle this problem? Well there are four methods each with their pros and cons.

Image Replacement

The first method is by use of images. To use your desired font and make sure that everyone will see it the same you replace your header text with images. The advantage of such a system is that it si very easy to implement (using CSS background images), it can be viewed the same by everyone, and does not require additional installations to your browser to view.

The main disadvantages of such a method is that you may have accessibility problems. For example screen readers cannot read images and if you use CSS background image you need to to think of another method to introduce alt tags. It is a big headache to produce new images each time a header changes. If you have dynamic content your only solution is server generated images, which are not easy to implement and may affect the performance of your web site. With this method you have limited caching and no reusability.

Scalable Inman Flash Replacement

In 2004 Mike Davidson, Shaun Inman, and Mark Wubben came with a very genious idea. To resolve the problem that a client may not have the required font installed on his/her machine, this method securely embeds the required fonts to view the web site in a flash movie. With Javascript one can then substitute the HTML text for the SWF movie.

This technique is very intelligent and gives the designer an unlimited choice of fonts that he/she may use. Apart from this there are less licensing issues for fonts since the fonts are securely embedded.

The drawbacks of this techniques is that it still relies on Flash and Javascript. Although Javascript may not be an issue, the use of Flash means that some clients still need to download extra software for their browser to be able to view your website as you intended.

Use @font-face

CSS gives us the possibility to include an @font-face declaration that specifies the font to be used and from where it can be downloaded if the user does not have this font installed on his/her machine. Here is an example:

@font-face {
    font-family: Calibri;
    src: url('calibri.otf');
}

It looks easy! The problem is that the act of making your font available on your server violates most of the end-user license agreements of the fonts. Another problem is that it currently only works on Safari 3 although in the future Opera and Firefox will support it. Another issue is that @font-face could expose clients to viruses attached to downloaded fonts.

Vector Text

Vector text is a technique that copies the idea from Scalable Inman Flash Replacement however the nice thing about it is that it does not rely on Flash. The idea is to use Javascript to replace HTML with a Canvas element that renders the text in vector format.

But how are we going to convert the text in vector format. There are two methods: Typeface JS and cufón. Each method requires you to convert your font into a vectorized JavaScript file using their free online tools. These vectorized fonts are then linked to your page, rendered to a canvas area, and swapped into your page on-the-fly when JavaScript is available.

Of course many will argue that if your browser supports canvas then it is likely to support Flash. It is true except for one browser. Apple iPhone’s browser supports canvas rendering but does not support Flash.

So currently Vector text is the most reliable solution for non-traditional fonts in your website. I will experiment with this and in the future hope to write a tutorial on how to implement vector text in your web site.

As I wrote in my previous posts I am currently working on a new design for my blog. While trying out various designs I started producing various artistic but complicated designs. As I looked and looked and looked at them….. Well they were nice, very nice actually however there was something that I was missing. I liked them but they weren’t what I actually want it. They did not make me fully happy. The more I tried the more I complicated things and the less happy I was becoming with these designs.

So what was wrong? Finally it came to me. I was complicating things, using a lot of colors, and using complex shapes and loads of art work. Although these components were extremely nice, together they did not make sense. Why was this happening? The answer is very easy – LACK OF WHITE SPACE!!!! So what do I mean by white space? White space is that open space between design elements on a page. This space can be between letters, sentences, paragraphs, space between graphics, and space inside graphics. And why is white space important? White space defines realtionships between visual items. They make the page more meaningful because white space is powerful enough to guide the reader’s eyes between one point and another.

White space makes the reader’s eye relax. It makes text readable, give emphasis to your graphics, and most importantly provide the necessary balance between your elements on the page. It actually helps the mind to absorb more the material on offer on your web site.

Designers must keep in mind that white space and simplicity can enhance the performance of your web site (because simple designs do not require complex, large size images), and improve the readability of the content presented.

So now you know my next design for this blog is going to be simple and full of white space. The new blog is rapidly coming to life. Stay tuned!!