Larger Text Normal Text Smaller Text

IT 280 Web Development II, Spring 2008

Typography

The purpose of most web sites is to provide content to the user. An effective web page requires more than correct HTML or JavaScript to accomplish that.

It also needs design, the intangible aspect of structure, layout, content, and presentation that determines how the site looks and functions for the user.

One important aspect of design is typogrtaphy.

What is typography?

Typography is "The art and technique of printing with movable type." ( The American Heritage® Dictionary of the English Language, Fourth Edition) In web design, it includes the choice of fonts to use, the placement of text on the page, and its relation to other page elements such as images.

Text needs to be legible - easily and clearly visible and readable. Legibility is affected by typeface (aka font family), size, contrast, and alignment.

Typefaces

There are many different typefaces available on computers. Many, called printer fonts, are designed to be best for printing. Good printers have a high resolution and can produce fine detail. Garamond is an example pf a printer font.

Some, called screen fonts, are designed to be best for viewing on the monitor. Screen fonts take into account the lower resolution of a monitor compared to a printer, and other factors that affect readability. Georgia and Verdana are specifically designed for computer display.

Some typefaces are compromises that are suitable, thought not optimal, for both media. Times New Roman and Arial are examples.

Serif and sans-serif?

The characters in serif fonts have small extensions, called serifs, at the ends of the main strokes. The characters in sans-serif fonts do not have these extensions.

Times New Roman and Arial are commonly set as the default serif and sans-serif fonts for browsers on Windows. If you do not specify a font family style rule, Times New Roman is most likely, but not necessarily, the one the user will see.

Uses of fonts

Some typefaces are are good for the majority of the text on the page, the paragraphs that provide content. They are legible when rendered in small sizes. They are called called body fonts. All of the examples above are body fonts.

Some other typefaces are used primarily for headings, decoration, or special purposes. They stand out and call attention the text that uses them. But they are usually not legible at the smaller sizes used for the general text content.

The same text can look very different, and its readability be different. when rendered in different fonts

Traditionally, body fonts were usually serif fonts because they were more legible. The serifs helped guide the eye across the page. They were created by the natural movement used to finish the stroke of a quill pen and the action used to carve the molds for metal type.

Usability research has found that sans-serif fonts are more legible at small sizes on the screen because of the lower resolution.

When you specify a font family style, the browser uses the first one on the list that it has available. You should specify at least one font for Microsoft and one font for Macintosh, and also list the general category as the last option. For example, with the rule

    body {font-family: Georgia, "Times New Roman", Times, serif}

the browser will use the Georgia font if it is installed. Goergia is newer than times New Roman, so older computers may not have it installed, so the browser will try Times New Roman. Both of those are Windows fonts from Microsoft, so on a Macintosh computer the browser may not find them and will use Times, which is a Macintosh font that is very similar to Times New Roman. If none of the three are available, the browser will use whatever it has specified as the default serif font.

The alternatives should make sense. The above alternatives are all serif fonts that are good for screen display. No matter which font the browser ends up using, the page will look pretty much the same.

A rule for sans-serif fonts might be

    body {font-family: Verdana, Arial, Helvetica, sans-serif}

Helvetica is a Macintosh font that is comparable to Arial.

The rule

    body {font-family: Verdana, Georgia, monospace}

isn't offering a sensible set of alternatives. A computer that doesn't have Verdana installed won't have Georgia either, and monospace fonts are very different from both.

Contrast

Contrast between the text and background is an important aspect of legibility.

Some When in doubt, black text on a light background is the most legible choice. And be sure to specify the styles for both the body background color and color. Don't leave it to chance.

Whitespace

Whitespace, empty areas without text or images, contributes to legibility. Because the resolution of the screen is so low, having sufficient whitespace is important for web pages.

An example of a page with minimal whitespace.

Margins and padding are the primary ways to create whitespace for text content.

Justification

Alignment refers to the placement of text and images in relation to the edges of the window or adjacent elements.

Justification refers to the horizontal alignment of a block of text. Style rules specify justification with the text-align property.

Left justified text is aligned along the left margin; it is sometimes referred to as "ragged right".
Right justified text (ragged left) is just the opposite.
Text that is aligned to the centerline of the block is simply called centered.
In typography, text that is aligned to both the right and left margins is called fully justified. In CSS the text-align value that creates full justification is justify.

Alice stood looking after it, almost ready to cry with vexation at having lost her dear little fellow-traveller so suddenly. 'However, I know my name now.' she said, 'that's SOME comfort. Alice--Alice--I won't forget it again. And now, which of these finger-posts ought I to follow, I wonder?'

It was not a very difficult question to answer, as there was only one road through the wood, and the two finger-posts both pointed along it. 'I'll settle it,' Alice said to herself, 'when the road divides and they point different ways.'

But this did not seem likely to happen. She went on and on, a long way, but wherever the road divided there were sure to be two finger-posts pointing the same way, one marked 'TO TWEEDLEDUM'S HOUSE' and the other 'TO THE HOUSE OF TWEEDLEDEE.'

'I do believe,' said Alice at last, 'that they live in the same house! I wonder I never thought of that before--But I can't stay there long. I'll just call and say "how d'you do?" and ask them the way out of the wood. If I could only get to the Eighth Square before it gets dark!'

Although print media commonly use fully justified text, it is not recommended for web use. Typesetting techniques used for books and newspapers fil in with evenly distributed extra space between words. Words can be hyphenated to optimize the use of the space on a line. Web browsers don't auto-hyphenate (and automatic hyphenation rules still make error), and the techniques they use for adding space are crude.

