Chapter 3

Text & Typography

MELJUN CORTESMELJUN CORTES

Chapter Objectives

• Define typography and explain how it is used on Web pages

• Describe the differences between print typography and Web typography

• List and explain the different categories of fonts

• List the factors that must be considered when choosing a font for the Web

• List and describe the different type design features

Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.

Chapter Objectives• Explain how the different type design features can

be used to enhance a Web page

• Define Cascading Style Sheets and explain how CSS is beneficial to the Web designer

• List and define the four different types of cascading style sheets

• Describe how graphic-based typography can be useful on the Web

• Define Portable Document Format and list some of the advantages and disadvantages of using PDF files on the Web

Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.

Text v. Typography

• Text– Lay term

• Typography– Design term– Communication of a message using fonts and

typefaces

Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.

Paper v. Web

• Different– Printed piece remains consistent– Web is an elastic medium

• Web Designers– Must work across different platforms, screen

sizes and font sets

Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.

Fonts• Vary from computer to computer

– OS and application software

Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.

Fonts

• TrueType Fonts– Most consistent

• Printer Fonts– Specific to printer

• Screen Fonts– Specific to monitor

Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.

Fonts• Uncommon/Exotic Fonts

– Convert to graphic

– Subject to copyright

Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.

Fonts• FONT FACE = <“Exotic, Bookman,

Bookman Old Style”>

Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.

Type Design

• Vary style, size and color

• Subtleties change impressions/feelings– Graphic artist portfolio– White House– Corporate

Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.

Type Design• Typeface

– Slight variations create vast differences in the look and feel of a Web site

Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.

Type Design

• Serif v. Sans Serif– Avoid using too many typefaces– One of each or two sans serif

– Georgia (serif); Verdana (sans serif)

Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.

Type Design

• Monospaced v. Proportional

Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.

Type Design

• Italics– Avoid on screen because they pixelate

• Underline– Avoid unless used for hyperlink

• Bold– Acceptable for emphasis

• Case– Avoid uppercase because it is difficult to read

Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.

Type Design

• Size– PC

• inch = 96 pixels

– Mac • inch = 72 pixels

Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.

Type Design

• Spacing– Kerning - space between characters– Leading - space between lines

• Tough to adjust in HTML– <BR>, <P>, <PRE>– Invisible GIF

Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.

Type Design

• Color– Contrast– Hierarchy of Contrast

– Corporate Colors– Browser- or Web- safe color palette– Vary from screen to screen

• Gamma - lower on Macs/Unix - brighter color• Monitor’s calibration

Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.

Type Design

• Line Length– Viewer’s natural eye span - 3 inches– Use columns

• Wide• Narrow

– Approximately 50 characters long

– In HTML, use the <BLOCKQUOTE> or <PRE> tags

Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.

Type Design

• Alignment– Body; left align– Titles/Headings; left or center align

• Tough with HTML– <LEFT>, <CENTER>, <RIGHT>, <JUSTIFY>– <TOP>, <MIDDLE>, <BOTTOM>– <PRE>, <BLOCKQUOTE>– Invisible GIF

Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.

Cascading Style Sheets (CSS)

• Part of DHTML

• Type specifications used to control basic typographic needs such as:– Typeface– Leading/Kerning– Font size

– Color– Alignment

• Not supported by older browsersHarcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.

Four Types of CSS

• Inline– Insert into middle of HTML

– Must be added to each line

Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.

Four Types of CSS

• Embedded (Internal)– Top of HTML code

– Used throughout Web page

Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.

Four Types of CSS

• Linked (External)– Direct multiple pages to a common stylesheet– Changes instantly reflected throughout all

pages

Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.

Four Types of CSS

• Imported– Benefits of

linking

– Can override with inline and embedded styles

Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.

Cascading Style Sheets (CSS)

• Order of Importance– Inline– Embedded– Linked– Imported

– Default Browser Styles

Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.

Graphic-Based Typography

• Advantages– Helps control uncertainties of type

• Disadvantages– Larger file size – Increased download time– Not useful for the sight impaired

• Use <ALT> tag

Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.

Portable Document Format (PDF)

• Created with Portable Document Software– Adobe Acrobat and others

• Read by Portable Document Reader– Adobe Acrobat Reader

• Advantages– Versatile– Guarantees original document is seen as planned– Popular for forms and documentation

• Disadvantages– Requires Reader

Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.