Sie sind auf Seite 1von 27

Chapter 3

Text & Typography

MELJUN CORTES
Chapter Objectives
Definetypographyandexplainhowitisusedon
Webpages
Describethedifferencesbetweenprinttypography
andWebtypography
Listandexplainthedifferentcategoriesoffonts
Listthefactorsthatmustbeconsideredwhen
choosingafontfortheWeb
Listanddescribethedifferenttypedesignfeatures

Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.
Chapter Objectives
Explainhowthedifferenttypedesignfeaturescan
beusedtoenhanceaWebpage
DefineCascadingStyleSheetsandexplainhow
CSSisbeneficialtotheWebdesigner
Listanddefinethefourdifferenttypesofcascading
stylesheets
Describehowgraphicbasedtypographycanbe
usefulontheWeb
DefinePortableDocumentFormatandlistsomeof
theadvantagesanddisadvantagesofusingPDFfiles
ontheWeb
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
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.