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.
Recommended