13/09/15

IT3743 – Multimedia Systems & Design

Text in Multimedia

Lecture 02

What is Text
• Basic media for many multimedia systems
• Texts (words, sentences, paragraphs)
• Text communicate (thoughts, ideas, facts)

• Multimedia products depend on text for many things:

• To explain how application works
• To guide user in navigating through application
• Deliver information for which application was designed
 13/09/15

Structures of Text
• Minimize text in multimedia applications

• Text consists of two structures:

• Linear
• Non-Linear

Elements of Text
• Based on creating letters, numbers and special characters
• Alphabet characters: A – Z
• Numbers: 0 – 9
• Special Characters:
• Punctuation [. , ; ‘ …]
• Signs or symbols [* & ^ % $ £ ! /\ ~ # @ .…]
• May include:
• Special icon
• Drawing symbols
• Mathematical symbols
• Greek letters etc.
 13/09/15

Fonts VS Typefaces
• Font is a collection of characters of a particular size and style
• Font belongs to a particular typeface family
• Usually vary by type sizes and styles
• Sizes are measures in points
• Point is 0.0138 inch or about 1/72 of an inch
• Font size is the distance from top of the capital letters to the
bottom of descenders (g, y etc.)

Fonts VS Typefaces
• A typeface is a family of graphic characters that usually include
many type sizes and styles.
• A typeface contains a series of fonts. For example ARIAL, ARIAL
BLACK, ARIAL NARROW, ARIAL UNICODE MS are actually 4 fonts
under 1 family.

• Arial Typefaces Family

 13/09/15

Font Effects
• Effects are used to bring viewer’s attention to content.
• Case: UPPER & lower
• Bold, Italic, Underline, superscript or subscript
• Embossed or Shadow
• Colours
• Strikethrough

Types of Fonts
• Two types:
• Serif

• Sans Serif
 13/09/15

Types of Fonts
• Serif Text
• Decorative strokes added to the end of letters

• Serifs improve readability by leading the eye along the line of type

• Best suited for body text

• Difficult to read in small scale (smaller than 8pt) and in very large
scale

Types of Fonts
• San Serif Text
• Don’t have decorative strokes

• Sans Serif text has to be read letter by letter

• Suitable for small (smaller than 8pt) and very large sizes

• Used for footnotes and headlines

 13/09/15

Types of Fonts
• Examples Examples of San Serif
fonts

Times New Roman Century Gothic

Bookman Arial
Rockwell Light Comic Sans MS
Courier New Impact
Century Tahoma

Examples of Serif fonts

Fonts & Faces

• Ascender: the part of lowercase letters (k, b, d) that ascends
above the x-height of other lowercase letters in a font face

• Baseline: the imaginary line of which the majority of characters

in a typeface rest

• Descender: the part of lowercase letters (y, p, q) that descends

below the baseline of other lowercase letters in a font face
 13/09/15

Fonts & Faces

• Weight: the relative darkness of characters in various typefaces
within a type family, such as thin, light, bold, extra-bold, black

• Width: the possible variations, such as condensed or extended

• X-Height: the height of lowercase letter x

Intercap
• Placing an uppercase letter in the middle of a word
• WordPerfect, PhotoShop, HardDisc

• Emerged from computer programming community

• Coders can better recognize variables and commands
 13/09/15

Tracking, Kerning, Leading

Av Unkerned
Av Kerned

Tracking, Kerning, Leading

Reading Line One

Leading
Reading Line One
• Tracking: spacing between characters
• Kerning: space between pairs of characters, usually as an
overlap for improvement appearance
• Leading: spacing above and below a font or Line spacing
 13/09/15

Bit-Mapped System Fonts

• Computers and devices use 2 methods to represent fonts
• 1st Bit-Mapped font: every character is represented by an
arrangement of dots
• To print a bitmapped character, the printer simply locates the
character’s bitmapped representation stored in memory and
prints the corresponding dots
• Each different font requires a different set of bit-maps, even if
the typeface is same

Vector Graphics Fonts

• 2nd method uses vector graphics system to define fonts
• Shape or outline of each character is defined geometrically
• Typeface can be displayed in any size, so a single font description
really represents innumerable fonts
• For this reason vector fonts are called scalable fonts as they can
be scaled to any size
• A scalable font is really one font in which outlines of each
character are geometrically defined
 13/09/15

Bitmapped & Vector Fonts

A bitmapped font A vector font

Text Data Files

• Common encoding schemes for texts are:
• Plain Text (ASCII): text in an electronic format that can be read
interpreted by humans

• Rich Text: is similar but includes embedded special control

characters to provide additional features

• Hypertext: is an advance on rich text that allows reader to jump

different sections within document or even to another document
 13/09/15

Text Data Files

Plain text
This is plain text. It is readable by humans. It can contains numbers
(01234) and punctuation (.,#@*&) since it uses the ASCII character set.

Rich text
This is <bold>rich text</bold>.<br><center>It is also readable by
humans but contains additional tags which control the presentation of
the text.</center>

Hypertext
This is <a href=“http://www.w3c.org/”>hypertext</a>. It uses the rich
text format shown above but adds the ability to hyperlink to other
documents.<hr><img src=“logo.gif”>

Using Text in Multimedia

• Text elements used in multimedia are:

• Menus for navigation

• Interactive buttons
• Fields for reading
• HTML documents
• Symbols and Icons
 13/09/15

Working with Text

• Considerations and Guidelines:

• Be Concise
• Use appropriate typefaces and fonts
• Make is readable
• Consider type styles and colours
• Be consistent

Designing with Text

• Interactive project or website where user is seeking information:
• Too little text on screen requires annoying turns, wait and clicks
• Too much text can make screen overloaded and unpleasant

• Presentation slides for public speaking:

• Use bulleted points on large fonts and few words with lots of white
space
• Audience should focus on speaker rather than reading the slides
 13/09/15

Portrait VS Landscape
• Portrait
• Taller than wide
• Printed docs

• Landscape
• Wider than tall
• Monitor screens

Using Customized Font

• Availability?

• Solution: Provide font to download/install

Convert to image
 13/09/15

Using Longer Text

• Use scrolling fields

• Convert to image and let user move the whole window up or

down (used by acrobat reader for displaying PDF files)

• Break text into fields, fit on monitor-sized pages

Advantages & Disadvantages of Using Text

• Advantages:
• Relatively inexpensive to produce
• Present abstract ideas effectively
• Clarifies other media
• Provides confidentiality
• Easily changed or updated
• Disadvantages:
• Less memorable than other visual media
• Requires more attention from user than other media
• Can be large or heavy to accommodate
 13/09/15

Character Sets
• ASCII (American Standard Code for Information Interchange)
• 7 bit character coding system
• Most commonly used by computer systems
• Assigns a number or value to 128 characters, including lowercase,
uppercase, punctuation marks, Arabic numbers, math symbols
• Also includes 32 control characters used for device control
message: carriage return, line feed, tab, form feed etc.

Character Sets
• Extended Character Set
• A byte, consists of 8 bits
• 8th bit allows another 128 characters. Fuller set of 255 Characters
• Most commonly filled with ANSI (American National Standards
Institute) standard characters including often-used symbols, such
as ￠ or ∞, and international diacritics or alphabet characters
such as a or n.
• Also known as the ISOLatin-1 character set; it is used when
programming the text of HTML web pages.
 13/09/15

Character Sets
• Unicode
• 16 bit architecture for multilingual text and character coding
• Accommodates about 65,000 characters
• Includes characters from all known languages and alphabets
• HTML allows access to the Unicode characters by numeric
reference