Sie sind auf Seite 1von 27

Chapter 3 Text & Typography

MELJUN 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 Monitors calibration
Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.

Type Design
Line Length
Viewers 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
Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.

Not supported by older browsers

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.