Visual content	Issues for visual content	Image production	Image acquisition	Image manipulation	Image creation

Both Photoshop and Fireworks offer editable text functions ­ the text is not embedded in the image until it is saved for web.

Text in graphics should be used only for the following elements:

• Site/course headers and titles where the font style and colour are important
• Navigation buttons, with a minimum amount of test, clearly legible
• Labelling on charts and diagrams ­ as little as possible, clearly legible

It should not be used for:

• Blocks of text and tables, which can more easily and accessibly be created as text in the HTML
• Multiple headers, sub-headers, sub-sub-headers etc

Advantages of text in graphics include:

• Able to superimpose text on images
• Control over font, size, character and line spacing
• Able to match colours and styles to other elements
• Antialiasing (smooth edges)

Disadvantages include:

• File size - graphics are very much larger than HTML text
• Display cannot be customised by user
• More laborious to produce and edit
• Not accessible to screen-readers or browsers without graphical display

Font size and style

As a rough guide, the smallest text you should use (on navigation buttons etc) is 11pt, but it does depend on the particular font you are using.

Headers may need 30, 40 or even 60pt size.

Fonts that work particularly well on screen (they were created for on-screen use) are Verdana (sans serif) or Georgia (serif). Other reliable fonts are Helvetica, Arial, Gill Sans (sans serif), or Palatino, Times (serif).

It is a matter of opinion, but it is a widely held view that sans serif fonts are more legible for on-screen use. The larger the font, the less that is an issue.

EXAMPLE Font sizes