May 10, 2008, 12:53 am

Website Design

Designing With Graphical Text

 

The stylesheet that is linked to this page will instruct your browser which font, font-colour and font-size to use for displaying text. Although most can view this in the way I have devised, there is no absolute guarantee of it.

In the text that follows, I know for certain that barring the use of a text browser, and regardless of all but one browser setting, you will see fifteen words in the first line and fourteen in the second. The text will be displayed in a dark blue Verdana font.

The single browser setting I mentioned is that for displaying images. You will not see any of the above text if this is switched off.

Graphical text causes a number of significant problems:

• It bloats files and consequently increases download times.
• It is not searchable.
• It pays no regard to visually impaired users.

Many designers, on the other hand, claim that the only way to guarantee, with complete certainty, the accurate reproduction of their carefully crafted typographic layout, is to either use a gif, or create their pages using Flash.

Increasingly I have found myself siding with the HTML purists. For displaying most academic content it is reasonable, I believe, to use marked up paragraphs of text. This will be displayed accurately and quickly.

Graphical text does have its uses though. An obvious example is the labelling of diagrams where absolute placement of text is required. Displaying text as a graphic, used sparingly, can give your pages an improved layout and therefore improve legibility.

My views on the choice of font are again dictated by the maxim that one should use the right tool for the job. A screen font should be chosen for displaying text on a monitor. Trebuchet MS, Verdana, Lucida, Arial or Helvetica are some of the options provided for by my stylesheets. All of these fonts are sans-serif. They look good and are easy to read. Serif fonts, e.g. Times New Roman, were created for printing text on paper. Serifs are curved, but a screen consists of a rectangular grid of pixels. Consequently these carefully designed serif fonts, particularly at smaller sizes (e.g. 10 or 12 point), do not display accurately on a monitor.

The text gif above has been assigned some alternate text and will aid any user employing a text browser. It is worth taking time to add the alt attribute to the image tag. In this example, I have added some extra information in the HTML

alt="Some verdana text that is displayed as a gif"

I will return to alt tags when I discuss XHTML

For a good resource on graphic design for the Web, go to Web Design for Designers

There is one area where the academic does need to consider using graphics on a wider scale. The next page looks at the display of mathematical expressions on the web.

Next page » Displaying Mathematics on the Web

Previous page « Introduction to CSS

Copyright © 2008 John McSweeney