I want that font…
Why using graphical fonts is a bad idea
Firstly, sorry jacque, I’m using you as an example but yours is a typical request and I thought I’d blog it after our discussion on MSN yesterday.
I quite often get requests for a corporate (or particular) font to be used for page/section headings in a website. More often than not, the font in question isn’t one of the handful of fonts that can be found on everyones’ pc and therefore be specified in the CSS font-family property to style up html text. Usually its from some far out type designer who takes his inspiration from who knows where!
Now, I can fully understand why a site/business owner would want to do something like this. In a conventional marketing sense (for example a printed brochure or press ad), its something you would definitely want to do as it helps build your brand. However its not such a great idea on a web page. The only realistic way to achieve fancy fonts is to create a gif/png/jpeg image containing the desired text, typeset in the correct font. There are however some big problems with this:
Search Engine Optimisation
Search engines cannot read images – even ones that are made up of text! Some of the best keyphrases on a website will be in the page headings and if these keyphrases are locked up in an image, you don’t stand a chance of ranking in search engines for them. This can be mitigated to a certain extent by putting alt attributes on your images and repeating the text from the image in the alt attribute – however its debatable as to whether search engines actually give much/any credence to alt text especially compared to something as highly regarded as a <h1> tag.
Maintainability
In an ideal world, the business owner would take responsibility for the content on the web pages via a content management system. Using the graphics as text approach would mean the content creator would need to have Photoshop/Typesetting and web image export skills – this is not likely. OK you could do some server-side trickery to have a gif generated on the fly but in my experience this can be messy to setup and unreliable/error prone.
Accessibility
Images are not the most accessible thing in the world especially when all the images contain are text. Again this can be mitigated by adding duplicate text to the alt attribute of the image tag, but it still wouldn’t be as easy as html text for non-conventional browsing software such as screen readers to consume.
Layout
You need to make decisions at the point the graphic is created as to where line breaks occur in your heading. If the site in question uses a liquid layout, the chances are that at some point, one of your fixed width header graphics will break the liquid layout. This is not great.
So whilst it may be visually a ‘nice thing’ to have your corporate font littered throughout your web pages, the web is about much more than looking pretty.
Syndication
August 26th, 2006 at 3:58 am
Right on the money with all of your points on this one. When I first started getting into the who web design thing I was frustrated with the limited use of fonts and used a large amount of graphics in spots just to get the look that I wanted since I felt that my vision was more important. But I’ve since learned that you can achieve alot with CSS and XHTML and still create that visually attrative website.
August 31st, 2006 at 12:02 pm
I agree with most of that. Graphical fonts are not usually a good idea, but there are a few things to consider.
Design is still important these days, even in our cleanly and well coded obsessed world, and no matter how hard you try you cant always get this effect with standard installed fonts.
There are also methods of text replacement that kind of negate the accessibility point – you can easily have a H1 thats replaced by an image that search engines and people with screen readers, et al. Can see alike.
I am playing devils advocate here though. Text replacement still means you have to create the text in your image creaion package of choice, and that means the maintainability (as rightly stated) shoots through the roof. Who is to say that someone who picks up the site in the future will even know what the font is that you have used, let alone have it installed.
Another thing to consider that is getting better now is the flash replacement, http://novemberborn.net/sifr3/alpha – but again this has as many negative points as it does positive.
On the whole I agree, but with a smidgeon of disagreeance.
September 20th, 2006 at 12:57 pm
[...] This thread at web master world relates to a post I did recently about using images on your web pages for what is essentially text. [...]