Information on the World Wide Web is made up primarily of text and images. The majority of text is written in the "roman" alphabet, though there are many other writing systems in use on the Web (see module W22f, "Odd Characters in HTML").

This module discusses the basic issues involved in putting text into Web pages: typography, sizes, and graphics.

According to the Britannica Concise Encyclopedia Online, typography is the "Design or selection of letter forms to be organized into words and sentences and printed or displayed electronically."

So what we're discussing here is the selection of letter forms - the shapes and sizes - of the letters we use for building words and sentences on Web pages.

The term font is used a lot in discussions of typography. The term originated during the early years of printing (late 14th and early 15th centuries) to refer to a set of letters designed to harmonize in appearance with each other. These were stored in a fons (from Latin, meaning 'source' and brought to English as font) usually made up of a pair of wooden cases.

The cases were arranged in a standard way, with multiple compartments filled with lead slugs. Each lead slug had a relief image of a letter, number, or symbol - called a type of the letter, because the printing process produced many instances of each "type".

When the two cases making up a font were set up for use, one case was mounted somewhat higher than the other (see illustration at left); the upper case contained the capital letters, while the lower case - easier to reach - contained the more frequently used small letters. From this tradition, we get the terms uppercase meaning capital letters, and lowercase meaning small letters.

In order to use letters effectively on the Web, we don't have to understand everything about typography,but there are several aspects we do need to understand...

• Size and measurements
• Families of fonts
• Grouping fonts into larger classifications
• Variations within families of fonts
• Ways to emphasize text
• What fonts communicate to viewers

Let's start with the communication issue: after all, why shouldn't we just use whatever default font a browser supplies?

sub·lim·i·nal [2] : existing or functioning below the threshold of consciousness <the subliminal mind> <subliminal advertising>. Merriam-Webster Online Dictionary.

The answer is that different font-families carry different subliminal messages. Each of the illustrations below consists of the same words; ask yourself in what ways the different fonts make a different impression..

Font-family: Verdana; Classification: Sans-serif gothic

Font-family: Georgia; Classification: Serif roman

Font-family: Lucida Handwriting; Classification: Script

Font-family: Black Chancery; Classification: Black letter

Font-family: Papyrus; Classification: Fantasy

Font-family: Comic Sans MS; Classification: Comic

This passage is from the Britannica Concise Encyclopedia Online

Here's the central dilemma of typography on the Web:

• The Web was intended to be flexible enough to allow people with any computer and any browser to get the message
• Designers usually want to determine exactly how their work will appear

These two aspects clash when a designer chooses a particular font, but the font is not available on all users' computers.

The rules of the Web state that if a designer-requested font is not available on a user's computer, the browser will substitute its default font.

The default font configured into all browsers to date is Times New Roman. This is a good choice because:

• Letters in Times are simple, clean, and readable
• Almost all computers are equipped with Times New Roman font
• Times is compact and allows a relatively large amount of text to fit in a given space

The parallel texts here discuss and illustrate both the advantages and the drawbacks of Times New Roman. As you read the two texts, notice differences in readability and size:

The display on the left, which should be in Times New Roman, takes up less space but is slightly less readable. On the right should be Georgia, which was design specifically for computer screens. It is somewhat more readable, but pays for its readability by taking slightly more space. Georgia was developed in 1997-8 by type designer Matthew Carter, under contract for Microsoft. Along with Georgia, Carter designed sans-serif Verdana specifically for use on computer screens. Because they have been distributed free of charge with Microsoft's Internet Explorer browser, these two fonts are widely available.

Bottom line: Use Georgia as your normal serif font, and Verdana for your sans-serif applications.

So, given the lack of control a designer has over fonts on the Web, what are the options?

Plan for flexibility: don't specify fonts at all

This is a simple, straight-forward way of designing Web pages, and has the added advantage that it leaves the user, rather than the designer, totally in charge of font selection.
On the other hand, users are often unaware of how to choose browser fonts to best display a particular Web page; and a certain amount of variation in fonts is usually helpful to draw attention to different types of document content, and you may wish to convey that subliminal message to the user!

Specify the fonts you want and hope for the best

This is also simple, but suffers from pretty low likelihood of success.

Specify the fonts you want with generic alternatives

When you specify fonts, either in HTML or CSS, you can give a list of fonts, like this:

CSS	HTML
font-family: Verdana, Arial, sans-serif;	<font: Verdana, Arial, sanserif>...</font>

