Maximizing Text Impact in Multimedia Presentations

1. COM 205Multimedia 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 • 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. 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

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

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

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

17. Text Font Design Tips • Use the most legible font available • Use as few different faces as possible ( too many called “ransom-note” typography • Usebold 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

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

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

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

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

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

23. HTML Documents • The Font tag is used to specify the font to be displayed (if present) • <font face = “Verdana, Arial, Times” size=“” color=“”>

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

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

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

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

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

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

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

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

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

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