TOPIC 2 – TEXT

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
 (cont.) Importance of Text in a Multimedia
Presentation
• 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
meaningsto express what you need to say

CSC253 5
 (cont.) Importance of Text in a Multimedia
Presentation
• Factors affecting legibility of text:
– Size.
– Background and foreground color.
– Style.
– Leading.

CSC253 6
Understanding Fonts and Typefaces

CSC253 7
(cont.) Understanding Fonts and Typefaces

• The study of fonts and typefaces includes the

following:
– Font styles.
– Font sizes.
– 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.
• Example : LibraryBox,

CSC253 12
Two classes of fonts: Serif or Sans Serif

Serif Sans Serif

little decoration at the
end of a letter stroke.
used for body text
do not have a serif at
the end of a letter
stroke.
These fonts are used
for headlines and bold
statements.

CSC253 13
 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
Bookman Gothic
Rockwell Light Arial
Courier New Comic Sans MS
Century
Impact
Tahoma

CSC253 14
CSC253 15
 Text Characteristics
• This example shows the Times New Roman font
Ascender
Capital Height x-Height

FD xhp
Point size Serif p -Height
Descender

CSC253 16
Tracking, Kerning and Leading

AvUnkerned
Av
Kerned

CSC253 17
 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 18
 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 19
Bitmapped and vector fonts
AAbitmapped
bitmappedfont
font AAvector
vectorfont
font

CSC253 20
 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 21
Jaggies and Antialiasing

CSC253 22
 Using Text Elements in a Multimedia
Presentation
• Anti-aliased text must be used when a gentle and blended look
for titles and headlines is needed.
• Ideas and concepts can be highlighted by making the text bold or
by emphasizing text.
• A pleasant look can be created by experimenting with different
font faces, sizes, leadings, and kerning.
• The text elements used in multimedia are:
– Menus for navigation.
– Interactive buttons.
– Fields for reading.
– HTML documents.
– Symbols and icons.

CSC253 23
 Menus for Navigation
• A user navigates through content using a
menu.
• A simple menu consists of a text list of topics.

CSC253 24
 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 25
 Fields for Reading
• Reading a hard copy is easier and faster than
reading from the computer screen.
• A document can be printed in one of two
orientations - portrait or landscape.
• 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.

CSC253 26
 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 27
 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 28
 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 29
• 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 30
 Computers and Text
• The font wars.
– PostScript
– TrueType

• Character sets.

CSC253 31
 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 32
 TrueType
• Apple and Microsoft developed the TrueType
methodology.
• TrueType is a system of scalable outline fonts,
and can draw characters at low resolution.

CSC253 33
 Character Sets
• The American Standard Code for Information
Interchange (ASCII) is a 7-bit coding system.
• The extended character set is commonly filled
with ANSI standard characters.
• The ISO-Latin-1 character set is used while
programming the text of HTML pages.

CSC253 34
 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 35
 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 36
Fontographer

CSC253 37
 Multimedia and Hypertext
• Multimedia.
• Hypertext system.
• Using hypertext systems.
• Searching for words.
• Hypermedia structures.
• Hypertext tools.

CSC253 38
 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 39
 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 40
 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 41
 (cont.) Using Hypertext Systems
• Hypertext databases make use of proprietary
indexing systems.
• Server-based hypertext and database engines
are widely available.

CSC253 42
 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 43
 (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 44
 Hypermedia Structures
• 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
- Navigating hypermedia structures

CSC253 45
 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 46
 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 47
Navigating Hypermedia Structures
• The simplest way to navigate hypermedia
structures is via buttons.
• Location markers must be provided to make
navigation user-friendly.

CSC253 48
 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 49
 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 50