TOPIC 2 – TEXT

Arranged by :
MOHD SAIFULNIZAM ABU BAKAR
saiful.uitm.edu.my
 Overview
• Importance of text in a multimedia
presentation.
• Understanding fonts and typefaces.
• Using text elements in a multimedia
presentation.
• Computers and text.
• Font editing and design tools.
• Multimedia and hypertext.
CSC253 2
 Introduction To Text
• Using text and symbols for communication began
about 6,000 years ago in Mediterranean Fertile
Crescent: Mesopotamia, Egypt, Sumeria and
Babylonia.
• In some former eras, not all people were allowed
to learn writing and reading.
• Today, text and ability to read it are doorways to
power and knowledge.
• Since the explosion of the Internet and the World
Wide Web(WWW), text has become more
important than ever.
CSC253 3
 Importance of Text in a Multimedia
Presentation
• Words and symbols in any form, spoken or written,
are the most common means of communication.
• Text is a vital element of multimedia menus,
navigation systems, and content.

CSC253 4
• A single word may be cloaked in many
meanings, so it is important to cultivate
accuracy and conciseness in the specific words
you choose.
• It is important to design labels for title
screens, menus, buttons or tabs using words
that have the most precise and powerful
meanings to express what you need to say

CSC253 5
Importance of Text in a Multimedia
Presentation

 Factors affecting legibility of text:

Size

Leading TEXT Color

(Spacing) (Background / Foreground)

Style
Understanding Fonts and Typefaces

CSC253 7
 (cont.) Understanding Fonts and
Typefaces
• The study of fonts and typefaces includes the
following:
– Font styles.
– Font sizes - distance from the top of the capital
letters to the bottom of the descenders in letters
such as g and y
– Cases.
– Serif versus Sans Serif.

CSC253 8
 Font Styles
Font styles include:
– Boldface
– Italic
– Underlining
– Outlining

CSC253 9
 Font Sizes
• Font size is measured in points. (pt)
– 1 point = 0.0138 inch(1/72)
• Character metrics are the general
measurements applied to individual
characters.
• Kerning is the spacing between character
pairs.
• Leading is the space between lines.

CSC253 10
 Kerning vs Leading
Kerning is the spacing between
character pairs.

Leading is
the space
between
lines.

CSC253 11
 Cases
• A CAPITALIZED LETTER IS REFERRED TO AS
‘UPPERCASE', while a small letter is referred
to as 'lowercase.'
• Placing an uppercase letter in the middle of
a word is referred to as intercap or
CamelCase
• Example : LibraryBox,
FedEx

CSC253 12
Drop cap

CSC253 13
 Two classes of fonts: Serif or Sans
Serif
Serif Sans Serif
little decoration at the do not have a serif at
end of a letter stroke. the end of a letter
stroke.

used for body text These fonts are used for

headlines and bold
statements.

CSC253 14
 Types of Fonts
• For computer displays, Sans Serif fonts
considered better because of the sharper
contrast.
Example of Serif fonts Example of Sans Serif
Times New Roman Century Gothic
Bookman Arial
Rockwell Light Comic Sans MS
Courier New
Century Impact
Tahoma

CSC253 15
CSC253 16
 Serif Sans Serif

Times New Roman Arial

Palatino Verdana

Universal
Bookman

Century Gothic
W i d e L a t i n
 Text Characteristics
• This example shows the Times New Roman font
Ascender
Capital Height x-Height

FD xhp
Point size Serif p -Height
Descender

CSC253 18
Tracking, Kerning and Leading

AvUnkerned
Av
Kerned

CSC253 19
 Tracking, Kerning and Leading

Reading Line One

Leading
Reading Line One
o Ascender : an upstroke on a character
o Descender : the down stroke below the baseline of a character
o Leading : spacing above and below a font or Line spacing
o Tracking : spacing between characters
o Kerning : space between pairs of characters, usually as an
overlap for improvement appearance

CSC253 20
 Bitmapped and vector fonts
• Fonts can either be stored as bitmapped or
vector graphics
• Bitmaps font depend to the size and the pixel
numbers - File size increases as more sizes are
added
• Vector fonts can draw any size by scaling the
vector drawing primitives mathematically
– File size is much smaller than bitmaps
– TrueType and PostScript are vector font formats
CSC253 21
Bitmapped and vector fonts
A bitmapped font A vector font

CSC253 22
 Jaggies and Antialiasing
