I Hate Graphical Text

Monday 9 February, 2004 ( 1:05PM GMT)

The title of this entry is perhaps a little over-the-top. There is, of course, a place for graphical, pixel-constructed text over functional text, namely in branding and when highly stylised text is required.

This is perhaps an obvious rant to make, but the use of graphical text when functional text can do the job just as well, if not much better is rife.

Graphical text has incredible accessibility problems - not only in terms of being read by screen readers but in the fact that it is completely unscalable in most browsers, so preventing a hard-of-sight user from zooming in to read something more clearly.

On a much more basic level, it isn't just a problem with accessibility, but a problem with file size. A heading made of functional text and styled with CSS is going to measure double-figure bytes in size, whereas equivalent graphical text can easily be thousands of bytes in size. So this means longer download times and decreased usability.

So when is graphical text all right?

When it's big for a start.

When it's for branding, which is the strongest argument for graphical text.

When highly stylised text that can not be achieved with CSS is required.

The last point is probably the most controversial and certainly the most vague. The argument over whether something is 'necessary' is obviously a subjective one. Whereas one person may say that the usability and accessibility benefits of functional text outweigh the need for a certain graphic, another person may say that the graphics are a necessity for the visual design. Unfortunately, I think that some web designers too readily opt for the latter without really exploring the options.

The bottom line is that when CSS styled text can be used, it should be used. The argument, I suppose, is over the word 'can'.

Comments

Comment 1

It's an old argument I know, but this issue could have been addressed from the dawn of the web (or of CSS at least) if we could only embed fonts and control anti-aliasing.

Personally, I only ever use graphical texts for pixel-perfect logos. But it would be nice if we could avoid even this because, as suggested above, there are definite accessibility issues to consider.

It's not all bad. By the time we get Mozilla v4 and CSS 7 these, and many more, issues will have been addressed. ;-)

So said DarkBlue on Monday 9 February, 2004 at 4:11PM GMT.

Comment 2

I think its over-use has the same roots as does bad HTML. Graphical text was always a way to make something pretty when there was no other way of doing it. Now we have CSS. Not only can it be used with HTML to make code better, it gives us more flexibility in determining the appearance of text.

So said Chris on Monday 9 February, 2004 at 7:25PM GMT.

Comment 3

CSS lets you do lots of things to create graphical effects that couldn't be done before without images. Borders and backgrounds make for interesting effects and the hover pseudo class lets you do things with links where before you could only use javascript to swap images.

So said on Tuesday 10 February, 2004 at 10:38AM GMT.

Comment 4

I love using CSS for "formerly graphical" elements. I've run into one problem that keeps me from implementing it more often for clients -- size differences. When I use the cascade to define a nice hierarchy of font-families, the sizes are all over the map. So where my optimum, favorite font looks perfect in the size I've specified, the next one in the cascade may be much larger or smaller which totally throws off the balance of the area I've placed it in.

I yearn for the day when we can specify sizing for each family... or something similar.

So said Stephanie on Sunday 15 February, 2004 at 3:35PM GMT.

Comment 5

Personally, I only ever use graphical texts for pixel-perfect logos.

So said RealOne on Saturday 19 March, 2005 at 8:49AM GMT.