http://odl.utm.

my

MPPP 1213: TECHNOLOGY & MEDIA DESIGN

TEXT IN MULTIMEDIA

Department of Science & Mathematics Education, and Creative Multimedia

School of Education, Faculty of Social Sciences and Humanities, UTM

CONTENT OUTLINE

1 Basic Typography

2 Typeface Categories

3 Working with Text

4 Guidelines for Use of Text in Multimedia

School of Education, FSSH, UTM

1
 http://odl.utm.my

INTRODUCTION

 Words and symbols in any form, spoken or written,

are the most common system of communication.

 They deliver the most widely understood meaning

to the greatest number of people – accurately and
in detail.

School of Education, FSSH, UTM

INTRODUCTION

 With multimedia technology, text can be

combined with other media in a powerful and
meaningful way to present information and
express moods.

 Because of this, they are vital elements of

multimedia menus, navigation systems, and of
course….CONTENT.

School of Education, FSSH, UTM

2
 http://odl.utm.my

INTRODUCTION

 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

School of Education, FSSH, UTM

INTRODUCTION

 Advantages
 Is relatively inexpensive to produce
 Present abstract ideas effectively
 Clarifies other media
 Provides confidentiality
 Is easily changed or updated

 Disadvantages
 Is less memorable than other visual media
 Requires more attention from the user than other
media
 Can be cumbersome
6

School of Education, FSSH, UTM

3
 http://odl.utm.my

MPPP 1213: TECHNOLOGY & MEDIA DESIGN

BASIC TYPOGRAPHY

Department of Science & Mathematics Education, and Creative Multimedia

School of Education, Faculty of Social Sciences and Humanities, UTM

BASIC TYPOGRAPHY

School of Education, FSSH, UTM

4
 http://odl.utm.my

BASIC TYPOGRAPHY

 Typeface

A typeface is a family of graphic characters

(alphabet, numbers & special character) that
usually includes many type sizes and styles.

School of Education, FSSH, UTM

BASIC TYPOGRAPHY

 Font
A font is a collection of characters of a single size
and style belonging to a particular typeface
family.

10

School of Education, FSSH, UTM

5
 http://odl.utm.my

BASIC TYPOGRAPHY

 Typical font styles are boldface and italic.

 Other style attributes, such as underlining,

outlining, and strikeout of characters, may be
added by your computer software.

11

School of Education, FSSH, UTM

BASIC TYPOGRAPHY

 Arial, Courier, and Times New Roman: Typefaces

 Arial12-point italic: Font

 People tend to use font a bit loosely when they

really mean typeface.

12

School of Education, FSSH, UTM

6
 http://odl.utm.my

BASIC TYPOGRAPHY

13

School of Education, FSSH, UTM

MPPP 1213: TECHNOLOGY & MEDIA DESIGN

TYPEFACE CATEGORIES

Department of Science & Mathematics Education, and Creative Multimedia

School of Education, Faculty of Social Sciences and Humanities, UTM

7
 http://odl.utm.my

TYPEFACE CATEGORIES

 Typeface can be characterized as serif, sans serif,

and decorative.

 The differences between serif, sans serif &

decorative?

15

School of Education, FSSH, UTM

TYPEFACE CATEGORIES: SERIF

 A serif is a line or curve extending from the ends of

a stroke of a character.

 Times, New Century, Schoolbook, and Palatino are

examples of serif fonts.

16

School of Education, FSSH, UTM

8
 http://odl.utm.my

TYPEFACE CATEGORIES: SANS SERIF

 The French word sans means without, so sans serif

typeface is one without serifs.

 Helvetica, Arial, Tahoma, Century Gothic and

Optima are Sans Serif.

17

School of Education, FSSH, UTM

TYPEFACE CATEGORIES: SERIF VS SANS SERIF

 Notice the difference between serif and sans serif

in the following illustration :

18

School of Education, FSSH, UTM

9
 http://odl.utm.my

TYPEFACE CATEGORIES: SERIF VS SANS SERIF

SERIF

Text

Text

Text

SANS SERIF
19

School of Education, FSSH, UTM

TYPEFACE CATEGORIES: DECORATIVE

20

School of Education, FSSH, UTM

10
 http://odl.utm.my

TYPEFACE CATEGORIES: PRINT VS ONLINE

In Print :
 Serif (example: Times New Roman) should be used
for larger bodies of texts. WHY?
 This is because the serif helps guide the reader’s
eye along the text.
 Sans Serif (example: Arial Narrow) should be used
for headings & titles because they are more likely
to draw attention.
 They are also considered more recognizable at a
glance than serif – perfect for short bits of text.
21

School of Education, FSSH, UTM

TYPEFACE CATEGORIES: PRINT VS ONLINE

Computer/online displays

 Use Sans Serif (Examples: Century Gothic, Arial,

Tahoma). WHY ?
 Considered better because of the sharper contrast.
 Because much of our text in online presentation is
often quite short, sans serif fonts are used quite
extensively.
 Serif: tend to be more traditional appearing fonts
 Sans serif: tend to be more contemporary and
modern appearing. 22

School of Education, FSSH, UTM

11
 http://odl.utm.my

TYPOGRAPHY

 TYPOGRAPHY is the balance and interplay of

letterforms on the page, a verbal and visual
equation that helps the reader understand the form
and absorb the substance of the page content.

 Typography is the communication of message

using fonts and typefaces.

 Typography plays a dual role as both verbal and

visual communication.

23

School of Education, FSSH, UTM

TYPOGRAPHY

 Both text and good typography can be very

powerful communication devices and exciting
design mediums for multimedia projects.

 Good typography is equally important on the

screen as it is on the printed page. It should be
easy to read and visually pleasing.

24

School of Education, FSSH, UTM

12
 http://odl.utm.my

TYPOGRAPHY

 Good typography establishes a visual hierarchy for

rendering prose on the page by providing visual
punctuation and graphic accents that help
readers understand relations between prose and
pictures, headlines and subordinate blocks of text.

25

School of Education, FSSH, UTM

Jamalludin Harun (p-jamal@utm.my)

Department of Science & Mathematics Education, and Creative Multimedia
School of Education, Faculty of Social Sciences and Humanities, UTM

13