3.

0 Text and Typography

Lesson Introduction

In the previous lesson you have learned the multimedia development process
with associated stages. In this lesson, you will be able to understand Text as the
first multimedia asset. Text plays key role in multimedia content delivery while
representing the ideas, concepts, description etc., in a textual form. You will be
able to understand the different types of text formats, fonts and styles use in
multimedia applications. Further, the appropriate use of text and styles will be
guided through technical and non-technical aspects.

Learning Outcomes:
After completion of this lesson, the learner will be able to design and
compose text in multimedia content with related the context.

§ Design text assets

§ Apply text styles according to the context
§ Describe font types and associated rules
§ Describe the text coding and conventions

Lesson Outline:
§ Text elements and Types of text.
§ Fonts and typefaces
§ Classification of fonts.
§ Bitmapped and Vector fonts.
§ Font appearance.
§ Font mapping.
§ Guidelines of choosing fonts.
§ Coding and Efficient use of text
3.1 Role of Text in Multimedia

The basic elements of most multimedia titles consisting of words, sentences and
paragraphs in the form of page titles, labels for pictures and instructions for
operating the applications used to convey information or describe abstract ideas
that have no visual or aural component (e.g. feeling).

Multimedia developers are considering text from 2 viewpoints, the first id the way
the text is presented. That should easy to read, well styled (font type, color and
size). The second is content lies behind the text. That is the interactive
link/hypertext/hot-spot text where it able to react according to the user action.
Also, Text provides the information regarding the application.

3.1.1 Text as Multimedia Element

As an information communication media, text was first used by printed media

such as books and newspapers with various typefaces to describe information.
Text is a primary form of information dissemination. In general, it is a key
component of every application ever created. In multimedia products text is used
for various items such as page titles, labels for pictures, instruction for operating
the application or for button menu.

The building blocks of text are elements like letters, numbers and special
characters into, words, sentences, paragraphs and books. These elements are in
three categories:
• Alphabet characters: A–Z (Words) A to Z (includes both uppercase and
lowercase depending on the language)

• Numbers: 0–9 (Numerical)

