http://eLearning.utm.

my

MPT 1203: TECNOLOGY & MEDIA DESIGN

TEXT IN MULTIMEDIA

Jamalludin Harun Department of Educational Sciences, Mathematics & Creative Multimedia Faculty of Education, UTM

CONTENT OUTLINE

1 2 3 4

Basic Typography Typeface Categories Working with Text Guidelines for Use of Text in Multimedia

2 Faculty of Education, UTM

http://eLearning.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.

3 Faculty of Education, 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.

4 Faculty of Education, UTM

http://eLearning.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

5 Faculty of Education, 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 Faculty of Education, UTM

http://eLearning.utm.my

MPT 1203: TECHNOLOGY & MEDIA DESIGN

BASIC TYPOGRAPHY

Department of Educational Sciences, Mathematics & Creative Multimedia Faculty of Education, UTM

BASIC TYPOGRAPHY

8 Faculty of Education, UTM

http://eLearning.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.

9 Faculty of Education, UTM

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

10 Faculty of Education, UTM

http://eLearning.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 Faculty of Education, 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 Faculty of Education, UTM

http://eLearning.utm.my

BASIC TYPOGRAPHY

13 Faculty of Education, UTM

MPT 1203: TECNOLOGY & MEDIA DESIGN

TYPEFACE CATEGORIES

Department of Educational Sciences, Mathematics & Creative Multimedia Faculty of Education, UTM

http://eLearning.utm.my

TYPEFACE CATEGORIES
Typeface can be characterized as serif, sans serif, and decorative.

The differences decorative?

between

serif,

sans

serif

&

15 Faculty of Education, 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 Faculty of Education, UTM

http://eLearning.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 Faculty of Education, UTM

TYPEFACE CATEGORIES: SERIF VS SANS SERIF

Notice the difference between serif and sans serif in the following illustration :

18 Faculty of Education, UTM

http://eLearning.utm.my

TYPEFACE CATEGORIES: SERIF VS SANS SERIF

SERIF

Text Text Text

SANS SERIF
19 Faculty of Education, UTM

TYPEFACE CATEGORIES: DECORATIVE

20 Faculty of Education, UTM

10

http://eLearning.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 readers 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 Faculty of Education, 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
Faculty of Education, UTM

11

http://eLearning.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 Faculty of Education, 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 Faculty of Education, UTM

12

http://eLearning.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 Faculty of Education, UTM

MPT 1203: TECNOLOGY & MEDIA DESIGN

WORKING WITH TEXT

Department of Educational Sciences, Mathematics & Creative Multimedia Faculty of Education, UTM

13

http://eLearning.utm.my

WORKING WITH TEXT

Although text is an excellent device for delivering information, text can often be too slow at getting the message across. If you only have 3 seconds to grab someone's attention as they walk past your display, text is not going to get the job done.

27 Faculty of Education, UTM

WORKING WITH TEXT

Following are some considerations and guidelines to keep in mind when working with text : Be Concise Use Appropriate Typeface/Font Make it Readable Consider Type Styles and Colors Use Restraint and be Consistent

28 Faculty of Education, UTM

14

http://eLearning.utm.my

WORKING WITH TEXT

Be Concise Reading volumes of text on a computer screen is difficult and tiring. Moreover, it may be not be the best way to communicate an idea, concept, or even a fact. The saying picture is worth a thousand words is as true in multimedia as on the printed page.

29 Faculty of Education, UTM

WORKING WITH TEXT

Use Appropriate Typeface Typeface/Fonts are useful in focusing attention on certain test on the screen, enhancing readability, setting a tone (serious, lighthearted), and projecting an image (progressive, conservative). When choosing a typeface/fonts, always consider the objectives and the audience.

30 Faculty of Education, UTM

15

http://eLearning.utm.my

WORKING WITH TEXT

Use Appropriate Typeface

31 Faculty of Education, UTM

WORKING WITH TEXT

Use Appropriate Typeface

32 Faculty of Education, UTM

16

http://eLearning.utm.my

WORKING WITH TEXT

Use Appropriate Typeface

33 Faculty of Education, UTM

WORKING WITH TEXT

Use Appropriate Typeface

34 Faculty of Education, UTM

17

http://eLearning.utm.my

WORKING WITH TEXT

Use Appropriate Typeface

35 Faculty of Education, UTM

WORKING WITH TEXT

Use Appropriate Typeface

36 Faculty of Education, UTM

18

http://eLearning.utm.my

WORKING WITH TEXT

Make it Readable The overriding concern with text is readability. Although a decorative font maybe attractive but it may also hard to read. An though it may seem important to include a great deal of text, filling the screen with text or reducing the size of the type to accommodate more text might also hinder readability.
37 Faculty of Education, UTM

WORKING WITH TEXT

This example of size of lettering shows the effect size has on readability

This example of size of lettering shows the effect size has on readability

This example of size of lettering shows the effect size has on readability

This example of size of lettering shows the effect size has on readability

This example of size of lettering shows the effect size has on readability

38 Faculty of Education, UTM

19

http://eLearning.utm.my

WORKING WITH TEXT

Consider Type Styles and Colors Three common type styles are bold, italic, and underline. These styles are often used for emphasis in print materials. Contrast between the lettering and background is also a very important factor in legibility and readability.

39 Faculty of Education, UTM

WORKING WITH TEXT

40 Faculty of Education, UTM

20

http://eLearning.utm.my

WORKING WITH TEXT

Use Restraint and be Consistent Although it may be tempting and certainly easy to use various typefaces, sizes, and styles, it is important to exercise restraint. Be careful to avoid a busy and difficult to read design resulting from too many fonts and type styles on one screen. In addition, try to maintain consistency in the use of text.
41 Faculty of Education, UTM

MPT 1203: TECNOLOGY & MEDIA DESIGN

GUIDELINES FOR USE OF TEXT IN MULTIMEDIA

Department of Educational Sciences, Mathematics & Creative Multimedia Faculty of Education, UTM

21

http://eLearning.utm.my

GUIDELINES FOR USE OF TEXT IN MULTIMEDIA

Make sure text is readable, quickly and easily, on any display that must show the project, not only on the display used to create it. Emphasize simplicity. In particular, use few different fonts and sizes. Use a sans serif font for titles and bullets. Avoid large blocks of text, but if you must use a lot of text, use a serif font.
43 Faculty of Education, UTM

GUIDELINES FOR USE OF TEXT IN MULTIMEDIA

Use an appropriately sized font. Be sure the text is large enough to read. Use simple, everyday words whenever possible. Use upper and lower case. NEVER USE ALL UPPER CASE. Keep the number of typefaces to a minimum.
44 Faculty of Education, UTM

22

http://eLearning.utm.my

GUIDELINES FOR USE OF TEXT IN MULTIMEDIA

Watch spacing between characters, lines and paragraphs. Be careful when placing text over graphics, especially with colour, typeface, font and size. Don't forget the fundamental hypertext techniques of using few characters per line, using few lines per screen, and using links to give the information a comprehensive and comprehensible structure.
45 Faculty of Education, UTM

GUIDELINES FOR USE OF TEXT IN MULTIMEDIA

Vary type size, style, boldness, etc to match the message youre sending. Use reverse type for emphasis; avoid similar colours or bleeding will occur. Use novel approaches to get the users attention but avoid novel text formats for informational text because it can be difficult to read.

46 Faculty of Education, UTM

23

http://eLearning.utm.my

Department of Educational Sciences, Mathematics & Creative Multimedia Faculty of Education, UTM

24