2. Chapter Concepts Discuss Fonts Understand Fonts
OVERVIEW
Chapter Concepts
Discuss Fonts
Understand Fonts
Define Cascading Style Sheets (CSS)
Explain Additional Options for Implementing Text on the Web
Multimedia for the Web

3. Introduction All Web content used to be disseminated with text
Graphics and other media elements have been added, yet text remains primary vehicle for communicating content
The effective use of text is dependent upon typography and typefaces used
Multimedia for the Web

4. INTRODUCTION
Introduction
Typography: Type design; it is the typeface used and the way the type is arranged to communicate an idea
Typeface: Set of characters, usually made up of alphabet letters, numerals, symbols, that all follow the same rules within the set
Multimedia for the Web

5. INTRODUCTION
Introduction
Font: Set of characters within a typeface that has specific characteristics associated with it
Fonts belong to a font family such as Times New Roman, and contain variations on the font face
Text should be easy to read and visually pleasing
Multimedia for the Web

6. CONCEPT 1
Discuss Fonts
When content is mostly text, typography takes on greater importance
Users may not have fonts specified in XHTML document, so Web page may not resemble original design
Multimedia for the Web

7. Discuss Fonts Different fonts, when used properly:
CONCEPT 1
Discuss Fonts
Different fonts, when used properly:
Can help focus attention on certain text on the screen
Enhance readability
Set a tone (serious, light-hearted)
Project an image (progressive, conservative)
Multimedia for the Web

8. CONCEPT 1
Discuss Fonts
Default fonts are ones that come pre-installed with each operating system
Multimedia for the Web

9. CONCEPT 1
Discuss Fonts
Many font designers sell or offer royalty free fonts via the Web
If you use a font that is not on a user’s computer, the user’s operating system will substitute a default font when the Web page is viewed
Better to use common fonts for standard Web-based text
Multimedia for the Web

10. Understand Fonts Serif, Sans Serif, Decorative
CONCEPT 2
Understand Fonts
Serif, Sans Serif, Decorative
Monospaced vs. Proportional
Style
Size
Spacing
Color
Alignment
Line Length
Multimedia for the Web

11. Serif, Sans Serif, Decorative
CONCEPT 2
Serif, Sans Serif, Decorative
Fonts are classified as serif, sans serif, or decorative
Serif fonts have feet or short lines at the ends of the strokes of the letter
Sans means “without”, so a sans serif font is one without serifs or without feet
Multimedia for the Web

12. Serif, Sans Serif, Decorative
CONCEPT 2
Serif, Sans Serif, Decorative
A decorative font may have a combination of serif and sans serif fonts or it may be one that cannot be categorized either way
Sans serif fonts most often used for headings, titles, callouts
Serif fonts are used for long or dense bodies of texts
Multimedia for the Web

13. Serif, Sans Serif, Decorative
CONCEPT 2
Serif, Sans Serif, Decorative
Multimedia for the Web

14. Monospaced vs. Proportional
CONCEPT 2
Monospaced vs. Proportional
Monospaced fonts: Each character takes up the exact same amount of horizontal space
Proportional fonts: Each character takes up a varying amount of horizontal space
Multimedia for the Web

15. Style Font styles include: Italic, bold, and underline
CONCEPT 2
Style
Font styles include: Italic, bold, and underline
Italicized fonts do not generally read well on screen
An underlined word or phrase usually indicates a hyperlink
Unless the text is a hyperlink, avoid the use of underline
Multimedia for the Web

16. Size Fonts often measured in point sizes
CONCEPT 2
Size
Fonts often measured in point sizes
Choosing the proper point size depends on how the font is to be used; that is, as a title, body text, subhead or decorative
Ten and 12 points are common point sizes for type displayed on a Web page
Multimedia for the Web