In both cases, this instructs the browser to look on the user's computer for the first font on the list (Verdana). If it's available, it's used, but if not the browser looks for the second font on the list (Arial in this example). This continues through however many fonts are listed until one is found. But if none of the listed fonts is found, the browser will use the generic font suggested at the end of the font-list - in the case spelled sans-serif in CSS or sanserif in HTML. (More on the generic fonts soon.)

Use graphic images of text, with whatever font you like

If you have access to a graphics program, you can type text onto an image "canvas", save it for the Web (usually as a .gif file) and link it into your Web document as an image. Once the text is saved in image format, the font-definition file is no longer needed, so the text looks just like you want it to, for everyone.
This technique is good for limited amounts of text, but the more text is presented in image format, the slower and clumsier it gets for both the designer and the person downloading the Web page. So this option should be used with restraint.

Like many decisions made by Web designers, this one involves trade-offs. A good Web designer is one who uses a combination of techniques appropriate for each Web document.

Font-families can be grouped in many ways, but as Web designers it's important to note the ways CSS classifies them. W3C recommends that we specify a "generic font" at the end of each list of font-family options, so we need to know what W3C considers the generic families to be. These are the generic classifications recognized in both CSS-1 and CSS-2 specifications; they are not formally defined, but examples are given:

• serif (e.g. Times)
• sans-serif (e.g. Helvetica)
• cursive (e.g. Zapf-Chancery)
• fantasy (e.g. Western)
• monospace (e.g. Courier)

See also W3C's "CSS tips & tricks: Font Families".

These can be applied like this:

• External, or Internal/Embedded:
  p {font-family: "Comic Sans", "Comic Sans MS", cursive;}
• Inline:
  <p style="font-family: 'Comic Sans', 'Comic Sans MS', cursive;">Welcome home!</p>

What do each of these terms mean?

Term	Description	Example
Serif	Red circles highlight the serifs in the Georgia font-family illustration at right. any of the short lines stemming from and at an angle to the upper and lower ends of the strokes of a letter. Features: Easiest type to read in large blocks of text. Gives a formal look to headings.
Sans-serif	a font-family without serifs (or with very few) Blue circles highlight the places where serifs are missing in the Verdana font-family illustration at right. Features: clean, crisp look. Easiest type to read in small sizes and   inverse colors   (light text on dark background).
Cursive	looking like handwriting, often by joining the letters in a word (or many of them) together. The illustration at right features font-family 'Lucida Handwriting' writing itself. Features: Cursives give an informal, personal, or elegant look, but many are harder to read. They can be used for headings or special-effect sections, but should not be over-used.
Fantasy	any font-family that creates a romantic, period, artistic, or unusual effect. The illustration at right shows font-family 'American Uncial', which is actually Irish in inspiration. Features: There are so many fonts that fall into the "fantasy" category that they are nearly impossible to categorize. They may look funny, old-fashioned, or just plain crazy, but they should all be used sparingly and in fairly large sizes, since they are not designed for easy reading, but rather for special effects.
Monospace	a font-family in which the symbols all have the same width. The other fonts we've discussed above are 'variable-width', which means each symbol has a width determined by its shape. For example, in variable width fonts the letter M is wider than the letter i, but in monospace fonts M is squeezed a little while i is stretched a bit. The illustration shows 'Arial' - a variable-width font - changing to 'Lucida Sans Typewriter', which is monospace. Features: Monospace fonts look like typewritten text, so you may want to use them to give a typewriter effect. However, they take up more space that the equivalent variable-space fonts, and usually don't look as good in normal text. Monospace fonts are easier to line up though - for example, in columns of numbers. Monospace is used by default in HTML tags <pre> and <code>.

There are several other aspects of fonts that are important in Web work:

• Font weight
• Font styles
• Font variants
• Font sizes

We'll look at the first three briefly in this section, and cover font sizes in the next.

Font Weight

Fonts are classified as "heavy" (bold) or "light" depending on the thickness of their lines. Heavy fonts have thicker lines than light fonts. CSS allows several ways of controlling font weight, but in most cases only two weights are actually available: normal and bold.

Weighty Words

Four words can be used to denote desired font-weight: lighter, normal, bold, and bolder

Comparing these three variants, the first and second probably look the same, as do the third and fourth, because the font-family in use doesn't have a "lighter" or a "bolder" variant. When that happens, the browser uses the normal version for "lighter" and the bold version for "bolder".

