CMPD273 Multimedia System Prepared by Nazrita Ibrahim © UNITEN2002 Multimedia Building Block : Text Reference: T. Vaughan, “Multimedia: Making It Work

CMPD273 Multimedia SystemPrepared by Nazrita Ibrahim © UNITEN2002

Multimedia Building Block : Text

Reference:T. Vaughan, “Multimedia: Making It Work 5th Edition”, Osborne/McGraw-Hill, 2001


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


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.


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.


Types terminology

• Typeface: a family of similar characters that may include many sizes and styles

• ARIAL•Courier• Times


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 shadow etc.


Types terminology

• Leading: the vertical space between lines of text

Line oneLine two

Leading

• Point: the font size is usually measured in point.–A point is 1/72 of an inch (0.0138)


Types terminology

• Kerning: the space between two characters• Adjusting the space between the characters

is also called tracking


Types terminology

• Character metrics: the general measurements of individual characters.


Cases

• Capital letters are called uppercase• Small letters are called lowercase• Text is generally easier to read with mixed

uppercase and lowercase letters.


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

SerifSan serif


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.


Designing with text• Distinguish between display fonts and text fonts.

– Display 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.


Designing with text• 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


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


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.


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.


Anti-alias option


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


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.


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.


Animating text

• Animated text can grab attention• Do not overdo it.

– Too many animation and attention grabbers will distract users attention.


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.


The final rule…

• Experiment your work by trial and error.• Test your work with users – accept critique

and improvise.

Documents

CMPD273 Multimedia System Prepared by Nazrita Ibrahim © UNITEN2002 Multimedia Building Block : Text Reference: T. Vaughan, “Multimedia: Making It Work