Anatomy of Text

8/7/2019 Anatomy of Text

1/27


2/27

` 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


3/27

` 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


4/27

` Text is commonly used in multimedia applications

to display the Titles

Heading Body of text or Content

Instructions

Labels


5/27

` 1. Font

` 2. Font Properties Font Size

Font Style Font Color

` 3. Font Arrangement Text Alignment

Text Margins Text Spacing


6/27

` 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


7/27

` A group of similar typefaces Interstate Family

Lucida Family

Arial Family


8/27

` Fonts are named after its designer or design era it

originated from

` Examples:

Garamondx It was named after a Frenchman in the 14th century Claude

Garamond

x Fact: Jean Jannon actually designed the font

Bodoni

x It was credited to an italian typographerGiambattista Bodoniin the 18th century


9/27

` Baskerville Designed by an Englishman named John Baskerville in

the 17th century

Also known to be quite pleasant and readable particularly

for long text.


10/27

` Serif

` Sans Serif

` Script

` Decorative` Monospaced


11/27

` 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 OldStyle


12/27

` 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


13/27

` 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 orMultimedia applications

` Examples of script fonts: Edwardian Script, BlackJack, Brush Script, Snell

Roundhand, Zapfino, Lucida Handwriting


14/27

` 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).


15/27

` Monospaced fonts were created as a mimic to the

typewriter font

` All characters have equal width

` Often used for programming code and displayingformulas

` Never used as the font for body text on Web or

Multimedia Applications

` These fonts are also used sparingly (only whennecessary)


16/27

` Font is measured in Points` 12 point

` 14 point

` 24 point

` 36 point`48 point

`60 point`72 point


17/27

` Do I look fat in thisparagraph? 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 theothers.

` Some fonts designed to have wider proportions

than others

` Some fonts are heavier than others


18/27

` Font have three general styles Bold

Italic

Underlined

` Styles are generally used to emphasize text

` Each has its own use in a multimedia application


19/27

` 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 backgroundcolors to ensure readablity.


20/27

` 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 thatoverlap

` 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


21/27

` 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


22/27

` 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 areinvisible margins defined by wide spaces


23/27

` Dividing the paragraph into chunks improves

readability

` Adding line breaks in between paragraphs chunks

the text.


24/27

` Using bullets to present text also helps improve

readability


25/27

` The space between lines of text is called leading.

` Increasing the leading improves readability


26/27

` 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 andcolors in all screens of your multimedia application


27/27

` Avoid: Too many Colors

Too many font and styles

ALL CAPITAL CHARACTER

Anatomy of Text

Documents

Transcript of Anatomy of Text