• Jaggies are the jagged edges you see when a
bitmapped image is resized
– It is a consequence of the underlying array of pixels
from which the image is composed

• Antialiasing is a technique that can be used to

eliminate jagged edges
– It substitutes additional pixels in other colours to fool
the brain into thinking it is seeing continuous lines
– The technique is used to blend the font into the
background by transitioning the colour from the font
colour to background.
– This technique minimizes the jagged edges making for
a smoother overall appearance.
CSC253 23
Jaggies and Antialiasing

CSC253 24
 Using Text Elements in a
Multimedia Presentation
 Choosing text fonts
Consider legibility and readability

Avoid too many faces

Use color purposefully

Use drop caps and initial caps for accent

Minimize centered text

Use white space

Use animated text to grab attention

 Using Text Elements in a
Multimedia Presentation

 Choosing text fonts

 Use anti-aliased text
for a gentle and
blended look

Anti-aliased text & graphics

creates “smooth”
boundaries between colors
 Using Text Elements in a
Multimedia Presentation
 Text elements used in multimedia are:
1 • Menus for navigation
2 • Interactive buttons
3 • Fields for reading
4 • HTML documents
5 • Symbols and icons
 Menus for Navigation
• A user navigates through content using a
menu.
• A simple menu consists of a text list of topics.

CSC253 28
 Interactive Buttons
• A button is a clickable object that executes a
command when activated.
• Users can create their own buttons from
bitmaps and graphics.
• The design and labeling
of the buttons should be
treated as an industrial
art project.
CSC253 29
 Fields for Reading
 Reading a hard-copy or a book is easier & faster
than reading from the computer screen
 A document can be printed in one of two
orientations: portrait or landscape
Research shows that when people read text on a computer
screen they blink only 3 to 5 times per minute,
but they blink 20 to 25 times per minute when reading text
on paper.

This reduced eye movement may cause dryness, fatigue, &

possibly damage to the eyes
 Fields for Reading
 The taller-than-wide
orientation used for
printing documents is
called portrait.

 The wider-than-tall
orientation that is
normal to monitors is
called landscape.
 HTML Documents
• HTML stands for Hypertext Markup Language.
• It is the standard document format used for
Web pages.
• HTML documents are marked using tags.

CSC253 32
 HTML Documents
• An advanced form of HTML is DHTML.
• DHTML stands for Dynamic Hypertext Markup
Language.
• DHTML uses Cascading Style Sheets (CSS).
• Some of the commonly used tags are:
– The <B> tag for making text bold faced.
– The <OL> tag for creating an ordered list.
– The <IMG> tag for inserting images.

CSC253 33
 Symbols and Icons
• Symbols are concentrated text in the form of
stand-alone graphic constructs.
• They are used to convey meaningful
messages.
• Symbols used to convey human emotions are
called emoticons.
• Icons are symbolic representations of objects
and processes.

CSC253 34
 Computers and Text
• Mapping across platforms:
• Fonts and characters are not cross-platform
compatible [ between Windows and
Macintosh platforms ]
• They must be mapped to the other machine
using font substitution.

CSC253 35
 Computers and Text
• The font wars.
– PostScript
– TrueType

• Character sets.

CSC253 36
 PostScript
• PostScript is a method of describing an image
in terms of mathematical constructs.
• PostScript characters are scalable and can be
drawn much faster.
• The two types of PostScript fonts are Type 3
and Type 1.

CSC253 37
 TrueType
• Apple and Microsoft developed the TrueType
methodology.
• TrueType is a system of scalable outline fonts,
and can draw characters at low resolution.

CSC253 38
 OpenType
 Adobe and Microsoft developed OpenType

 Improved font management system because it

incorporates the best features of PostScript
and TrueType

 By 2007, it became a free, publicly available

international standard
 Character Sets and Alphabets

• American Standard Code for Information Interchange

ASCII • 7-bit character coding system to represent 128 characters

• Extended character set

ISO-Latin-1 • An extra bit from ASCII allows representation of 255 characters

• 16-bit architecture for multilingual text and character encoding

Unicode • To handle various international language alphabets, up to
65,000 characters
 Character Sets
• Unicode is a 16-bit architecture for multilingual
text and character encoding.
• The shared symbols of each character set are
unified into collections of symbols called scripts.
• Mapping across platforms:
– Fonts and characters are not cross-platform
compatible.
– They must be mapped to the other machine using font
substitution.

