COM 205

Multimedia Applications
Chapter 2

Text
Overview
• Importance of text in a multimedia
presentation.
• Understanding fonts and typefaces.
• Using text elements in a multimedia
presentation.
• Computers and text.
• Font editing and design tools.
• Multimedia and hypertext.
Text in History
• Text came into use about 6,000 years
ago in the Mediterranean Fertile
Crescent, Mesopotamia, Egypt, etc.
when the first meaningful marks
were scraped onto mud tablets and
left to harden in the sun.
Revolution in Communication
• Using symbols for communication
relatively recent - 6,0000 years old
• 15th Century- Johann Gutenburg
printing press revolutionized
information
• Recently - another revolution - the
World Wide Web and its native language
- HTML
The Power of Meaning and the
Importance of Text
•Words must be chosen carefully
•Words appear in:
Titles
Menus
Navigational aids

•Test the words you plan to use

•Keep a thesaurus handy
Using Text in Multimedia
Type terminology
•Typeface
Arial
Courier
Times
•Fonts (size in points + typeface + style)
•Points
•Styles (bold, italic, etc.)
•Leading
•Kerning
Fonts and Faces
• A typeface is a family of graphic characters
that includes many type sizes and styles
(such as Times, Arial, Helvetica)

• A font is a collection of characters of a

single size and style belonging to a
typeface family (Times 12-point italic)

• Font sizes are in points

• 1 point = 1/72 inch = 0.0138 inch
(measured from top to bottom of descenders in capital letter)
• X-height is the height of the lower case
letter x
Character Metrics
Factors affecting legibility of text
– Size.
– Background and foreground color.
– Style.
– Leading (pronounced “ledding”).
Styles
• Examples of styles are boldface and italic
Italic

Bold

Underlined
 Leading and Kerning
Computers can leading
• adjust the line spacing (called leading)
• Overall spacing between characters Is called
tracking and the kerning is the space
between pairs of characters
– Regular
– Condensed (tightly tracked)
– Expanded (loosely tracked)
Fonts and Faces
• PostScript, TrueType and Master
fonts can be altered
• Bitmap fonts cannot be altered
• The computer draws or rasterizes a
letter on the screen with pixels or
dots.
 Cases
• When type was set by hand, the type
for a font was kept in a drawer or case,
• The upper drawer held the capital
letters, and the lower drawer held the
smaller letters
• From this we get the terms uppercase
and lowercase
Case Sensitive
• Password, and paths in a URL are case
sensitive ( that is “home” is different from
“HOME”)
• It is easier to read words that have a
mixture of upper and lower case letters
rather than all upper case
• Computer terms use an intercap for
readability as in FileMaker, PageMaker, or
LastName
Serif and Sans Serif
• Type either has a little decoration at the
end of the letter - called a serif
• or it doesn’t - sans serif ( “sans” from
the French meaning without)
• Examples ( Times - serif “T” )
( Arial - sans serif “T”)
• Use what is appropriate to convey your message as
serif fonts are traditionally used for body text
• Sans serif are used for headlines and bold statements
Using Text In Multimedia
• WYSIWYG - What you see is what
you get!
• Aim for a balance between too much
text and too little
• Make web pages no more than
1 to 2 screenfuls of text
• Bring the user to the destination with
as few actions as possible
 Text Font Design Tips