17. CONCEPT 2
Spacing
Kerning: Used to specify the amount of space between characters
Leading: Amount of space between lines of text
Cascading Style Sheets (CSS): Used to control kerning and leading in an entire Web site
Multimedia for the Web

18. Color Color creates emphasis; a visual disturbance
CONCEPT 2
Color
Color creates emphasis; a visual disturbance
Color applied to text contributes to overall mood and tone of the page
The six-digit hexadecimal value is used to reference color on a Web page
Multimedia for the Web

19. Alignment Typography used to create patterns of organization the page
CONCEPT 2
Alignment
Typography used to create patterns of organization the page
Text can be:
Left aligned
Right aligned
Center aligned
Justified
Multimedia for the Web

20. Line Length Long lines of text hard to read
CONCEPT 2
Line Length
Long lines of text hard to read
Columns are often more readable
Recommended that designers allow for approximately 30 to 40 characters per line
Multimedia for the Web

21. CONCEPT 2
Line Length
Multimedia for the Web

22. Define Cascading Style Sheets (CSS)
CONCEPT 3
Define Cascading Style Sheets (CSS)
Cascading Style Sheet: Similar to a style used in a word processing program in that it defines the appearance of the text on a Web page
Multimedia for the Web

23. Define Cascading Style Sheets (CSS)
CONCEPT 3
Define Cascading Style Sheets (CSS)
Four different types of CSS:
Inline
Embedded
Linked
imported
Multimedia for the Web

24. Inline Inline styles: Inserted into the body of HTML
CONCEPT 3
Inline
Inline styles: Inserted into the body of HTML
Disadvantage of inline: they have to be added to each tag you want to modify
Multimedia for the Web

25. CONCEPT 3
Embedded
With embedded or internal style, all of the style information appears in the <head> of the XHTML document
Multimedia for the Web

26. Linked Linked styles are more powerful than inline or embedded styles
CONCEPT 3
Linked
Linked styles are more powerful than inline or embedded styles
Linked styles direct multiple XHTML files to one common style sheet document
Multimedia for the Web

27. CONCEPT 3
Imported
Imported styles allow you to use one style sheet that you can override using inline, embedded, and linked styles
Multimedia for the Web

28. CONCEPT 3
Imported
When multiple styles are used, the order of importance is as follows:
1. Inline styles
2. Embedded styles
3. Linked styles
4. Imported styles
5. Default browser styles
Each style overrides the next style
Multimedia for the Web

29. Explain Additional Options for Implementing Text on the Web
CONCEPT 4
Explain Additional Options for Implementing Text on the Web
Show an animation or use narration rather than text to present the idea
A hyperlink allows the user to select a button, word or graphic that “jumps” or connects to another Web page where more information is available
Multimedia for the Web

30. Explain Additional Options for Implementing Text on the Web
CONCEPT 4
Explain Additional Options for Implementing Text on the Web
Drop-down boxes with scroll bars and list arrows, which will display more text when clicked by the user
Multimedia for the Web

31. Graphic-based Typography
CONCEPT 4
Graphic-based Typography
One way to ensure that text will be displayed in a specific format is to change the text into an image
This is helpful when logos, headings, and titles need specific fonts
Multimedia for the Web

32. Graphic-based Typography
CONCEPT 4
Graphic-based Typography
Multimedia for the Web

33. Portable Document Format
CONCEPT 4
Portable Document Format
Portable Document Format (PDF): Developed so documents could be transported and viewed without the requirement that the users viewing the documents own or have access to the software with which the document was created
Multimedia for the Web

34. Summary Discuss Fonts Understand Fonts Serif, Sans Serif, Decorative
Monospaced vs. Proportional
Style
Size
Multimedia for the Web

35. Summary Spacing Color Alignment Line Length
Define Cascading Style Sheets (CSS)
Inline
Multimedia for the Web

36. Summary Embedded Imported
Explain Additional Options for Implementing Text on the Web
Graphic-based Typography
Portable Document Format
Multimedia for the Web