1. Multimedia Building Block : Text
Reference:
T. Vaughan, “Multimedia: Making It Work 5th Edition”, Osborne/McGraw-Hill, 2001
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002

2. Text in history Written text came into use about 6000 years ago
Mesopotamia, Egypt, Sumeria and Babylonia
Initially text was written in symbols
Pictographic signs and cuneiforms
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002

3. Text in Multimedia A key component of any multimedia product
Multimedia product depends on text for various reasons
Page title
Content of the information
Label and instruction
etc.
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002

4. The power of meaning… Word must be chosen carefully
Precise and accurate meaning to describe what you mean
Word must be chosen to illustrate to a few meaning
Word appears in titles, menus and navigational aids.
Test the words that you plan to use on several users and observe their reaction.
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002

5. Types terminology
Typeface: a family of similar characters that may include many sizes and styles
ARIAL
Courier
Times
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002

6. Types Terminology
Font: characters of a single size and style, which are part of the same fontface family
Arial – Arial Italic – Arial size 28
Arial Narrow
Times – Times extra – Times bold
Style: attributes of a font, such as italic, bold, underline, shadow etc.
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002

7. Types terminology Point: the font size is usually measured in point.
A point is 1/72 of an inch (0.0138)
Leading: the vertical space between lines of text
Line one
Line two
Leading
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002

8. Types terminology Kerning: the space between two characters
Adjusting the space between the characters is also called tracking
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002

9. Types terminology
Character metrics: the general measurements of individual characters.
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002

10. Cases Capital letters are called uppercase
Small letters are called lowercase
Text is generally easier to read with mixed uppercase and lowercase letters.
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002

11. Serif versus sans serif
Serif type has extra stroke at certain points on letters.
Serif fonts are considered to be more readable on printed pages.
Times , New Century Schoolbook , Bookman
Sans serif type does not have those extra strokes
Sans serif fonts are usually more readable on computer screens.
Arial , Century Gothic
Serif
San serif
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002

12. Monospaced vs propotional fonts.
In a monospaced font, every character occupies the same amount of space horizontally, regardless of its shape.
Text in monospaced font looks as if it was produced on a typewriter.
Lucida typewrite is an example for monospaced font.
In a proportional font, the space each letter occupies depends on the width of the letter shape.
This produce a more even appearance, and you can fit more words in one line.
Tahoma is an example for proportional font.
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002

13. Designing with text Distinguish between display fonts and text fonts.
are designed for short pieces of text, such as headings, slogan or signs. They are not intended for use in lengthy passages.
Are designed in fancy style. ( This is the example )
Text fonts:
must be unobtrusive, so they do not intrude on the reader and interfere with the primary message of the text.
Must easy to read, so they do not cause fatigue when they are read for hours at a time.
Usually are fonts which are familiar to the users.
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002

14. Designing with text can you read this? Or this word ?
Boldface is intrusive, so reserve it for headings or similar use.
Italic text, because of its slant, often render badly at low resolution, making it hard to read
Consider legibility when choosing font
can you read this? Or this word ?
Is this too small? Or is this readable ?
Avoid too many different faces
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002

15. Designing with text Strike the density balance
Minimize lines of centered text
Distinguish text link with colours and underlining
Explore text colours and backgrounds
Use distorted layout to grab attention
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002

16. Designing with text Adjust leading and kerning for readability.
In text blocks, adjust the leading for the most pleasing spacing. Lines too tightly packed are difficult to read.
Vary the size of the font in proportion to the importance of the message you are delivering.
Remember that long continuous texts covering multiple pages are tiring to read. Always breakdown information into smaller chunk, and summaries them.
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002

17. Designing with text Use anti-aliased text:
anti-aliasing blends the colours along the edges of the letters (called dithering) to create a soft transition between letter and its background.
Anti-aliasing also smoothes jaggies at the edge of characters.
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002

18. Anti-alias option CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002

19. Issues when designing with text
True type font: the same font will be used on the printer and the screen (as oppose to scalable printer resident font)
True type : Arial, Times New Roman
Scalable printer resident: Antique olive, CG Omega
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002

20. Issues when designing with text
Font compatibility: not all font is available on every operating system.
Choose regularly used fonts such as Arial, Times New Roman, Courier
If you want to use your own font, that font must be first installed.
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002

21. Designing menu and icon
Menu: choose word with precise meaning
Icon/symbols : choose icon which has very few meaning for interpretation, or go for something which is globally understood.
Can be useful if language barrier is an issue
Consider using text label together with icons.
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002

22. Animating text Animated text can grab attention Do not overdo it.
Too many animation and attention grabbers will distract users attention.
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002

23. Hypertext and Hypermedia
Hypermedia provides a structure of links through which a user can navigate and interact.
Hypermedia structure:
Hypermedia elements are called nodes
Nodes are connected using links
A linked points is called an anchor
Hypertext words are linked to other elements
Hypertext is usually searchable.
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002

24. The final rule… Experiment your work by trial and error.
Test your work with users – accept critique and improvise.
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002