• Special characters: punctuation [. , ; ‘…] and signs and symbols [@ & * £ ^ % $ !
~ # etc…]
Those are called as character sets. In addition there are Icons or drawing symbols,
mathematical symbols, Greek letters, and so on
Text organization can be viewed as linear when the navigation proceeds in a
sequential manner, it is nonlinear when navigation with the help of links to a
desired item (hyperlink etc.). When considering digital text, an image of a text
character is called a glyph.

3.2 Fonts and Typeface

The graphic representations textual symbols of letters, numbers, and special

character, usually vary by type, sizes and styles. These representations are
referred to as typefaces. The size of typefaces is measured in points. One point is
1/72”. It is the height (distance) of the space from the top of capital letters like A
or R to the bottom of the descenders in letters like g, p, and q.
There are few effects used in typefaces that are useful for gaining readers’
attention (focus) to content are listed below:

• Case: UPPER CASE and lower case;

• Bold, Italic, Underline
• superscript or subscript; e.g. abc
• or shadow e.g.

• Color
• Strikethrough

There are various fonts use in multimedia. A font is a collection of characters of

single size and style belonging to a particular typeface family. The terms of
‘typeface’ and ‘font’ are often used interchangeably, but font can be taken as a
piece of commands that tells the printer/computer, how the printed character
appears. There are two classes of fonts namely ‘serif’ and ‘sans serif’.

Serif fonts use ornate additions like tips or flags at the ends of a letter strokes

Sans serif fonts don’t have these features.

Serif fonts are usually used for documents or screens that have large quantities of
text because the serif helps guide the reader’s eye along the text.

For computer displays, sans serif fonts are considered better because of the
sharper contrast.

Examples of serif and sans serif fonts are given above sentences and also shown
in Figures 3.1 and 3.2.

The TEXT
Figure 3.1: Serif fonts

The TEXT
Figure 3.2: San Serif fonts

Other than the serif and san serif font types, among the same font type, the
computer letters may vary their styles based on key parameters as represented in
the figure 3.3.

Ascender: An upstroke on a character can be found in the letters "h", "b" and "d".
Descender: A down stroke below a character and can be found in the letters "p",
"q" and "y".
Leading: Leading is defined as the spacing above and below a line of text, or line
spacing.
Tracking: Spacing between characters.
Kerning: The space between pairs of characters.
 Figure 3.3: Font style parameters

Activity 3.1
Use a familiar word processing software application or presentation
application and prepare a document to illustrate the above-mentioned
effects on text by using relevant tools (Based on section 3.2 to this point).

Advise to use Microsoft Word or PowerPoint

3.3 Bitmapped and Vector Fonts

Fonts are stored as bitmapped or vector graphical formats when use in the
multimedia systems. Bitmap fonts depend to the size and the pixel numbers,
where file size increases as more symbols are added. Vector fonts able to draw
any size of letter by scaling the vector drawing primitives, where mathematical
algorithms are used. Vector font file size is much smaller than bitmaps. TrueType
and PostScript are two vector font formats use in computers.

3.3.1 Font Appearance

Distortion of characters at the edges is called aliasing. This can occur on all pixels
representing characters or images (bitmapped). Anti-aliasing is the technique of
making edges smooth. This add an effect of enhancing the readability and
aesthetics of the text. Examples of aliased and anti-aliased effect of strokes are
shown in Figure 3.4.
 Figure 3.4: Aliased and Anti-Aliased strokes

Multimedia developers are deciding how text would appear on the screen. The
process to draw the font onto the computer screen is called rasterization.
Rasterization occurs when the font is drawn one pixel at a time. This process
creates aliased effects on text (jagged text). The anti-aliasing technique use
blending effects of the font into the background color. This technique minimizes
the jagged edges making the text smoother in appearance.

3.4 Text Representation

Text in multimedia should be designed to represent in visually appealing manner.

It also includes the design considerations of providing controls, keyboard support,
interaction, and offer user chooses.

The primary text representation techniques are governed by data encoding

schemes:

Plain text: Uses American Standard Code for Information Interchange (ASCII) text,
this text is in an electronic format that can be read and interpreted by humans.

Rich text: This embeds special control characters into the plain text above to
provide additional features. These features include making bold, center, italic etc.
It can be readable by humans, also contains additional tags that control the
presentation of the text.
Hypertext: This is an improvement over rich text that allows the reader to link or
jump to different sections or media asset within the document or connect to a
new multimedia asset.

Text plays a very important role in designing a multimedia content. Text is use for
titles and headlines, for menus, for navigation, and for content. When designing
text for the multimedia content, the following aspects are to be considered:

Be concise: Computer screens has a limited space, decide how much text
information to be packed onto the screen. However, there should be a balance,
too much text can make the screen seem overcrowded and too little text makes
annoying and may cause mouse clicks. The amount of text related to font
selection.

Use the appropriate typefaces and fonts: Selecting right fonts for multimedia
application is part of the important decision. These are few for choosing the right
font.

• Do not use decorative fonts for small types – Due to small size, it may cause
unreadable.

• Use as few typefaces as possible with italic or bold for variations.

Make it readable: Adjust the leading or line spacing to have a lot of text for easier
reading. Vary the size of a font according to the importance of the message. Apply
bold or emphasize to highlight ideas. For large headlines, adjust the spacing
between letters (kerning) where the spacing feels appealing.

Consider type styles and colors: Experiment the effects of different colors by
placing the text on various backgrounds.

Use restraint and be consistent: Maintain the same style and fonts for the similar
content with respective to the meaning and the content organization.
3.5 Text Encoding

The text is a string of character symbols entered in a keyboard. Each symbol is

represented by a unique combination of a fixed number of bits known as a code.
There is different character sets (symbols), for example, ASCII, EBCD, UNICODE,
etc.

Please refer the link given in this weeks’ activity for the above character encoding
and decoding mechanisms. Link

3.6 Font Mapping

Fonts the multimedia application may not be available on a user’s computer.

Then, it safest to stay with fonts that came together with the operating system. If
the application uses special fonts (may be for titles, headlines or button), bitmap
them or convert them to graphic image. However, it cannot be edited. Otherwise,
specifying which font should be the substitute is called font mapping. Beware that
not all the time, characters will appear correctly.

3.7 PostScript and TrueType Fonts

PostScript: It is a Page Description Language font type. Uses mathematical

construct in displaying fonts. Allows the character to be scaled bigger/smaller
without much memory constrains. It is able to be finely printed. Works with
special software when display. Sometimes Needs licensing.
Example: Adobe’s PostScript

TrueType: It also a Page Description Language as an outline font type. TrueType is

joint effort by Apple & Microsoft. Uses mathematical construct. It is capable of
printing smooth chars, it allows characters to displayed on low-resolution
monitors. No special software needed to display. No licensing needed
Review Questions

1. What is meant by typeface?

2. Describe two main types of fonts with examples.

3. Describe the difference between bitmap and vector font.

4. What is anti-aliasing?

5. Compare and contrast the use of the ASCII and Unicode character sets.