Numeric Weights

To allow more precision in setting weights, CSS allows the use of numbers as values for the font-weight property. The only numbers allowed are 100, 200, 300, 400, 500, 600, 700, 800, and 900, which correspond to numbers used in font representations like OpenType. Here's how the numbers work:

• 100 is the lightest; 900 is the heaviest. If a font-family has 9 font weights available (or if 9 font weights can be created on-the-fly), each number will indicate a slightly heavier variant than the next-smaller number.
  However, hardly any font-families have nine weight variants! So ...
• 100, 200, and 300 are the same as normal, unless a lighter-weight font variant is available in the same font-family.
• 400 corresponds to normal
• 500 and 600 will be heavier than 400; "medium" if that is the name of one of the font-family's variants. If a "medium" variant isn't available, 500 will be the same as 400, and 600 will be the same as 700.
• 700 corresponds to bold or equivalent font variants.
• 800 and 900 will be darker than 700 if any darker variants of the font-family are available, but if not they will be the same as 700 - that is, "bold".

While it's nice to know that CSS allows nine different font-weight variants, it doesn't do much good since the vast majority of font-families on personal computers have only two weights.

Bottom line: stick to font-weight: normal or font-weight: bold.

Font Styles

Three possible font-styles are defined in CSS: normal, italic, and oblique.

Font Style Normal

This is generally upright, except in some cursive or fantasy fonts where a slant is part of the basic design of the letters.

Font Style Italic

Slanted to the right, italic fonts may have slightly more cursive forms for some letters - for example, Georgia and Times have italic styles:

Code View	Browser View
<div style="font-family: Georgia, 'Times New Roman', serif; font-size: 200%; font-weight: bold;">     <span style="font-style: normal;">a</span>     <span style="font-style: italic;">a</span>     <span style="font-style: normal;">g</span>     <span style="font-style: italic;">g</span> </div>	a     a     g     g

Font Style Oblique

Like italic fonts, oblique fonts are slanted. The only difference is that in oblique fonts, all letters have the same shapes as their "straight" cousins. Verdana and Arial have oblique styles:

Code View	Browser View
<div style="font-family: Verdana, Arial, sans-serif; font-size: 200%; font-weight: bold;">     <span style="font-style: normal;">a</span>     <span style="font-style: oblique;">a</span>     <span style="font-style: normal;">g</span>     <span style="font-style: oblique;">g</span> </div>	a     a     g     g

Practically no font-families have both oblique and italic variants, so if an italic variant is requested and only oblique is available in that font-family, browsers use the oblique; if oblique is requested but not available, the italic will be used.

Bottom line: stick to font-style: normal or font-style: italic.

Font Variants

The only font variants specified by CSS are normal and small-caps. Normal is the default, of course.

Text in small caps replaces lower-case letters with capitals in a smaller font-size.

Measuring text can be pretty complex, because there are several aspects of letters that are measured. In addition to the letters themselves, the space above and below the letters, and between the lines, is also measured.

Measuring Letters

Here are the aspects of letters that are commonly measured; some can be used in CSS to set the font-size, or the size of various entities relative to the current font-size.

Key	Aspect Measured	CSS Example
1	x-height: the main body of the letter	Make the margin twice the size of the current font's x-height - margin: 2ex;
2	Ascender length: parts the rise above the main body
3	Descender length: parts that drop below the main body
4	x-width: width of an average lower-case letter
5	N-width: width of an average upper-case letter
6	M-width: width of the widest upper-case letter	Make the margin the same size as the width of the current font's capital M - margin: 2em;
7	Line height: vertical height from top of one line to the top of the next. This can be greater than the height of the letters, if you want to have space between the lines.	Make the total height of the current line 20 points - line-height: 20pt;

---

Measuring the Boundaries of Type

Using CSS, it's possible to set the size of "boundaries" around two aspects of type:

• The lines of text themselves, using a <span> tag; and
• The entities they're part of, using a <p>, <div>, or <td> tag.

(This is relates to what is known as the "CSS box model".)

The illustration here shows these boundaries in a short paragraph.

In this illustration, the empty spacing is represented by dotted or dashed lines; borders which can be visible lines are solid. The number  7  relates to the line-height illustration above.

CSS allows us to set values for three kinds of "Boundaries":

