MELJUN CORTES Multimedia Lecture Chapter3

299 views

Published on

MELJUN CORTES Multimedia Lecture Chapter3

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
299
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

MELJUN CORTES Multimedia Lecture Chapter3

  1. 1. Chapter 3 Text & Typography MELJUN CORTES
  2. 2. 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.
  3. 3. 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.
  4. 4. 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.
  5. 5. 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.
  6. 6. Fonts • Vary from computer to computer – OS and application software Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  7. 7. 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.
  8. 8. Fonts • Uncommon/Exotic Fonts – Convert to graphic – Subject to copyright Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  9. 9. Fonts • FONT FACE = <“Exotic, Bookman, Bookman Old Style”> Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  10. 10. 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.
  11. 11. 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.
  12. 12. 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.
  13. 13. Type Design • Monospaced v. Proportional Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  14. 14. 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.
  15. 15. Type Design • Size – PC • inch = 96 pixels – Mac • inch = 72 pixels Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  16. 16. 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.
  17. 17. 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.
  18. 18. 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.
  19. 19. 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.
  20. 20. 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.
  21. 21. 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.
  22. 22. 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.
  23. 23. 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.
  24. 24. 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.
  25. 25. 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.
  26. 26. 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.
  27. 27. 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.

×