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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CONCEPT 2 Line Length Multimedia for the Web

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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