Design, Fonts & Glyphs, User Experience

Web Fonts

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

Design Fonts & Glyphs User Experience
  1. Good day. Very nice web site!! Man .. Excellent .. Wonderful .. I will bookmark your site and take the feeds also…I am glad to find a lot of useful info right here in the article. Thanks for sharing..

    • Thanks! – I will be adding more information as I go along. This UX experience is a trip!

  2. This is a very good tip especially to those fresh to the blogosphere. Short but very accurate info… Many thanks for sharing this one. A must read article!

  3. May I simply say what a relief to find somebody that actually knows what they’re discussing over the internet. You actually understand how to bring a problem to light and make it important. More people should check this out and understand this side of the story. I can’t believe you’re not more popular because you most certainly have the gift.

    • Thanks! – Fonts and Glyphs are important, but have been on the back burner in the technology race. Things are improving though and I see some very promising developments. The only major issue is licensing, beware of that, some font factories make more money suing than actually selling fonts.

  4. It’s nearly impossible to find educated people on this subject, however, you seem like you know what you’re talking about! Thanks

Leave a comment