meljun cortes multimedia lecture chapter3 text & typography
Post on 16-Jul-2015
39 Views
Preview:
TRANSCRIPT
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.
top related