Chapter 2

TOPIC 3 TEXT Arranged by : MOHD SAIFULNIZAM ABU BAKAR saiful.uitm.edu.my 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. CSC253 2 Introduction To Text Using text and symbols for communication began about 6,000 years ago in Mediterranean Fertile Crescent: Mesopotamia, Egypt, Sumeria and Babylonia. In some former eras, not all people were allowed to learn writing and reading. Today, text and ability to read it are doorways to power and knowledge. Since the explosion of the Internet and the World Wide

Web(WWW), text has become more important than ever. CSC253 3 Importance of Text in a Multimedia Presentation Words and symbols in any form, spoken or written, are the most common means of communication. Text is a vital element of multimedia menus, navigation systems, and content. CSC253

4 A single word may be cloaked in many meanings, so it is important to cultivate accuracy and conciseness in the specific words you choose. It is important to design labels for title screens, menus, buttons or tabs using words that have the most precise and powerful meanings to express what you need to say CSC253 5

(cont.) Importance of Text in a Multimedia Presentation Factors affecting legibility of text: Size. Background and foreground color. Style. Leading. CSC253 6 Understanding Fonts and Typefaces

CSC253 7 (cont.) Understanding Fonts and Typefaces The study of fonts and typefaces includes the following: Font styles. Font sizes - distance from the top of the capital letters to the bottom of the descenders in letters such as g and y Cases. Serif versus Sans Serif.

CSC253 8 Font Styles Font styles include: Boldface Italic Underlining Outlining CSC253

9 Font Sizes Font size is measured in points. (pt) 1 point = 0.0138 inch(1/72) Character metrics are the general measurements applied to individual characters. Kerning is the spacing between character pairs. Leading is the space between lines. CSC253

10 Kerning vs Leading Kerning is the spacing between character pairs. Leading is the space between lines. CSC253 11

Cases A CAPITALIZED LETTER IS REFERRED TO AS UPPERCASE', while a small letter is referred to as 'lowercase.' Placing an uppercase letter in the middle of a word is referred to as intercap or CamelCase Example : LibraryBox, FedEx CSC253 12

Drop cap CSC253 13 Two classes of fonts: Serif or Sans Serif Serif little decoration at the end of a letter stroke. Sans Serif do not have a serif at

the end of a letter stroke. used for body text These fonts are used for headlines and bold statements. CSC253 14 Types of Fonts For computer displays, Sans Serif fonts considered better because of the sharper

contrast. Example of Serif fonts Example of Sans Serif Times New Roman Bookman Rockwell Light Courier New Century Century Gothic Arial

Comic Sans MS Impact Tahoma CSC253 15 CSC253 16 Text Characteristics This example shows the Times New Roman font

Capital Height x-Height Ascender FD xhp Point size p -Height Serif CSC253

Descender 17 CSC253 18 Tracking, Kerning and Leading Tight tracking

Av Loose tracking Av Kerned Unkerned CSC253 19 Tracking, Kerning and Leading

Leading o o o o o Reading Line One Reading Line One Ascender : an upstroke on a character

Descender : the down stroke below the baseline of a character Leading : spacing above and below a font or Line spacing Tracking : spacing between characters Kerning : space between pairs of characters, usually as an overlap for improvement appearance CSC253 20 Bitmapped and vector fonts Fonts can either be stored as bitmapped or vector graphics Bitmaps font depend to the size and the pixel

numbers - File size increases as more sizes are added Vector fonts can draw any size by scaling the vector drawing primitives mathematically File size is much smaller than bitmaps TrueType and PostScript are vector font formats CSC253 21 Bitmapped and vector fonts AAbitmapped bitmappedfont font

AAvector vectorfont font CSC253 22 Jaggies and Antialiasing Jaggies are the jagged edges you see when a bitmapped image is resized It is a consequence of the underlying array of pixels from which the image is composed

Antialiasing is a technique that can be used to eliminate jagged edges It substitutes additional pixels in other colours to fool the brain into thinking it is seeing continuous lines The technique is used to blend the font into the background by transitioning the colour from the font colour to background. This technique minimizes the jagged edges making for a smoother overall appearance. CSC253 23 Jaggies and Antialiasing

CSC253 24 Using Text Elements in a Multimedia Presentation Anti-aliased text must be used when a gentle and blended look for titles and headlines is needed. Ideas and concepts can be highlighted by making the text bold or by emphasizing text. A pleasant look can be created by experimenting with different font faces, sizes, leadings, and kerning. The text elements used in multimedia are:

Menus for navigation. Interactive buttons. Fields for reading. HTML documents. Symbols and icons. CSC253 25 Menus for Navigation A user navigates through content using a menu. A simple menu consists of a text list of topics.

CSC253 26 Interactive Buttons A button is a clickable object that executes a command when activated. Users can create their own buttons from bitmaps and graphics. The design and labeling of the buttons should be treated as an industrial art project. CSC253

27 Fields for Reading Reading a hard copy is easier and faster than reading from the computer screen. A document can be printed in one of two orientations - portrait or landscape. The taller-than-wide orientation used for printing documents is called portrait. The wider-than-tall orientation that is normal to monitors is called landscape. CSC253

28 HTML Documents HTML stands for Hypertext Markup Language. It is the standard document format used for Web pages. HTML documents are marked using tags. CSC253 29 HTML Documents An advanced form of HTML is DHTML.

DHTML stands for Dynamic Hypertext Markup Language. DHTML uses Cascading Style Sheets (CSS). Some of the commonly used tags are: The tag for making text bold faced. The

tag for creating an ordered list. The tag for inserting images. CSC253 30 Symbols and Icons Symbols are concentrated text in the form of stand-alone graphic constructs.

They are used to convey meaningful messages. Symbols used to convey human emotions are called emoticons. Icons are symbolic representations of objects and processes. CSC253 31 Mapping across platforms: Fonts and characters are not cross-platform compatible [ between Windows and Macintosh platforms ]

They must be mapped to the other machine using font substitution. CSC253 32 Computers and Text The font wars. PostScript TrueType Character sets.

CSC253 33 PostScript PostScript is a method of describing an image in terms of mathematical constructs. PostScript characters are scalable and can be drawn much faster. The two types of PostScript fonts are Type 3 and Type 1. CSC253

34 TrueType Apple and Microsoft developed the TrueType methodology. TrueType is a system of scalable outline fonts, and can draw characters at low resolution. CSC253 35 Character Sets The American Standard Code for Information

Interchange (ASCII) is a 7-bit coding system. The extended character set is commonly filled with ANSI standard characters. The ISO-Latin-1 character set is used while programming the text of HTML pages. CSC253 36 Character Sets Unicode is a 16-bit architecture for multilingual text and character encoding. The shared symbols of each character set are

unified into collections of symbols called scripts. Mapping across platforms: Fonts and characters are not cross-platform compatible. They must be mapped to the other machine using font substitution. CSC253 37 Font Editing and Design Tools Macromedia Fontographer. Fontographer is a specialized graphics editor. It is compatible with both Macintosh and Windows platform.