Mark Scerri – Eye on the web

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!!

With the release of IE8 many people are predicting that IE6 will not be used anymore. If this is true then web developers can drop support for IE6. However before one starts to believe this rushed assumption one must clearly understand why people are still using IE6. To better understand I will give a real example of why IE6 is still used.

I am currently working with a betting company which uses a very sophisticated and complex web application back end. This back end is extremely important for the company and without it the main web site where people make their bets will not function. Due to the importance of this tool during the development stage the developers gave more importance to the business logic behind it and therefore 4 years ago they did all their testing on one browser – IE6. Since this tool is used internally they could easily force the employees to use IE6.

This year management decided that a new back end should be developed and of course it will not run on IE6. However the point is that this scenario proves that people are still using IE6.

IE6 is still being used by 20% of the internet users. In fact the last time I checked on google analytics 20% of the traffic generated on our web site comes from IE6. So please be patient and continue supporting IE6 because it is still on the run.

These couple of months I have abandoned by Blog due to unforseen circumstances. However now everything is back to normal. In fact work on the blog has started to gain momentum now. Tomorrow I will start posting new articles. I have a very intersting one on IE8 the new browser on the block and about support for the IE6 browser. Apart from this I am also working on a new (extra cool) design for this blog.

So until tomorrow have a nice day!