CSC253 41
 Font Editing and Design Tools
• Macromedia Fontographer.
– Fontographer is a specialized graphics editor.
– It is compatible with both Macintosh and Windows
platform.
– It can be used to develop PostScript, TrueType, and
bitmapped fonts.
– It can also modify existing typefaces and incorporate
PostScript artwork.

• Creating attractive texts.

– Applications that are used to enhance texts and images
include: Adobe Photoshop, TypeStyler, COOL 3D,
HotTEXT and TypeCaster
CSC253 42
Fontographer

www.fontlab.com
CSC253 43
 Making Pretty Text
 Applications that are used to enhance
texts and images include:
 Adobe Photoshop
 TypeStyler
 COOL 3D
 HotTEXT
 TypeCaster
 Making Pretty Text
 Use the tools
provided in the
application to
manipulate text
UiTM (Terengganu) - naza Text 39
 Multimedia and Hypertext
• Multimedia.
• Hypertext system.
• Using hypertext systems.
• Searching for words.
• Hypermedia structures.
• Hypertext tools.

CSC253 47
 Multimedia
• Multimedia is defined as the combination of
text, graphics, and audio elements into a single
presentation.
• When the user have control over the
presentation, it is called interactive multimedia.
• Interactive multimedia becomes hypermedia
when a structure of linked elements is provided
to the user for navigation and interaction.

CSC253 48
 Hypertext System
• Hypertext is defined as the organized cross-
linking of words, images, and other Web
elements.
• A system in which words are keyed or indexed
to other words is referred to as a hypertext
system.
• A hypertext system enables the user to
navigate through text in a non-linear way.

CSC253 49
 Using Hypertext Systems
• Information management and hypertext
programs present electronic text, images, and
other elements in a database fashion.
• Software robots visit Web pages and index
entire Web sites.

CSC253 50
 (cont.) Using Hypertext Systems
• Hypertext databases make use of proprietary
indexing systems.
• Server-based hypertext and database engines
are widely available.

CSC253 51
 Searching for Words
• Typical methods for word searching in
hypermedia systems are:
– Categorical search
• Selecting or limiting the documents, pages, or fields of text within which to
search for a word or words
– Word relationship
• Searching for the words according to their general proximity and order. Example :
“birthday party” and “cake”.
– Adjacency
• Searching for words occurring next to one another
– Alternates
• Applying an OR criterion to search for two or more words. Example: “meat”
or “egg”
– Association
• Applying AND criterion to search for two or more words.
CSC253 52
 (cont.) Searching for Words
• (cont.) Typical methods for word searching in
hypermedia systems are:
– Negation
• Applying a NOT criterion
– Truncation
• Searching for word with any of its possible suffixes. Example : geo# (geology,
geometry)
– Intermediate words
• Searching for words that occur between what might normally be adjacent
words, such as a middle name.
– Frequency
• Searching for words based on how often they appear

CSC253 53
 Hypermedia Structures
• Links.
• Nodes.
• Anchors.
• Navigating hypermedia structures.

CSC253 54
 Links
• Links are connections between conceptual
elements.
• Links are the navigation pathways and menus.

NODES
 Nodes are accessible topics, documents, messages, and
content elements.
 Nodes and links form the backbone of a knowledge
access system.

CSC253 55
 Anchor
• Anchor is defined as the reference from one
document to another document, image,
sound, or file on the Web.
• The source node linked to the anchor is
referred to as a link anchor.
• The destination node linked to the anchor is
referred to as a link end.

CSC253 56
Navigating Hypermedia Structures
• The simplest way to navigate hypermedia
structures is via buttons.
• Location markers must be provided to make
navigation user-friendly.

CSC253 57
 Hypertext Tools
• Two functions common to most hypermedia text
management systems are building (authoring) and reading.
• The functions of ‘builder’ are:
– Creating links.
– Identifying nodes.
– Generating an index of words.
• Hypertext systems are used for:
– Electronic publishing and reference works.
– Technical documentation.
– Educational courseware.
– Interactive kiosks.
– Electronic catalogs.

CSC253 58
 Summary
• Text is one of the most important elements of
multimedia.
• The standard document format used for Web
pages is called HTML.
• Multimedia is the combination of text,
graphics, and audio elements into a single
presentation.
• A hypertext system enables the user to
navigate through text in a non-linear way
CSC253 59