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 browsers

Harcourt, 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.