Centered and right-justified text are Ok for headlines or for a special effect with a short block of text, but should not be used for the main content because they are difficult to read.

Beginners to HTML sometimes center all the text because it creates a kind of design on the page—and they already know what it says. However the visitor is trying to read the content for the first time.

When specifying a font size, it is important to think about the user, not the designer. Unfortunately, many designers design for the computer they are using, not the one the user is using. About 30% of web users are using 800x600 resolution. The majority of web users are using the Internet Explorer browser. If you can, test out your pages on a variety of systems.

Text that is too small is very difficult, or even impossible, to read, especially by older individuals. Be sure your font size is large enough to be read.

Use a size unit that is relative and changable rather than fixed, so it can be rescaled to larger or smaller sizes. Points, the unit of measurement used in word processing are fixed. If you specify the font size in points or pixels Internet Explorer will not change the size even if the user tries to make it larger or smaller. (Another good reason to switch to Firefox.)

Relative units include percentages (%) and ems. They are calculated relative to the font size for the next outer block.

What's an `em`?

The em is a unit measurement for type. Historically it referred the width of the capital letter M, which was the widest character. It was used to designate spacing in typesetting. It was also used to define the em-dash character—a long dash one em in length. It is useful in CSS rules because it always refers to the size of the font, whereas percentage refers to the box.

Capitalization and emphasis

THE "LITHOGRAPH" FONT SAMPLE IS DIFFICULT TO READ, NOT ONLY BECAUSE OF ITS UNUSUAL SHAPES, BUT ALSO BECAUSE THE LETTERS ARE ALL CAPITALS. TEXT IN ALL CAPS IS MORE DIFFICULT TO READ BECAUSE IT IS HARDER TO TELL WHERE SENTENCES BEGIN. AND TO SOME READERS IT LOOKS LIKE YOU ARE SHOUTING.

for the same reason, text that is all in lower case, without any leading capitals, is also harder to read. in print, there is more space after the end of a sentence than within it. but browsers do not display multiple spaces.

Capitalizing The First Letter of Every Word Is Also Not Recommended. Even Headings Are Often Best Written With Only A Single Leading Capital.

Emphasizing using underlining or similar techniques should also be used with caution. As with all capitals, it more difficult to read and loses the emphasis effect if uoverused. Also, underlining is not a good choice for emphasizing words or phrases because it makes them look like links. Traditionally, underlining was used in handwritten and typewritten manuscripts as a substitute for italic or bold text because those could not be produced.

Capitalization using CSS

The case of displayed text can be designated using the text-transform property. The possible values and their effect are

capitalize: Puts the first character of each word in uppercase; other characters are unaffected.
uppercase: Puts all characters of each word in uppercase.
lowercase: Puts all characters of each word in lowercase.
none: No capitalization effects.

The text-decoration property

This property describes decorations that are added to the text of an element using the element's color. Underlines, overlines, and line-throughs are applied only to text (including white space, letter spacing, and word spacing): margins, borders, and padding are skipped. If an element contains no text, these text decorations should not be rendered. For example, images will not be underlined.

The possible values and their effect are

none: Produces no text decoration.
underline: Each line of text is underlined.
overline: Each line of text has a line above it.
line-through: Each line of text has a line through the middle.
blink: Text blinks (alternates between visible and invisible). Conforming user agents may choose to simply not blink the text.

Creating Drop caps

Some paragraphs on this page begin with a drop cap - a large capital that drops below the baseline. This simple version is produced by floating the first letter.


      h1+p:first-letter, h2+p:first-letter  {
        font-size: 3em; 
        font-weight: bold; 
        font-style: italic;
        color: #777; 
        background-color: inherit; 
        float: left; 
        padding-right: 4px;
        padding-top: 5px;
        }

Notice the use of adjacent sibling selectors and the first-letter pseudo-element.

Indentation

Indentation is specified by the text-indent style property. The value is a length or percentage. A negative value will produce a hanging indent.

This paragraph illustrates indentation. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis justo ante, consequat id, consectetuer ut, aliquam at, arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

  p.dent { 
    text-indent:  1em; 
    }

This paragraph illustrates a hanging indent, created with a negative indentation value. Notice that the outdented text is outside the normal margin. The entire paragraph could be kept inside the body margin by adding padding.

  p.hang { 
    text-indent:  -1em; 
    }

Spacing

Properties related to spacing (besides margin and padding) include letter-apacing, word-spacing, line-height, and white-space.

Letter spacing and word spacing can be effective, but should be used sparingly. In general, it is not a good idea to get too creative with such spacing on body text (the main text in paragraphs.

The effect of letter cpacing and word spacing can be unpredictable with different browsers. Limit their use to headings and similar element where a special effect may be desirable.

The white-space property

The white-space property specifies how whitespace (blank space, including spaces, tabs and newlines) is handled. Values are:

At this time, the only values that you can count on as being supported are normal and pre.

Design

On the Web, as in print, typography is an important element of design. Entire books - and more - have been written on how to select fonts and place typographic elements. At the same time, some of the design techniques that apply to print are not suitable for use in web pages because of the variability of browsers, display media, and user settings.

Characteristics of a good screen typeface (Reference: "The Anatomy of Web Fonts")

Some typefaces that exhibit all or most of these properties are Verdana, Trebuchet, and Helvetica. The first two are designed specifically for screen display.