COM 205 Multimedia Applications St. Joseph’s College Fall 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 in History • Text came into use about 6,000 years ago 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 •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 Kerning Computers 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 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 – 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 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) 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….