• Use the most legible font available
• Use as few different faces as possible ( too
many called “ransom-note” typography”
• Use bold and italics to convey meaning
• Adjust line spacing ( leading)
• Adjust the spacing between letters in
headings to remove gaps
• Use colors and background to make type
stand out
• Use meaningful word for links and menus
Text Font Design Tips
•Using too many fonts on the same page is called
ransom-note typography
•Lines too tightly packed are difficult to read.
•In large-size headlines, adjust the spacing between
letters (kerning) so that the spacing feels right.
•To make your type stand out or be more legible, use
foreground and background colors.
Text Font Design Tips
• Use anti-aliased text where you want a gentle and
blended look for titles and headlines. This can
give a more professional appearance.
• Anti-aliasing blends the colors along the edges of
the letters (called dithering) to create a soft
transition between the letter and its background.
More Text Font Design Tips
• Experiment with shadows
• Surround headlines with white space

• Try attention grabbing effect with color,

word art or large drop letters at the
beginning of text
More Text Font Design Tips
• With web sites, shadowed text and graphics on a
plain white background add depth to a page.
Surround headlines with plenty of white space.
• White space is a designer’s term for roomy blank
areas, while programmers call the invisible
character made by a space (ASCII 32) or a tab
(ASCII 9) white space. Web designers use a
nonbreaking space entity ( ) to force
spaces into lines of text in HTML documents.
Menus For Navigation
• A Multimedia project or web site
should include:
– content or information
– navigation tools such as menus, mouse
clicks, key presses or touch screen
– some indication or map of where the
user is in the presentation
Buttons for Interaction
• Buttons are objects that make things
happen when they are clicked
• Use common button shapes and
sizes
• Label them clearly
• BE SURE THEY WORK!
Fields for Reading
• Reading from a computer screen is
slower than from a book
• People blink 3-5 times/minute, using
a computer and 20-25 times/minute
reading a book
• This reduced eye movement causes
fatigue, dryness
• Try to present only a few paragraphs
per page
 Portrait vs. Landscape
• Monitor use wider-than-tall aspect
ratios called landscape
• Most books use taller-than- wide
orientation, called portrait
• Don’t try to shrink a full page onto a
monitor

landscape
portrait
HTML Documents
• Standard document format on the web is
called Hypertext Markup Language ( HTML)
• Originally designed for text not multimedia
- now being redesigned as Dynamic HTML
( DHTML), which uses CSS (Cascading
Style sheets) and permits defining text
choices.
• Specify typefaces, sizes colors and
properties by “marking up” the text with
tags (such as <B>, </B>)
HTML Documents
• The Font tag is used to specify the
font to be displayed (if present)

• <font face = “Verdana, Arial, Times”>

• If those fonts are not on the system,

the default is used ( see p. 55-57 for
common fonts)
Symbols and Icons
• Symbols act like “visual words” to convey
meaning, (called icons)
– MAC - trash can (to throw old files)
– Windows – hourglass (wait sign)
• Icons and sound are more easily remembered
than words
• It is useful to label icons for clarity
Animating Text
• To grab a viewer’s attention:
– let text “fly” onto screen
– rotate or spin text, etc.
• Use special effects sparingly or they
become boring
Computers and Text
• Mac standard - 72 pixels/ inch
• PC - VGA - 96 pixels/inch
• Screen ( 640 pixels across x 480
down, called 640 x480 resolution)
• Today much higher resolution
possible
 Fonts “Wars”
• Apple - Adobe PostScript page description
font language
– describes an image in terms of
mathematical constructs (Bezier curves)
– Can be scaled larger or smaller
– Currently > 6,000 typefaces available
• Apple & Microsoft created TrueType
Computers and Text
Allow text to be drawn at any size without
“jaggies”, by anti-aliasing the edges of the
characters
Fonts and Characters
• Fonts smaller than 12 point are not
very legible on a monitor
• Never assume the fonts installed on your
computer are on all computers
• Stay with TrueType fonts ordinarily
• ASCII character set - most common
• Extended Character set - used for HTML
• UNICODE –supports characters for all
known languages
Unicode
• Developed in 1989 for multilingual text
• Contains 65,000 characters form all known
languages and alphabets
• Where several languages share a set of
symbols, they are grouped into a
collection called scripts ( eg. Latin,
Arabic, Cyrillic, Greek, Tibetan, etc.)
• Shared symbols are unified into
collections called scripts
Unicode
• Numbers
• Mathematical symbols
• Punctuation
• Arrows, blocks and drawing shapes
• Technical symbols
Mapping Text Across Platforms
• Viewing a presentation on either MAC
and PC reveals differences
• Fonts must be mapped from one
machine to another
• If same font doesn’t exist on the other
machine, one is substituted
( called font substitution)
• To avoid this, convert to bitmaps
Representing Languages
• Some contain different symbols
• Others represent an entire concept
with a single symbol (as in some
Asian languages)
• Translating into another language is
called localization
Font Editing and Design Tools
• Allow you to create your own fonts
– ResEdit for MAC
– Fontographer (from Macromedia) can be
used to create Postscript, TrueType and
bitmapped fonts for MAC, SUN includes a
freehand drawing tool
– 3D programs, such as COOL 3D and
HotTEXT, create special effects
– See text for descriptions
Font Editing and Design Tools
– Fontographer (from Macromedia)
Editing and Design Tools
Hypermedia and Hypertext
• Hyper media provides a structure of links
• Hypertext words are linked to other
elements
• Hypertext is usually searchable by
software robots
Hypermedia and Hypertext
• Multimedia - combines text, graphics
and audio
• Interactive multimedia - gives user
control over what and when content is
viewed (non-linear)
• Hypermedia -provides a structure of
linked elements through which user
navigates and interacts
Hypermedia Structures
 Hypermedia elements are called
nodes
 Nodes are connected using links
 A linked point is called an anchor
Hypermedia Structures
• Link - connections between
conceptual elements (navigation
pathways and menus)
• Node - contains text, graphics sounds
• Anchor - the reference from one
document to another document,
image, sound or file on the web
• Link anchor - where you came from
• link end is the destination node
Hypermedia and Hypertext
• Doug Englebart - inventor of mouse
• 1965 Ted Nelson coined the word
“hypertext”
• Computer-based hypertext systems
will fundamentally alter the way
humans think, approach literature and
the expression of ideas
• Hotlinks - lead user from one reference
to another
Using Hypertext
• Searching for words
– boolean search using AND, OR, NOT
– truncation - using only part of word,
such as geo might yield result with
geology, geography, George, etc.
• Search engines employ “robots” to
visit web pages and create indexes.
Hypertext Tools
• Building or authoring
– builder creates links, identifies nodes,
generates an index of words
• Reading
– both linear and increasingly non-linear
• Becoming more comfortable with
non-linear hypertext systems will
change the way we think….