Getting the design right with the correct web fonts

The correct representation of a font on a website as the designer intended, and the right glyphs (those quirky diacritical characters with accents, special signs for math and science, and foreign characters like Greek, Chinese and Sanskrit), is a science unto itself. This site uses CSS font scripting to get the correct effect. The design can stand or fall on the use of fonts.

I have recently been working on a project that involves scholarly text with some 8000 individual unique characters. There were 4 options to make sure that these glyphs were correctly represented on the web page (instead of those infuriating white squares or black diamonds with a  question mark in it). Design using the right web fonts can help a web site – and its SEO – immensely.

1: Make the font available for download. This option is not user friendly and creates all kind of licensing issues.

2: Replace the glyph in your data with an image. Possible, but very cumbersome, especially if you are dealing with large libraries of text.

3: Flash replacement technology. Again, the same problems as above.

4: Font replacement technology, like font face generator. Here, the font is on your server (often in the same folder as the index.html page), and the page is rendered using this font. The user has no access to the font as it is not embedded.

The HTML page uses a CSS script to style the text, so your website needs to use CSS scripting. As far as I’m concerned, this is the only real and acceptable option.

There are issues with font replacement technology. There is some disparity between browsers and font types. Internet Explorer uses .EOT (Embedded Open Type) while recent versions of Firefox, Chrome, Safari and Opera all support .ttf (True Type Format). Open Type Format is also supported by a mixture of browsers and SVG (Scalable Vector Graphics) is needed for iPhone and the iPad. It can be all quite confusing and sometimes it can put a lot of people off trying to use it.

However, Web Open Font Format, or WOFF, is set to become the standard format for web fonts and is currently being standardised by the W3C. Firefox has supported the format since version 3.6, Chrome since 5.0 and it was announced recently that Internet Explorer 9 also supports the format.

Check out font-squiral for more information.

I would love to hear from anyone with experience with font replacement…

Web Fonts - western design based on classic letter forms
Web Fonts – western design based on classic letter forms