Anatomy of Text

Text as a Media Element

• The most common form of media used to
display information that needs to be read
• Readability is the major issue that we must
focus on
• If people cannot read it, then your message
did not get across effectively
 Readability Issue
• In reality, it is difficult for a person to read text
on screen than in print.
• People read text on a computer screen at a
rate 28 % slower than reading from a book.
• What does this tell us?
– To be selective of the text we place on the screen
– To limit the amount of text that needs to be read
at one time
 Implication for Multimedia
Applications
• Text is commonly used in multimedia
applications to display the
– Titles
– Heading
– Body of text or Content
– Instructions
– Labels
 Factors that affect text
• 1. Font
• 2. Font Properties
– Font Size
– Font Style
– Font Color
• 3. Font Arrangement
– Text Alignment
– Text Margins
– Text Spacing
 Font
• Also known as “typeface”
• Pertains to the style of lettering
• There are more than 30 different fonts that
come packaged with Microsoft Office and
Windows
 Font Family
• A group of similar typefaces
– Interstate Family
– Lucida Family
– Arial Family
 Font Origins
• Fonts are named after its designer or design
era it originated from
• Examples:
– Garamond
• It was named after a Frenchman in the 14th century –
Claude Garamond
• Fact: Jean Jannon actually designed the font
– Bodoni
• It was credited to an italian typographer Giambattista
Bodoni in the 18th century
 Font Origins
• Baskerville
– Designed by an Englishman named John
Baskerville in the 17th century
– Also known to be quite pleasant and readable
particularly for long text.
 Five Major Categories
• Serif
• Sans Serif
• Script
• Decorative
• Monospaced
 Serif Fonts
• Have short stems or finishing strokes at the
end of each. These are called serifs.
• Preferred for printed materials with lengthy
text like in newspapers, magazines, and books.
• More readable when printed compared to the
computer screen.
• Examples of serif fonts include:
– Times New Roman, Garamond, Bodoni, Bookman
Old Style
 Sans Serif Fonts
• Fonts without serif are called sans serif, from
the French sans, meaning “without,”
• Often used as font for headlines, headings,
and titles / subtitles in printed materials.
• Preferred for text on Web or Multimedia
applications because it is perceived to be
more readable.
• Examples of sans-serif fonts include:
– Arial, Tahoma, Century Gothic, Verdana, Helvetica
 Script Fonts
• Script Fonts are also called Cursive fonts
• Often used as font for formal invitations,
posters and greeting cards.
• Never used as the font for body text on Web
or Multimedia applications
• Examples of script fonts:
– Edwardian Script, BlackJack, Brush Script, Snell
Roundhand, Zapfino, Lucida Handwriting
 Decorative Fonts
• Decorative fonts collectively include those
fonts that were created for the purpose of
adding embellishment, style or themes
• Often used as font for posters or greeting
cards
• Never used as the font for body text on Web
or Multimedia Applications
• These fonts are used sparingly (only when
necessary).
 Monospaced Fonts
• Monospaced fonts were created as a mimic to
the typewriter font
• All characters have equal width
• Often used for programming code and
displaying formulas
• Never used as the font for body text on Web
or Multimedia Applications
• These fonts are also used sparingly (only when
necessary)
 Font Size
• Font is measured in Points
• 12 point
• 14 point

• 24 point
• 36 point
• 48 point
• 60 point
•72 point
 Relative Font Size
• Do look fat in this paragraph ?
– In the example above, words are set with different fonts,
but all words have th same point size “36”
• Some fonts are designed to be taller than the others.
• Some fonts designed to have wider proportions than
others
• Some fonts are “heavier” than others
 Font Styles
• Font have three general styles
– Bold
– Italic
– Underlined
• Styles are generally used to emphasize text
• Each has its own use in a multimedia
application
 Text Color
• Text on the screen usually appears over a
particular background color.
• We aim to achieve a good contrast and
harmony between the foreground text color
and background colors to ensure readablity.
 Background Images
• Placing text over a background image is an
important thing to consider
• It is very difficult to read text over a
background image because there are too
many colors that overlap
• Remove the image if its not important
• If the image is needed, place a solid
background behind the text to make the
words stand out
 Text Alignment
• There are four major alignment options:
– Left Align, Right Align, Center Align and Justified
• Multimedia applications must employ left-
align for all body text or content text
 Text Margins
• To make reading easier on screen, it is
recommended to use text blocks that are 3 – 4
inches wide
• Using text blocks adds “white space” which
are invisible margins defined by wide spaces
 Text Chunks
• Dividing the paragraph into chunks improves
readability
• Adding line breaks in between paragraphs chunks
the text.
 Using Bullet
• Using bullets to present text also helps
improve readability
 Text Spacing
• The space between lines of text is called
leading.
• Increasing the leading improves readability
 Recommendations
• When Using text in multimedia applications
– Titles should be at least point size 32
– Text heading should be at least point size 28
– Body text should at least point size 24
– Use left aligned for body text
– Choose sans-serif fonts
– Use blocks of text
– Use bullets when possible
– Be consistent with your choice of fonts, text layout
and colors in all screens of your multimedia
application
 Don’ts
• Avoid:
– Too many Colors
– Too many font and styles
– ALL CAPITAL CHARACTER