Download Multimedia for the Web

Multimedia for the Web:
Creating Digital Excitement
Multimedia Element —Text
Chapter Concepts
Discuss Fonts
Understand Fonts
Define Cascading Style Sheets (CSS)
Explain Additional Options for
Implementing Text on the Web
Multimedia for the Web
Chapter 5
2
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
Chapter 5
3
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
Chapter 5
4
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
Chapter 5
5
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
Chapter 5
6
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
Chapter 5
7
Discuss Fonts
Default fonts are ones that come preinstalled with each operating system
Multimedia for the Web
Chapter 5
8
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
Chapter 5
9
Understand Fonts
Serif, Sans Serif, Decorative
Monospaced vs. Proportional
Style
Size
Spacing
Color
Alignment
Line Length
Multimedia for the Web
Chapter 5
10
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
Chapter 5
11
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
Chapter 5
12
Serif, Sans Serif, Decorative
Multimedia for the Web
Chapter 5
13
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
Chapter 5
14
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
Chapter 5
15
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
Chapter 5
16
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
Chapter 5
17
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
Chapter 5
18
Alignment
Typography used to create patterns of
organization the page
Text can be:
– Left aligned
– Right aligned
– Center aligned
– Justified
Multimedia for the Web
Chapter 5
19
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
Chapter 5
20
Line Length
Multimedia for the Web
Chapter 5
21
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
Chapter 5
22
Define Cascading Style
Sheets (CSS)
Four different types of CSS:
– Inline
– Embedded
– Linked
– imported
Multimedia for the Web
Chapter 5
23
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
Chapter 5
24
Embedded
With embedded or internal style, all
of the style information appears in
the <head> of the XHTML document
Multimedia for the Web
Chapter 5
25
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
Chapter 5
26
Imported
Imported styles allow you to use one
style sheet that you can override
using inline, embedded, and linked
styles
Multimedia for the Web
Chapter 5
27
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
Chapter 5
28
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
Chapter 5
29
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
Chapter 5
30
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
Chapter 5
31
Graphic-based Typography
Multimedia for the Web
Chapter 5
32
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
Chapter 5
33
Summary
Discuss Fonts
Understand Fonts
Serif, Sans Serif, Decorative
Monospaced vs. Proportional
Style
Size
Multimedia for the Web
Chapter 5
34
Summary
Spacing
Color
Alignment
Line Length
Define Cascading Style Sheets (CSS)
Inline
Multimedia for the Web
Chapter 5
35
Summary
Embedded
Imported
Explain Additional Options for
Implementing Text on the Web
Graphic-based Typography
Portable Document Format
Multimedia for the Web
Chapter 5
36