COM 205Multimedia Applications

St. Joseph’s CollegeFall 2004

Chapter 4

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 came into use about 6,000 years ago

Text in History

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

Titles

Menus

Navigational aids

•Words must be chosen carefully•Words appear in:

•Test the words you plan to use•Keep a thesaurus handy

Using Text in MultimediaType terminology

•TypefaceArial

CourierTimes

•Fonts•Points•Styles•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 (such as bold, italic)

• Font sizes are in points 1 point = 1/72 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 KerningComputers can • adjust the line spacing (called

leading) leading

and• the space between pairs of letters, called kerning

Fonts and Faces• PostScript, TrueType and Master

fonts can be altered• Bitmapped 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 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

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

More Text Font Design Tips• Anti-aliasing or dithering blends colors

along the edges of letters to create gentle effect.

• 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

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

portraitlandscape

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– Windows - hourglass

• Icons and sound are more easily remembered than words

• It is useful to label icons for clarity• See “smileys” in textbook (p. 61)

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 TextAllow 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) caan be

used to create Postscript, TrueType and bitmapped fonts for MAC, PB, 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

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….