• Padding: the spacing between the edge of the text and the border; its size is zero unless you set it to a different size. Here's an example of a class that sets the padding:
  .class1 {padding: 3px;}
• Border: an area that can be given color and style properties. The examples here show several ways to use the border settings:
  • none (the default setting)
  • solid
    .class2 {border-style: solid;}
  • dotted
    .class3 {border-style: dotted; border-color: red;}
  • dashed
    .class4 {border-style: dashed; border-width: 3px;}
  • double
    .class5 {border-style: double; border-width: thin; border-color: #f9c}
  • groove
    .class6 {border: groove medium green;}
  • ridge
  • .class7 {border: thick blue ridge;}
  • inset
    .class8 {border: fuchsia inset 1em;}
  • outset
    .class9 {border-style: outset #3cf medium;}
  (Most browsers support the first four; the last four are not well supported.)
• Margin: the empty area between the border and the next entity. Like padding, this defaults to zero, but you can set it to something larger. For example,
  .class10 {margin: 10px; }

Each of these boundaries - padding, border, and margin - forms a rectangle. But you can set the properties to each of the four sides of the rectangle individually: top, right, bottom, and left:

• .sample1 {padding-left: 5px; border-left: thin dotted blue; margin-left: 3px;}
• .sample2 {border-top: 10px solid aqua;}
• .sample3 {margin: 8px; padding-left: 3px; padding-right: 3px;}

One advantage offered by CSS over HTML is the variety of units of measurement offered - only pixel and percent are available in HTML. These units can be used not only for text, but for all other aspects of the page that can be measured. This table summarizes CSS measures; some need clarification and are discussed in more detail below:

Overview

Relative vs. Absolute Units

Absolute units are those that are defined in the "real" (non-computer) world. They all share a serious problem: they don't translate well to computer screens. The reason is this: screen images are built up of tiny dots ("pixels") whose actual size can be controlled by the end-user by setting the screen's resolution. Unfortunately, there is no feed-back loop to let browsers know how big the pixels are. Older screens used approximately 72 pixels per inch (ppi), but newer screens are routinely configured show 104 or more pixels per inch. The ppi of a screen depends on the resolution (for example, 800 x 600 or 1024 x 768) and the monitor size (for example 17 or 21 inches). With screen size and settings unavailable to browsers, it is very unlikely that any of these absolute units will "measure up" to reality when displayed on users' screens.

Relative units depend on the size of entities of which they are a part - or, in the case of text, on the default size of text in a browser. They have the apparent disadvantage of lacking precise control, but actually their dependence on the viewing environment fits nicely with the original intent of the Web, to adapt itself to multiple viewing environments.

Notes and Definitions

Point: pt

An antique printers' measure; there are 72 points in an inch.

Pica: pc

Another antique printers' measure; there are 6 picas in an inch, and 12 points in a pica.

X height: ex

The height of the main body of a lower-case letter, as shown by marker  1  in the illustration. This is dependent on the font currently in use. There is a problem with this measure: browsers don't always know what it is for a given font, and estimate it based on the pixel- or point-size of the font in use. Since this is dependent on the size of the current font, it is not used for setting font size. Instead, it is useful for setting the relative size of margins, borders, and padding.

M width: em

The width of an upper-case M of the font currently in use, shown by marker  6  in the illustration. Like ex, em is used for setting relative sizes of objects around the text, rather than the text itself.

Pixel: px

A dot used to build up a computer display. The actual size of a pixel is dependent on screen size and resolution, but it is the most dependable measure of size available. Most browsers can be relied upon to use the actual number of pixels you specify when rendering a Web page on a computer screen.
Things get more complicated when a Web page is printed, because compared with screens, printers all display many more pixels in a given amount of space. The typical screen displays about 104 pixels in a vertical inch, while a typical printer displays 600 dots in a vertical inch. Fortunately, all major browsers (version 4 and above) translate fonts sized in pixels into reasonable sizes on printers.

Percent: %

The critical question when using percent to size something is, percent of what? The answer for text is, percent of normal text. You can set normal text size for the body in an "absolute" unit of measure and use percent measures for the rest; if you don't set it, normal text is determined by the browser's style sheet. (Yes, Virginia, every browser has a default style sheet!) The default style sheet is what usually sets 12-point Times New Roman as the default text font-size and font-family, but just as the user can change the default font-family, the user can also change the default size. This is helpful for people with various visual impairments, but the style sheet used by a Web page usually overrides the default browser style sheet.

Bottom line: Use percent % to specify the size of fonts, and do not set the default size in absolute units for the body as a whole - let the users' preference, set in the browser default, determine the basic size of text for the page.

Graphic text is writing represented by images - that is, something that appears to be text, but is actually a GIF or JPEG.

Because graphic images take longer to download than the same amount of text, graphic text should be avoided unless there are good reasons for using it.

When is graphic text worth the cost of slower download?

• When a special font represents a corporate or organizational image;
• When it's important to create a mood or atmosphere by using an appropriate font;
• When page design calls for curved, vertical, or text on an angle.

Since graphic text "costs" bandwidth, it's important to use it carefully:

• When the potential audience includes people with low-bandwith connections such as phone modems, use graphic text very sparingly.
• When the audience is all reasonably high-bandwidth, more graphic text can be incorporated without users' paying such a heavy "price".

And when graphic text is created, it should always be carefully exported to use the most efficient storage format consistent with its appearance.

The alt attribute should be the same as the graphic text, so that when the graphic is not visible, viewers will be able to see exact same text instead.

What is graphic text best for?

• Most important headlines
• Buttons
• Curved or differently-oriented text (vertical, on an angle, or upside-down - if you really want to put text upside-down!)

But graphic text cannot be edited with normal HTML editing tools - it must be edited with graphics tools. So it's much less convenient to update and correct than normal HTML text. In the next section, we take a look at graphic tools for creating text.

Though somewhat less convenient, tools for building graphic text are abundant. Here is a summary:

Microsoft Office Draw

Available with Microsoft Office applications such as MS Word, Excel, and Powerpoint. A wide variety of interesting text can easily be created using text boxes and WordArt. The drawback is that getting these into GIF or JPEG usually requires another graphics program such as Photoshop or Fireworks.
Link to information about MS Office Draw:

Adobe Photoshop or Illustrator

These are premier graphics tools, priced accordingly. Either one can be used for building graphic text. An incredible amount of variation is possible with these applications, limited only by the imagination of the artist and their familiarity with the complexities of the software.
Link to information about Adobe graphics software:

Macromedia Fireworks or Freehand

Fireworks is designed specifically for creating Web graphics; Freehand is a general-purpose vector graphics application. Both can easily be used to build text graphics for the Web with a wide variety of interesting effects.
Link to information about Macromedia graphics software:

On-line tools

A number of Web-based services give you access to text graphic building software. A word of caution: many of these services offer graphics that are flashy, animated images. These can be very distracting to your users, and should be avoided for most audiences. Here's a sampling of sites:

• CoolText: http://www.cooltext.com/
• FlamingText: http://www.flamingtext.com/
• Signboard Factory: http://nis-ei.eng.hokudai.ac.jp/~yamamoto/factory/

Tips for Building Graphic Text

• When you design a series of graphic texts for the same Web page or site, it's helpful to do all of them at the same time. Otherwise, there may be noticeable differences in the size, alignment, color, and other features of the text. The result of small differences can be surprisingly distracting and sloppy-looking.
• Transparent background is usually best for headlines; buttons generally use colored or textured backgrounds.
• It's easy to get carried away with fancy features the graphics programs make available. Don't go overboard! Remember: your viewer has a reason for looking at your Web site, and if your graphic text is distracting or hard to read, they will resent it and go somewhere else.

This is the easy part! Once your graphic text is created, treat it pretty much like any other graphic image. Just a little more attention needs to be paid to the alt, height, width, and align attributes.

• The alt attribute is always required in valid HTML files, but it's particularly important with graphic text in case the image doesn't appear promptly. Unless there are special reasons, the value of the alt attribute should be the same as the text of the graphic.
• The height and width attributes aren't required but they are a great help in getting a page to render quickly, with a minimum of re-drawing by the browser. So, though they are helpful in all images they're especially important in text graphics, where multiple small images can make the viewer's experience very frustrating if the browser has to re-draw the window every time another one is downloaded.
• The align attribute has many different values to allow small images to be lined up precisely with surrounding text. Which one you use will depend on how the graphic image was aligned with the surrounding text when it was created in the graphics program. So the best plan is to experiment with the options and see what works best for a particular set of images. Align values that control vertical positioning:
  • baseline
  • top
  • middle
  • bottom
  • text top
  • absolute middle
  • absolute bottom