10. TypographyIn this chapter you will learn about:

The basic terminology & concepts of working with type A dozen typefaces and their characteristicsWhat screen-friendly fonts are & 3 examplesHow typography on the Web differs from typography in print How—using guidelines provided—to design typography for the Web that is readable, effective, and attractive

10.2 Concepts & Terminology

Type: any set of charactersFont: set of all characters in a specific style and sizeTypeface: design for a set of fontsTypeface (Font) Family: all the sizes & variations of a typeface (bold, italic, etc.)

Concepts and Terminology

Uppercase and LowercaseSerif: decorative line, circle, or flourish at the end of the stroke of a letter Sans Serif: “without” serif

Concepts and Terminology

This is a serif font. Times New Roman.

A sans serif font, Arial

Note: The above is an image, not text.

What does the size of a font mean?

Points used to measure vertical distance72 points per inch (vertical)

Picas used to measure horizontal distance6 picas per inch (horizontal)

Point size: vertical distance between the bottom of the lowest descender & top of highest ascender – plus a little bit

What does the size of a font mean?

These letters are all 72 points; the lines are one inch (= 72 points) apart

How big type is depends on the font size How big type is depends on the font size and on the design of the font family.and on the design of the font family. Don’t Don’t forget the “little bit”!forget the “little bit”!

The fonts are Garamond, Goudy, Bookman The fonts are Garamond, Goudy, Bookman Old Style, AlleyCat ICG, Caslon Open Face, Old Style, AlleyCat ICG, Caslon Open Face, Arial Black, Park Avenue, and Ultra Arial Black, Park Avenue, and Ultra Condensed Sans TwoCondensed Sans Two

Some text with reduced line spacing, to show what happens without the “little bit”

Leading (pronounced ledding)

The added space between successive lines

This is in addition to the little bit

Times New Roman, 10 point, with 1pt leading and with 3pt leading

A (Bakers) Dozen Font Families

2 serif 6 sans serif 2 monospaced1 script1 Wingdings1 Symbol (Greek)

Times New Roman & its screen-friendly cousin Georgia—in same font size

Microsoft commissioned the design of Georgia to be a screen-friendly font similar to Times New Roman.

Times Roman letters have oblique stress; Georgia has vertical stress

The pixel view: how Georgia gets vertical stress (the letters are bigger)

Times New Roman and Georgia

Six sans serif fonts

Comparison of some sans serif fonts

Arial bold and Arial Black

Arial and Impact

Arial and Trebuchet

Arial and Comic Sans

Arial and its screen-friendly cousin Verdana—in same font size

What are the discernible differences?

Horizontal Spacing

Proportional Spacing: each character is allotted width proportional to it’s natural geometry

Most fonts

Monospacing: each character is allotted exactly the same width

Computer programming code

Courier New and Times New Roman

Courier New is a monospaced font: the comma gets as much horizontal space as the W. For program listings, this is exactly what we want. Seldom desirable otherwise.

A bit of C++ code in Courier

In Times New Roman the same thing seems strange—to a programmer

Andale Mono is a screen-friendly version of Courier

Script Fonts

Designed to look like handwriting or to have the formal appearance of engraving

Nuptial Script

Miscellaneous & Decorative Fonts

Various symbols an specialty fonts

Webdings

Greek alphabet in the Symbol font

A Web Page is Not a Printed Page – Things you don’t know

The resolution of the user’s monitor The size of the user’s browser window The text size: users can change itThe settings and quality of the user’s monitor, in terms of brightness, contrast, & color balanceThe fonts available to a userVery different from print design!

Text in graphicsSome things a Web designer can’t be sure of:

What if you want to use a font your users probably don’t have? Answer: make a graphic of it

With a drop shadow

Body vs. Display Type

Display: Headers, titles, etc.Body: Main content of your text

Guidelines: Body Type on the Web

Use Georgia or VerdanaUse 10 point or 12 point typeAvoid bold or italic in body type, except for a few words for emphasisUse upper case only for the first word of sentences, proper names, etc.Use left alignmentUse dark text on a light backgroundNever use underlining for emphasis

Guidelines: Display type on the Web

Big is beautiful Use any typeface that is legible—if your users have it; insert as a graphic if they don’tUse the HTML line-height attribute for control of line spacing Use HTML letter spacing and word spacing to get effects you want Don’t use any form of animation of text—ever

Summary

In this chapter you learned:The basic terminology and concepts of typography A dozen typefaces and their characteristicsWhat a screen-friendly font is, and how it worksHow typography on the Web differs from typography in print Guidelines for text and display type on the Web