1

Introduction to Multimedia

SMM 2005Rabiah Abdul Kadir

Jabatan Multimedia, FSKTM, UPM

rabiah@fsktm.upm.edu.my03-89466537

22

Introduction to Multimedia

Chapter 3Text

3

What is TEXT?

Basic media for many multimedia systems. Texts in the form of words, sentences and paragraphs

is used to communicate thoughts, ideas and facts in nearly every aspect of our lives.

4

What is TEXT? Multimedia products depends on text for many things:

to explain how the application work. to guide the user in navigating through the application. deliver the information for which the application was designed.

5

What is TEXT?

Minimize the texts in multimedia application

Texts consists of two structures: LinearLinear Non-LinearNon-Linear

6

What is TEXT?

LinearLinear A single way to progress through the text, starting at the A single way to progress through the text, starting at the

beginning and reading to the end. beginning and reading to the end.

7

What is TEXT?

Non-LinearNon-Linear Information is represented in a semantic network in which multiple

related sections of the text are connected to each other A user may then browse through the sections of the text, jumping from

one text section to another. Kancil Page

Crocodile Case Page

Belt Case Page

Hungry Monkey Page

8

3.1 Why Text is Important in MM?

Factors affecting legibility of text: Size.

The size of the text Background and foreground color

The color in which the text is written in / on. Style

Also known as typeface and font Leading

refers to the amount of added space between lines of type. Originally, when type was set by hand for printing presses, printers

placed slugs—strips of lead of various thicknesses—between lines of type to add space.

9

3.1 Why Text is Important in MM?

Factors affecting legibility of text: Background and foreground color (BG – Light colored, FG – Dark) Size. Style Leading

10

3.2 Text Technology

Based on creating letters, numbers and special characters.

Text elements can be categories into:Alphabet characters : A – ZNumbers : 0 – 9Special characters : Punctuation [. , ; ‘ …] ,

Sign or Symbols [* & ^ % $ £ ! /\ ~ # @ .…]Also known Character Sets

11

3.2 Text Technology

May also include special icon or drawing symbols, mathematical symbols, Greek Letter etc.

12

Font VS Typefaces

Is there a difference?How do we differentiate one with the other?

13

Font

A ‘font’ is a collection of characters of a particular size and style belonging to a particular typeface family.

Usually vary by type sizes and styles. The sizes are measured in points This includes the letter set, the number set, and all of the special

character and diacritical marks you get by pressing the shift, option, or command/control keys.

Arial Fonts

14

Typeface

A ‘typeface’ is a family of graphic characters that usually includes many type sizes and styles.

A typeface contains a series of fonts. For instance, Arial, Arial Black Arial Narrow and Arial Unicode MS are actually 4 fonts under the same family.

Arial Typefaces Family

15

Font and Typefaces The technology of fonts and typefaces includes the following:

Font styles - boldface, italic, underline, outline

Font sizes - point, kerning, leading

Cases – uppercase, lowercase, intercap

Serif versus Sans Serif

16

Font Effects

The technology of font effects in bringing viewer’s attention to content:Case: UPPER and lower cased letterBold, Italic, Underline, superscript or subscript

EmbossedEmbossed or ShadowShadow

CCoolloouurrssb

Strikethrough

17

Font Effects Example

The Story The Prison The Characters

The Further Adventures Of Sang KancilThe Further Adventures Of Sang Kancil

Kancil purposely let himself go to prison to save his cousin Pelanduk that has been wrongfully accused of murdering kura-kura using CO2. Kancil forged the buaya crossings event and stealing the precious rambutan across the river in order to be sentenced to a life in prison.

The prison, a high security facility jungle prison located on no mans land is impossible to break into and a place for high profile criminals. Now that he is in, it’s up to his cunning skills and technical know how to find his cousin and help him to escape and prove his innocence.

1 2 3 4 5

18

Text Characteristic

FD xhpDescenderThe down stroke below the baseline of a character

Capital Height

Point size

Ascenderan upstroke on a character

Serif

x-Height

This example shows the Times New Roman font

p -Height

19

Kerning of Text

Av vAUnkerned Kerned

KerningKerningspace between pairs of characters, usually as an overlap for improvement appearance

20

Leading of Text

Reading Line OneReading Line One

Reading Line TwoReading Line TwoLeading

Leading Leading spacing above and below a font or Line spacing

21

Types of Fonts

Two classes of fonts Serif Serif Sans SerifSans Serif

22

Serif Text

Decorative strokes added to the end of a letter's Serifs improve readability by leading the eye along the

line of type. Serifs are the best suited for body text. Serif faces are more difficult to read in small scale

(smaller than 8pt) and in very large sizes.

23

San Serif Text

Sans serif faces doesn't have decorative strokes. A sans serif text has to be read letter by letter. Use sans serif faces for small (smaller than 8pt) and

very large sizes. Used for footnotes and headlines

24

Serif vs Sans Serif Fonts

For computer displays, Sans SerifSans Serif fonts considered better because of the sharper contrast.

San Serif

Serif

25

Types of Fonts: Examples

Times New RomanBookman Rockwell LightCourier NewCentury

Times New RomanBookman Rockwell LightCourier NewCentury

Examples of Serif fontsExamples of Serif fonts

Century Gothic

ArialComic Sans

MSImpactTahoma

Century Gothic

ArialComic Sans

MSImpactTahoma

Examples of San Serif fonts

Examples of San Serif fonts

26

Using Text in Multimedia

The text elements used in multimedia are:

Menus for navigation Interactive buttons Fields for reading HTML documents Symbols and icons

27

Using Text in Multimedia

Text applying guidelines: Be concise Use appropriate fonts Make it readable Consider type styles and colors Use restraint and be consistent

28

Font Editing and Design Tools

Text creating software:1. ResEdit

Introduced by Apple Text to design text as a bitmap image.

29

Font Editing and Design Tools

2. Fontographer Developed by Macromedia

for Macintosh and Apple Use to edit the existing

font Freehand drawing tools is

used to design a font.

30

Text in Hypermedia

31

Hypertext

32

How Text Can Be Used Effectively

1. Communicating Data Customer names and address Pricing information of products

33

How Text Can Be Used Effectively

2. Explaining concepts and ideas A company mission statement A comparison of medical procedures

34

How Text Can Be Used Effectively

3. Clarifying other media Labels on button, icons and screens Captions and callouts for graphics

35

Advantages & Disadvantages Using TextAdvantages:

Is relatively inexpensive to producePresent abstract ideas effectivelyClarifies other mediaProvides confidentiality (password) Is easily changed or updated

36

Advantages & Disadvantages Using TextDisadvantages:

Is less memorable than other visual mediaRequires more attention from the user than

other mediaCan be cumbersome – not elegant in

expression

37

Summary

Multimedia applications and presentations invariably rely to some extent on the use of text to convey their message to users.

Text has many characteristics that the developer can modify to enhance the user expression. size, weight, typeface, style, colour, kerning,

tracking, etc. Just like any other media, it requires careful planning

and creativity.