In this post I’m going to discuss some of the popular techniques used to allow more flexibility with online fonts as well as newer solutions that could be on the horizon

Web-safe fonts

For reasons both technical and legal, web browsers have really only been able to make use of fonts already installed on a visitor’s computer. That means that for the most part we’re left with the following list of fonts which are common to both Windows and Mac machines (or at least have a close Mac equivalent):

• Arial
• Courier New
• Georgia
• Impact
• Lucida Sans Unicode (or Lucida Grande on the Mac)
• Tahoma (or Geneva on the Mac)
• Times New Roman (or Times on the Mac)
• Trebuchet MS (or Helvetica on the Mac)
• Verdana

Font Stacks

When CSS became the standard for styling your website it brought with it greatly improved tools for defining and transforming text. One of these tools was Font Stacks, a prioritised list of fonts to be used by a particular part of your site. To list multiple fonts in this way you use the “font-family” property, for example:

p
{
font-family:”Times New Roman”,Times,Serif;
}

This would instruct all of the text in your paragraph tags to use Times New Roman, if that font isn’t available on a user’s machine it would check for Times (the Mac equivalent) and if it can’t find either it would fall back to whatever generic “serif” font was available. This also means that designers can be a little more adventurous, for example adding a relatively rare font at the front of the queue, there’s always a fall back option that everyone else could use. The downside to this being that the majority of your visitors will be seeing a different version of the site, something that a lot of clients may not be happy with.

Font Replacement Techniques

If you’re familiar with the web-safe fonts listed above you may be thinking they all look a little tame. They’ve generally been selected because they are easy to read on screen and so work well as the font for your main body text, but what if you’d like to try something a little more adventurous for your headings? Headings are usually going to be just a few words and rendered in a larger font size which means readability becomes less of an issue, they can be the perfect place to inject a bit of creative flare and give some personality to your design. Over the last few years several options have been developed:

sIFR (Scalable Inman Flash Replacement)

sIFR uses Javascript and Flash to convert your plain text into any font you would like. It was first developed in 2005 and has been open sourced so anybody can use it free of charge. You can find out more about it here – http://www.mikeindustries.com/blog/sifr/

Because the switch is made by the Javascript after the page has loaded, you don’t have to make any sacrifices in terms of search engine optimisation or accessibility. The downsides to sIFR are that it requires that both Javascript and Flash being installed, the text may not show up if the visitor is using ad-blocking software and some browsers can have problems with selecting/deselecting sIFR text.

Cufón

Cufón is an alternative to sIFR which doesn’t involve Flash. It uses a specially created font generator which converts standard fonts into the necessary format, then Javascript to render the finished font on the page. You can find out more here – http://cufon.shoqolate.com/generate/

It has the same benefits as sIFR but doesn’t need Flash which means more people will see the results and the page should load slightly quicker. On the other hand there can be more work involved in getting it set up and it doesn’t have complete browser support, there are still problems stopping it from working in some versions of Firefox and Chrome. It also has show-stopping problems in some screen readers which would make your site almost useless to visually impaired visitors.

Typekit

So while there are options out there for swapping more adventurous fonts into your websites, they all come with their own drawbacks which is why they’ve not achieved mainstream success. Typekit is a new service which was announced earlier this year and promised to change the way type is handled on the web. It uses a previously available but underutilised CSS property called @font-face which is starting to be implemented by more browsers.

The Typekit founders have made deals with various typographic foundries to offer hundreds of custom fonts specifically for use on the web. The service launched this week allowing website owners to sign up for one of various payment plans. I’ve been testing the service myself with mixed results, you can take a look here although depending on your browser you may or may not see the results – http://www.wsiyorkshire.co.uk/typekit/

A comparison of my Typekit test between two modern browsers.

The Typekit founders claim the service works in Internet Explorer and recent versions of Firefox and Safari although I’ve not been able to get it to work under IE. There is no support for Chrome or Opera until those browser manufacturers include support for the @font-face property, however for now these browsers will simply fall back to the next font in the stack.

The service itself is easy to use and the collection of fonts available is impressive. I’d have to recommend against using it on client sites until the browser support improves but it’s definitely a technology to keep your eye on.

There’s definitely a bright future for typography on the web, there are many other companies working on similar products and the amount of buzz around Typekit shows just how much demand is out there for better fonts! Once the bugs are worked out and the browsers catch, up I’d be very surprised if custom typefaces don’t become commonplace on the web.

Flash technology has been a welcome addition to the internet. When used well, it can be the best way to get your message across. If used unwisely on the other hand, it simply deters your site visitors from sticking around. So how can you get the best out of Flash animation?<!–more–>

Using Flash Animation to the Best Effect
The internet community is split over the effective use of animation on the web. Some feel it has its place and is the direction the web should take. Others feel it is overused and not always effective, citing the following issues:

• Potentially long download times, which slow down the Web
• Usability problems from a majority of hand-held devices
• Lack of programming skills amongst developers
• Search Engine readability issues (although improvements have been made in this area)
• Prohibitive development costs.

All of these are valid concerns. Consideration should be given to your own circumstance: Who is your target audience? How are they going to be accessing your website? Could animation help enhance your message?

A measured approach can help you identify the most effective way to use animation on your website. The following suggestions are offered to help you use Flash to great effect, rather than simply using it with no real purpose other than ‘it looks great’.

1. Subtly Rotating Content
The main reason for using Flash animation is to draw the eye and give attention to your main message. A subtle rotation of well-thought-out slogans, perhaps with accompanying images, will enable you to convey your most important sales messages.

The subtle animation will draw your visitor’s attention without overly distracting attention away from other content on the page. In other words, the rotating slogans enhance your other content, rather than become an unnecessary distraction.

2. Image Galleries
If you need to display a number of images in an orderly, professional manner, you should consider using Flash animation. A well-devised Flash-based image gallery will not only look great, but will also give the user a simple-to-use interface to navigate through your pictures with ease. Some features might include:

• Self-navigation buttons
• Functionality to scroll through the images
• An auto-play slide show function
• The option of including copy with each image
• The option to link to another web page from each image
• Little or no delay in loading images

It’s important to keep in mind that the aim of your image gallery should not only be to look good, but also (and perhaps more importantly) to provide a good user experience.

3. Video Footage
One area in which Flash technology is being well utilised is to enable the playing of video footage over the internet. Websites such as YouTube, Vimeo, and a myriad of other video-sharing sites have made online video almost commonplace with most web users.

The trend now is for businesses to make effective use of video on their company websites. A short 2 to 5 minute video enables the presenter to share a message on a whole new level – without having to cost the earth to produce or broadcast.

Other more complex uses of Flash animation could include product walkthroughs, interactive tutorials, animated calendars, multi-track audio players, and more. When incorporating animated content, the key is to enhance – not distract from – your main message. If you would like help implementing Flash animation effectively on your website, call us on 01484 690430.