Overview: Image Fonts versus Text Fonts

... But with a typewriter I can represent only letters. Text fonts are conveyed through actual words being inserted with the keyboard into the HTML document just as the words you are reading at this very moment are. Image fonts are created with the use of a painting or illustration application. With the application an object which is an image is created. The object is saved in a file and it is sourced by the html document.

            

The information conveyed in the square boxes above this line is contained in one single image called a JPEG. This object has been inserted into the page three times using three different sizes as a demonstration. The actual object can exist in various states, but really it is the same object.

JPEGs are used to compensate for the fact that not all people have every kind of font in their computer. When designing a website, I want to have control of the style, design, the look of my pages. And I may want to convey information in font styles that you may not have in your computer. Thus I create an image that can be read by everybody's machine and in this way I can maintain control of the output that my audience is seeing.

You will also notice that in the JPEG above, the text is running sideways, upwards and downwards. This changing of direction of the font cannot be accomplished with a text font, only with an image.

In this section of the website I have tried to show a selection of graphic fonts within JPEGs and have broken them down into the following catagories:

Serif Fonts: A serif font is one that has letters which are given a foot on the base of the letter and crossbars within the formation of the letter. The most popular serif font is Times New Roman with Courier running a close second. Courier is the font style that typewriters used when they were first invented.

Sans Serif Fonts: The word 'sans' is a French word meaning 'without'. Thus sanserif is a font without serifs. Arial, and Verdana are two of the more popular Sanserif fonts.

Emotive Fonts: Fonts which cannot be characterized as Serif or Sanserif I call emotive. I hope you have Continuum Bold loaded into your computer, otherwise you will not see the font here. This discrepancy within computers illustrates the need for image fonts. This font also illustrates another discrepacy. It should read Continuum, but the spacing tags within the html have squashed it and it reads as Conllnuum.

Gothic & Symbolic Fonts: A font called Symbol is loaded into most computers and looks like this SYMBOL Webdings are also loaded into most computers and help us to create small pictures such as these W e b d i n g s G H l v which can be used to bullet your web pages.

Hand Handwritten: This particular script called Edwardian Script ITC may not be visible to you but is available in many computers. Edwardian Script ITC

Hand Printed: A fairly popular text font which is usually found in most computers is Comic Sans MS which I have dubbed as a hand printed font because it looks like as if it has been neatly printed. Another one is DomBold BT.

Narrow Fonts: I characterize some fonts as narrow fonts because they are specifically designed to be narrow. If you have this font Fontdinerdotcom in your computer you will see what I mean. Another characteristically narrow font is Haettenschweiler