1. COM 205 Multimedia Applications
St. Joseph’s College
Fall 2004

2. Chapter 4
Text

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

4. Text in History
Text came into use about 6,000 years ago

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

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

7. Using Text in Multimedia
Type terminology
Typeface
Arial
Courier Times
Fonts
Points
Styles
Leading
Kerning

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

9. Character Metrics

10. Factors affecting legibility of text
Size.
Background and foreground color.
Style.
Leading (pronounced “ledding”).

11. Styles Outlined Italic Bold Underlined
Examples of styles are boldface and italic
Italic
Bold
Underlined
Outlined

12. Leading and Kerning Computers can
adjust the line spacing (called leading)
leading
and
the space between pairs of letters,
called kerning

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

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

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

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

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

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

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

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

21. 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!

22. Fields for Reading
Reading from a computer screen is slower than from a book
People blink 3-5 times/minute, using a computer and times/minute reading a book
This reduced eye movement causes fatigue, dryness
Try to present only a few paragraphs
per page

23. 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
portrait
landscape

24. 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>)

25. 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 for common fonts)

26. 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)

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

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

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

30. Computers and Text
Allow text to be drawn at any size without “jaggies”, by anti-aliasing the edges of the characters

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

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

33. Unicode Numbers Mathematical symbols Punctuation
Arrows, blocks and drawing shapes
Technical symbols

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

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

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

37. Font Editing and Design Tools
Fontographer (from Macromedia)

38. Editing and Design Tools

39. Hypermedia and Hypertext
Hyper media provides a structure of links
Hypertext words are linked to other elements
Hypertext is usually searchable by software robots

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

41. Hypermedia Structures
Hypermedia elements are called nodes
Nodes are connected using links
A linked point is called an anchor

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

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

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

45. Hypertext Tools Building or authoring Reading
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….