1

Unit

Objectives:
Text and Graphics
2
At the end of the unit, the student must have:
• how to use text-related element in multimedia design correctly;
• compare and contrast between bitmap and vector graphic;
• graphics and editing software.

1.1 Introduction
Using text and symbols for communication is a very recent human development that
began about 6,000 years ago in the Mediterranean Fertile Crescent—Mesopotamia, Egypt,
Sumeria, and Babylonia—when the first meaningful marks were scraped onto mud tablets and
left to harden in the sun. Only members of the ruling classes and the priesthood were allowed
to read and write the pictographic signs and cuneiforms. The earliest messages delivered in
written words typically contained information vital to the management of people, politics, and
taxes. Because this new medium did not require rote memorization by frail human gray matter,
written messages became popular among the elite. Unlike their human counterparts, these new
messages were less likely to perish due to dysentery or acts of God, or suffer from amnesia.
Even if a message were intercepted by foes or competitors, it would still be indecipherable—
except by those few who had acquired reading skills.
In fact, because those who could read probably attended the same private school or
shared the same tutors, in those days reading, writing, and power politics were naturally
intertwined. In some former eras it was a capital offense to read unless you belonged to the
proper social class or possessed a patent granted to you by your rulers.

Today, text and the ability to read it are doorways to power and knowledge. Reading
and writing are expected and necessary skills within most modern cultures. Now, depending
upon your proficiency with words, you may be awarded a doctorate instead of the death
penalty. And, as has been the case throughout history, text still delivers information that can
have potent meaning.
Since the explosion of the Internet and the World Wide Web, text has become more
important than ever. Indeed, the native language of the Web is HTML (Hypertext Markup
Language), originally designed to display simple text documents on computer screens, with
occasional graphic images thrown in as illustrations. Academic papers, magazine articles,
complex instruction manuals, and even the contents of entire books are now available for
reading with a web browser. Add a built-in function that links, with a click of the mouse,
selected words and phrases to other related and perhaps more detailed material and you can
surf the Net in a medium much richer than the paper pages of a book.

2
The social impact of this text-based medium on the way people access and use information will be
profound as the Web matures further. In contrast to today’s television medium, which consists of
sound and images with a few text headlines “dumbed down” to the level of a perceived lowest
common denominator of passive audience, the Web offers an active experience laden with enough
choices to challenge even bright people who can read. More than television, with its 50 or 100 or
even 400 channels, the Web offers an explorer’s paradise of billions of HTML documents. Yahoo!
Search once claimed, “Our index now provides access to over 20 billion items. For those who are
curious, this update includes just over 19.2 billion web documents, 1.6 billion images, and over 50
million audio and video files.” Until 2009, the search engines displayed the total number of documents
they indexed, in the billions. These huge numbers were very inaccurate, it turned out, and they have
ceased making precise statements about quantity. A trick in the Google search engine is to type in
“site:” and the name of a domain. Google will tell you how many pages from that domain are
indexed:

2.2 About Fonts and Faces

A typeface is a family of graphic characters that usually includes many type sizes and styles. A
font is a collection of characters of a single size and style belonging to a particular typeface family.
Typical font styles are boldface and italic. Your computer software may add other style attributes, such
as underlining and outlining of characters. Type sizes are usually expressed in points; one point is
0.0138 inch, or about 1/72 of an inch. The font’s size is the distance from the top of the capital letters
to the bottom of the descenders in letters such as g and y. Helvetica, Times, and Courier are
typefaces; Times 12-point italic is a font. In the computer world, the term font is commonly used when
typeface or face would be more correct.
A font’s size does not exactly describe the height or width of its characters. This is because
the x-height (the height of the lowercase letter x) of two fonts may vary, while the height of the
capital letters of those fonts may be the same (see
Figure 2-1). Computer fonts automatically add space
below the descender (and sometimes above) to
provide appropriate line spacing, or leading
(pronounced “ledding,” named for the thin strips of
lead inserted between the lines by traditional
typesetters).
Leading can be adjusted in most programs
on both the Macintosh and the PC. Typically you will find this fine-tuning adjustment in the Text menu
of image-editing programs or the Paragraph menu of word processing programs, though this is not
an official standard. No matter where your application has placed the controls for leading, you will
need to experiment with them to achieve the best result for your font. With a font editing program like
Fontographer from Fontlab, Ltd. at www.fontlab.com (you’ll see an example of it later in the chapter),
adjustments can also be made along the horizontal axis of text. In this program the character metrics
of each character and the kerning of character pairs can be altered. Character
metrics are the general measurements applied to individual characters; kerning is the spacing between
character pairs. When working with PostScript, TrueType, and Master fonts—but not bitmapped
fonts—(see “Computers and Text” later in this chapter), the metrics of a font can be altered to create
interesting effects. For example, you can adjust the body width of each character from regular to

3
condensed to expanded, as displayed in this example using the Sabon font:

Or you can adjust the spacing between

characters (tracking) and the kerning
between pairs of characters:

When it converts the letter A from

a mathematical representation to a recognizable symbol displayed on the screen or in printed output
(a process called rasterizing), the computer must know how to represent the letter using tiny square
pixels (picture elements), or dots. It does this according to the hardware available and your
specification, from a choice of available typefaces and fonts. Search for “free fonts.” High-resolution
monitors and printers can make more attractive-looking and varied characters because there are
more fine little squares or dots per inch (dpi). And today’s broad selection of software fonts makes it
easier to find the right typeface and font for your needs. The same letter can look very different when
you use different fonts and faces:

2.2.1 Cases

In centuries when type was set by hand, the type for a single font was always stored in two
trays, or cases; the upper tray held capital letters, and the lower tray held the small letters. Today, a
capital letter is called uppercase, and a small letter is called lowercase.
TIP Studies have shown that words and sentences with mixed upper- and lowercase letters are easier to
read than words or sentences in all caps (uppercase). While uppercase can make your message appear
important or urgent, use this sparingly; in online messaging it’s known as “SHOUTING” or “YELLING” and can
be annoying, if not offensive.

In some situations, such as for passwords, a computer is case sensitive, meaning that the
text’s upper- and lowercase letters must match exactly to be recognized. But nowadays, in most
situations requiring keyboard input, all computers recognize both the upper- and lowercase forms of a
character to be the same. In that manner, the computer is said to be case insensitive.
Company and product names such as WordPerfect, OmniPage, PhotoDisc, FileMaker, and
WebStar have become popular. Placing an uppercase letter in the middle of a word, called an
intercap, is a trend that emerged from the computer programming community, where coders
discovered they could better recognize the words they used for variables and commands when the
words were lowercase but intercapped.

2.2.2 Serif vs San Serif

Typefaces can be described in many ways, just as a home advertised by a realtor, a wine
described by a food critic, or a political candidate’s platform can all be described in many ways. Type
has been characterized as feminine, masculine, delicate, formal, capricious, witty, comic, happy, technical,
newsy—you name it. But one approach for categorizing typefaces is universally understood, and it has
less to do with the reader’s response to the type than it does with the type’s mechanical and
historical properties. This approach uses the terms serif and sans serif.
4
Serif versus sans serif is the simplest way to categorize a
typeface; the type either has a serif or it doesn’t (sans is
French for “without”). The serif is the little decoration at
the end of a letter stroke. Times, New Century
Schoolbook, Bookman, and Palatino are examples of serif
fonts. Helvetica, Verdana, Arial, Optima, and Avant Garde
are sans serif. Notice the difference between serif (on the
left) and sans serif:

On the printed page, serif fonts are traditionally

used for body text because the serifs are said to help guide the reader’s eye along the line of text.
Sans serif fonts, on the other hand, are used for headlines and bold statements. But the computer
world of standard, 72 dpi monitor resolution is not the same as the print world, and it can be argued
that sans serif fonts are far more legible and attractive when used in the small sizes of a text field
on a screen. Indeed, careful selection of a sans serif font designed to be legible in the small sizes
(such as Tahoma or Verdana) makes more sense when you are presenting a substantial amount of
text on the screen. The Times font at 9-point size may look too busy and actually be difficult and
tiring to read. And a large, bold serif font for a title or headline can deliver a message of elegance
and character in your graphic layout. Use what is right for your delivery system, which may not
necessarily be the same as what is right when you’re printing the material to paper. This is because
when you’re printing out what you create on a computer monitor, WYSIWYG (What You See Is What
You Get) is more of a goal than an absolute fact.

2.3 Using Text in Multimedia

Imagine designing a project that used no text at all. Its content could not be at all complex,
and you would need to use many pictures and symbols to train your audience how to navigate
through the project. Certainly, voice and sound could guide the audience, but users would quickly tire
of this because greater effort is required to pay attention to spoken words than to browse text with
the eye.
A single item of menu text accompanied by a single action (a mouse click, keystroke, or finger
pressed to the monitor) requires little training and is clean and immediate. Use text for titles and
headlines (what it’s all about), for menus (where to go), for navigation (how to get there), and for
content (what you see when you get there).
TIP In designing your navigation system, bring the user to a particular destination with as few actions and
as short a wait as possible. If the user never needs the Help button to get there or never has to click the Back
button when at a dead end, you’re doing everything right!

2.3.1 Designing with Text

Computer screens provide a very small workspace for developing complex ideas. At some time
or another, you will need to deliver high-impact or concise text messages on the computer screen in
as condensed a form as possible. From a design perspective, your choice of font size and the number
of headlines you place on a particular screen must be related both to the complexity of your message
and to its venue.
If your messages are part of an interactive project or web site where you know the user is
seeking information, you can pack a great deal of text information onto the screen before it becomes
overwhelmingly busy. Seekers want dense material, and while they travel along your navigational
pathways, they will scroll through relevant text and study the details. Here is where you must strike a
balance, however. Too little text on a screen requires annoying page turns and unnecessary mouse
clicks and waits; too much text can make the screen seem overcrowded and unpleasant.
On the other hand, if you are creating presentation slides for public-speaking support, the text
will be keyed to a live presentation where the text accents the main message. In this case, use
bulleted points in large fonts and few words with lots of white space. Let the audience focus on the
speaker at the podium, rather than spend its time reading fine points and subpoints projected on a
screen.

5
TIP A lengthy text document read by a web browser may scroll for hundreds of lines without annoying the
user because it’s expected. As a rule of thumb, however, try to make your web pages no longer than one-and-
a-half to two screenfuls of text. On a 1024 × 768–pixel monitor, for example, you have about 600 pixels in height
to work with before scrolling is necessary while viewing web content in a browser. Limit the width of your lines
by using columns—reading a line of text across an entire 21-inch monitor screen is cumbersome, if not
uncomfortable, For printing text documents, provide a separate link to a complete document in either plain text
(.txt), rich text format (.rtf), word processor format (.doc, .odt, or .wpd), or Adobe PDF format (.pdf) instead of
relying on a browser’s print facilities. It is often more convenient to print and read a document than to scroll
through many pages of text on a monitor.

2.3.2 Choosing Text Fonts

Picking the fonts to use in your multimedia presentation may be somewhat difficult from a
design standpoint. Here again, you must be a poet, an advertising psychologist, and also a graphic
designer. Try to intuit the potential reaction of the user to what is on the screen. Here are a few
design suggestions that may help:
■ For small type, use the most legible font available. Decorative fonts
that cannot be read are useless, as shown at right.
■ Use as few different faces as possible in the same work, but vary
the weight and size of your typeface using italic and bold styles where
they look good. Using too many fonts on the same page is called
ransom-note typography.
■ In text blocks, adjust the leading for the most pleasing line spacing.
Lines too tightly packed are difficult to read.
■ Vary the size of a font in proportion to the importance of the
message you are delivering.
■ In large-size headlines, adjust the spacing between letters
(kerning) so that the spacing feels right. Big gaps between large
letters can turn your title into a toothless waif. You may need to kern by hand, using a
bitmapped version of your text.
■ To make your type stand out or be more legible, explore the effects of different colors and of
placing the text on various backgrounds. Try reverse type for a stark, white-on-black message.
■ Use anti-aliased text where you want a gentle and blended look for titles and headlines. This can
give a more professional appearance. Anti-aliasing blends the colors
along the edges of the letters (called dithering) to create a soft
transition between the letter and its
background.

■ T ry drop caps (like the T to the left) and initial caps to accent
your words. Most word processors and text editors will let you create
drop caps and small caps in your text. Adobe and others make initial
caps (such as the one shown to the right from Adobe, called Gothic).
The letters are actually carefully drawn artwork and are available in
special libraries as encapsulated PostScript files (EPSF).
■Coding an initial cap for a web page is simple. Use CSS attributes:
p:first-letter { font-size: 200%; }
p:first-line { line-height: 100%; }
■ If you are using centered type in a text block, keep the number of lines and their width to a
minimum.
■ For attention-grabbing results with single words or short phrases, try graphically altering and
distorting your text and delivering the result as an image. Wrap your word onto a sphere, bend it into
a wave, or splash it with rainbow colors.
■ Experiment with drop shadows. Place a copy of the word on top of the original, and offset the
original up and over a few pixels. Then color the original gray (or any other color). The word may
become more legible and provide much greater impact. With web sites, shadowed text and

6
graphics on a plain white background add depth to a page. Surround
headlines with plenty of white space. White space is a designer’s term
for roomy blank areas, while programmers call the invisible character
made by a space (ASCII 32) or a tab (ASCII 9) white space. Web
designers use a nonbreaking space entity ( ) to force spaces into
lines of text in HTML documents.
■ Pick the fonts that seem right to you for getting your message across,
then double-check your choice against other opinions. Learn to accept
criticism.
■ Use meaningful words or phrases for links and menu items.
■ Text links on web pages can accent your message: they normally stand out by color and
underlining. Use link colors consistently throughout a site, and avoid iridescent green on red or purple
on puce.
■ Bold or emphasize text to highlight ideas or concepts, but do not make text look like a link or a
button when it is not.
■ On a web page, put vital text elements and menus in the top 320 pixels. Studies of surfer habits
have discovered that only 10 to 15 percent of surfers ever scroll any page.
NOTE Characters identified in a particular font
(say, Garamond 10-point) do not always look the same
on a Macintosh as they do on Windows display monitors.
Typically, what is called 12-point on a Macintosh will be a
10- or 9-point size in Windows. And the actual shape of
the characters may be different (see Figure 2-2). Take
care to visually test the flow of your text on all platforms.

Installed Fonts Before you can use a font, it

must be recognized by the computer’s operating
system. If you want to use fonts other than those
installed with your basic operating system, you will
need to install them. When you install applications,
fonts are often added to your collection.
Philip Shaw at www.codestyle.org maintains a useful list of the most commonly installed fonts
for both Mac and Windows, shown in Figure 2-3. The most commonly reported fonts available on
Windows computers are Tahoma, Microsoft Sans Serif, Verdana, and Courier New. On Macs expect

Helvetica, Lucida Grande, and Courier.

Use of Cascading Style Sheets (CSS), preferred over the deprecated HTML <font> tag, allows you to be quite
precise about font faces, sizes, and other attributes (see Table 2-1).

7
8
WARNING Although in HTML and using CSS you can specify a base font size, color, and other attributes
for displaying text on a web page, you still have no guarantee that the font is installed in the user’s system. If
it is missing, a browser will attempt to substitute a similar font, but the look is not guaranteed to be the same
as the one you have designed. In the font-family property you should add a generic catch-all such as “serif” or
“sans serif” to cover an instance when your specified fonts are unavailable. If the right look is important to you,
provide a way to download the font to the end user’s computer. If the look is crucial, use a bitmap image of
the text drawn in the selected font.

In a font-family list, you can include the names of both Windows and Macintosh fonts; if a font
is not found on the local computer, the browser’s preference-specified default font will be used.
h1 {font-family: Helvetica, Arial, Verdana, sans-serif;}
To address copyright and cross-platform font issues, Microsoft hired type designer Matthew
Carter of Carter & Cone Type, Inc. (http://new.myfonts.com/foundry/Carter_and_Cone_Type_Inc./) to
design a serif font and a sans serif font that display well on a computer monitor. The two fonts
Carter designed are Georgia (the serif font) and Verdana (the sans serif font), both of which Microsoft
makes available for free. Since they are freely available and designed specifically for screen display,
many designers recommend them as a “first choice” when specifying font faces for web pages.

Animating Text There are plenty of ways to retain a viewer’s

attention when displaying text. For example, you can animate bulleted text
and have it “fly” onto the screen. You can “grow” a headline a character at
a time. For public speakers, simply highlighting the important text works well
as a pointing device. When there are several points to be made, you can
stack keywords and flash them past the viewer in a timed automated
sequence (as in the roadside Burma Shave ads—signs placed every half
mile or so along the highway, each offering the motorist just a few more
words toward a complete slogan). You might fly in some keywords, dissolve
others, rotate or spin others, and so forth, until you have a dynamic bulleted
list of words that is interesting to watch. But be careful—don’t overdo the
special effects, or they will become boring. For simple presentations,
PowerPoint (see the custom Animation Palette at left) has bells and whistles
to reveal a line of text one word or one letter at a time, or to animate an
entire line.

2.3.3 Symbols and Icons

Symbols are concentrated text in the form of stand-alone graphic constructs.

Symbols convey meaningful messages. The trash can symbol, for instance,
tells you where to throw away old files; the hourglass cursor tells you to wait while the computer is
processing. Though you may think of symbols as belonging strictly to the realm of graphic art, in
multimedia you should treat them as text—or visual words—because they carry meaning. Symbols
such as the familiar trash can and hourglass are more properly called icons: these are symbolic
representations of objects and processes common to the graphical user interfaces of many computer
operating systems.
9
 Certainly text is more efficient than imagery and pictures for delivering a precise message to
users. On the other hand, pictures, icons, moving images, and sounds are more easily recalled and
remembered by viewers. With multimedia, you have the power to blend both text and icons (as well
as colors, sounds, images, and motion video) to enhance the overall impact and value of your
message.
Word meanings are shared by millions of people, but the special symbols you design for a
multimedia project are not; these symbols must be learned before they can be useful message
carriers. Some symbols are more widely used and understood than others, but readers of even these
common symbols had to grow accustomed to their meanings. Learning a system of symbols can be
as difficult as lessons in any foreign language.
WARNING Do not be seduced into creating your own language of symbols and icons.

Here are some symbols you may already know:

And here are some astronomer’s symbols from the days of Kepler and Galileo that you may not have
learned. Still in heavy use by astrologers, they represent the 12 constellations of the zodiac:

But why are there 13 icons in the preceding illustration? Or did you notice? Find the sign for
the planet Venus among the constellations. Not easy if you are unfamiliar with the meaning of these
symbols.

When early computers began to display bitmaps as well as lines of text, there was a flurry of
creative attempts by graphic artists to create interesting navigational symbols to alleviate the need for
text. The screens were pure graphic art and power—all lines and angles and stunning shadows. But
many users were frustrated because they could not get to the data right away and had to first wade
through help and guidance material to learn the symbols. In this context it is clearly safer, from a
product design point of view, to combine symbols with text cues. This ensures the graphic impact of
the symbols but allows prompting the user on their meaning. The Macintosh trash can icon,
incidentally, also has a text label, “Trash,” just
in case people don’t get the idea from the
symbol. Indeed, long arguments occur among
designers dealing with clarity of meaning and
ambiguity: the Macintosh trash can is used to
obliterate files but is also used to eject discs
and mounted volumes, which are not “trashed”
when ejected.

Nonetheless, a few symbols have

emerged in the interactive multimedia world as
an accepted lexicon of navigation cues that do
not need text. These symbols are by no
means universal, but Figure 2-4 shows some
that have roots from the days of
teletypewriters, others from early computer
software and hardware development, and yet
others from the consumer electronics world.
Even for these “common symbols,” text labels
are often added to the graphic icons to avoid uncertainty. Microsoft’s Word and Adobe’s Acrobat, for
example, use an icon representing a 3.5" diskette to indicate “Save to Disk.” While this storage
medium has been relegated to museums, the iconic meaning persists.

10
 2.3.4 Menus for Navigation

An interactive multimedia project or web site typically consists of a body of information, or

content, through which a user navigates by pressing a key, clicking a mouse, or pressing a touch
screen. The simplest menus consist of text lists of topics. Users choose a topic, click it, and go there.
As multimedia and graphical user interfaces become pervasive in the computer community, certain
intuitive actions are being widely learned.
For example, if there are three words on a computer screen, the typical response from the
user, without prompting, is to click one of these words to evoke activity. Sometimes menu items are
surrounded by boxes or made to look like push buttons. Or, to conserve space, text such as Throw
Tomatoes, Play Video, and Press to Quit is often shortened to Tomatoes, Video, and Quit. Regardless,
the user deduces the function.
Text is helpful to users to provide persistent cues about their location within the body of
content. When users must click up and down through many layers of menus to reach their goal, they
may not get lost, but they may feel transported to the winding and narrow streets of a medieval city
where only the locals know the way. This is especially true if the user moves slowly from screen to
screen en route to that goal. If Throw Tomatoes leads to Red or Green, then to California or
Massachusetts, then to President or Vice President, then to Forehead or Chest, then to Arrested or
Got Away, and so on, the user can end up tangled in the branches of a navigation tree without cues
or a map. However, if an interactive textual or symbolic list of the branches taken (all the way from
the beginning) is continuously displayed, the user can at any time skip intervening steps in a nonlinear
manner or easily return to one of the previous locations in the list.
Tomatoes
Red
Massachusetts
President
Chest
Arrested
The more locations included in the menu list, the more options available for navigation. On the Web,
designers typically place on every page at least a Main Menu of links that offers the user a handhold
and mechanism for returning to the beginning. Often, they will also place a list, such as

Home > Store > Home & Garden > Patio & Grilling > Gas Grills & Accessories > Gas Grills > Burners

along the tops of storefronts to let shoppers know where they are currently located within the store.
Inventive interface developers first referred to this array of menu items as “breadcrumbs,” for they
represent a map of the virtual forest and often the “trail” users have taken, like the edible markers
so intelligently placed by Hänsel und Gretel along the way to the witch’s house in the Brother
Grimms’ famous fairytale.
TIP Avoid using more than a few levels of GO BACKs or RETURNs if you do not provide a map. Too much
tunneling in and out with repetitive mouse clicks will frustrate users and discourage exploration. Display a
perpetual menu of interactive text or symbolic cues so users can always extricate themselves from any place in
the tunnel. In a web browser, this can be handled by a Back or Previous button containing a history of pages
visited.

2.3.5 Buttons for Interaction

In most modern cultures a doorbell is recognized by its context (next to the door itself, possibly
lit); but if you grew up in a high-rise apartment, you may have seen 50 or more buttons at the
entrance. Unless you knew that yours was the third from the top on the left, you could find your
button only by reading the printed or scrawled name beside it. And certainly, your Aunt Barbara
needed this text cue to avoid having to push the Help button, which in this case rang in the building
superintendent’s apartment.

11
 In multimedia, buttons are the objects, such as blocks of
text, a pretty blue triangle, or a photograph, that make things
happen when they are clicked. They were invented for the sole
purpose of being pushed or prodded with cursor, mouse, key, or
finger—and to manifest properties such as highlighting or other
visual or sound effects to indicate that you hit the target. On the
Web, text and graphic art may be buttons. For now, remember that
the rules for proper selection of text and fonts in your projects
apply to buttons as well as headlines, bulleted items, and blocks of
text.
The automatic button-making tools supplied with multimedia
and HTML page authoring systems are useful, but in creating the
text for you, they offer little opportunity to fine-tune the look of the
text. Character-and word-wrap, highlighting, and inverting are
automatically applied to your buttons, as needed, by the authoring
system. These default buttons and styles may seem overused or
trite, but by using common button styles, shapes, borders, and
highlights, you increase the probability that users will know what to
do with them—especially when they are also labeled.
Pick a font for buttons that is, above all, legible; then adjust
the text size of the labels to provide adequate space between the
button’s rim and the text. You can choose from many styles of
buttons and several standard methodologies for highlighting. You will
want to experiment to get the right combinations of font, spacing,
and colors for just the right look.
In most authoring platforms, it is easy to make your own buttons from bitmaps or drawn
objects. In a message-passing authoring system, where you can script activity when the mouse button
is up or down over an object, you can quickly replace one bitmap with another highlighted or colored
version of the bitmap to show that the button has been “pushed” or that the mouse is hovering over
it. Making your own buttons from bitmaps or drawn objects gives you greater design power and
creative freedom and also ensures against the missing font problem. On the other hand, this custom
work may require a good deal more time. You can also implement these graphic image rollovers on
web pages, using JavaScript to replace the image when there is a MouseOver or hover event; when
a MouseUp event occurs on the image, the user can be directed to another page. Typically the
destination address (URL) is displayed in the status bar of the browser when the mouse is over a
linked image or text element. So users know first if the mouse is over an active button and second,
where that button will take them if they click.
Whether default or custom, treat the design and labeling of your buttons as an industrial art
project: buttons are the part of your project the user touches.

2.3.6 Fields for Reading

You are already working uphill when you design text to be read on the screen. Experiments have
shown that reading text on a computer screen is slower and more difficult than reading the same text
in hard-copy or book form. Indeed, many users, it seems, would rather print out their reports and e-
mail messages and read them on paper than page through screens of text. Reading hard copy is still
more comfortable.
WARNING Research has shown that when people read text on a computer screen, they blink only 3 to 5
times per minute, but they blink 20 to 25 times per minute when reading text on paper. This reduced eye
movement may cause dryness, fatigue, and possibly damage to the eyes. Research also suggests that monitors
should be placed lower than eye level.

Unless the very purpose of your multimedia project or web site is to display large blocks of text, try to
present to the user only a few paragraphs of text per page. Use a font that is easy to read rather
than a prettier font that is illegible. Try to display whole paragraphs on the screen, and avoid breaks
where users must go back and forth between pages to read an entire paragraph.

12
 2.3.6.1 Portrait vs. Landscape
Traditional hard-copy and printed documents in the taller-than-wide orientation are simply not
readable on a typical monitor with a wider-than- tall aspect ratio. The taller-than-wide orientation used
for printed documents is called portrait; this is the 8.5-by-11-inch size unique to the United States or
the internationally designated standard A4 size, 8.27 by 11.69 inches. The wider-than-tall orientation
normal to monitors is called landscape. Shrinking an 11-inch-tall portrait page of text into your
available monitor height usually yields illegible chicken tracks. There are four possible solutions if you
are working with a block of text that is taller than what will fit:
■Put the text into a scrolling field. This is the solution used by web browsers.
■ Put the text into a single field or graphic image in a project window, and let the user move the
whole window up or down upon command. This is most appropriate when you need to present text
with page breaks and formatting identical to the printed document. This is used by Adobe’s popular
Acrobat Reader for displaying PDF files.
■ Break the text into fields that fit on monitor-sized pages, and design control buttons to flip through
these pages.
■ Design your multimedia project for a special monitor that is taller than it is wide (portrait) or a
normal monitor rotated onto its side. Dedicated “page view” monitors are expensive; they are used for
commercial print-based typesetting and layout. Video controllers can rotate the text display for you:

2.3.6.2 eBooks, E-Readers, and Tablet

Computers
eBooks are books digitized and formatted to be
read using an eReader. eReaders display text,
graphics, and multimedia— most using E Ink screens
between five and ten inches diagonal, some with touch
screens, some with wi-fi and 3G connectivity, and all
with varying and sometimes non-standard input formats
(see Table 2-2). Among eBook devices are the Apple
iPad, Arrow, Astak EZ Reader, Barnes & Noble Nook,
BeBook Neo, COOL-ER, Cybook, Foxit eSlick, iLiad,
iRex Digital Reader, Jetbook, Kindle, and the Sony
Reader.

13
 The e-Ink screen is a technology for “electronic
paper,” designed to imitate the appearance of ordinary ink
on paper (see sidebar). e-Ink displays can be used in direct
sunlight and boast a long battery life. But e-Ink is not
required to read eBooks, which can be viewed on most
computers and many Personal Digital Assistants (PDAs) and
mobile phones using format converting/reading software
such as Adobe Digital Editions.

2.3.7 Fields for Reading

The standard document format used for displaying

text pages on the Web is called Hypertext Markup
Language (HTML). In an HTML document you can specify
typefaces, sizes, colors, and other properties by “marking
up” the text in the document with tags. The process of
marking up documents or “styling” them is simple: Where
you want text to be bold, surround it with the tags <B> and
</B> or <STRONG> and </STRONG>; the text between the
tags will then be displayed by your browser application in
bold type. Where you have a header, surround it with <H1>
and </H1>; for an ordered list of things (1, 2, 3, … or a, b,
c, …, etc.), surround your list with <OL> and </OL>. There
are many tags you can use to lay out a page. Cascading
Style Sheets (CSS) work in conjunction with HTML and
provide fine tuning and control of text and layout.
The remarkable growth of the Web is straining the
“old” designs for displaying text on computers. Indeed, while
marked-up text files (HTML documents) remain at the
foundation of Web activity, when you visit a well-designed
web site, you often discover graphic images, animations,
and interactive work-arounds contrived to avoid displaying
text. The neat paragraphs, indented lists, and formats for
text documents for which HTML was originally intended are
evolving into multimedia documents, not text documents,
and the original HTML method and standard is
consequently
suffering great stress.
HTML Version 5 is a redesign that stretches into a
multimedia delivery tool, making HTML no longer just a text
display tool with assorted attachments and plugged-in
objects. A new <canvas> element allows a box to be
defined on a web page in which 2-D graphics can be
drawn under program control. Video and audio (timed
media) playback is supported.
Still, HTML doesn’t provide you with much flexibility to make
pretty text elements, which are often done as graphical
bitmaps placed within the HTML document’s layout with
image tags, <IMG>, or incorporated into Flash animation
files. Indeed, using plain HTML, you do not know what font
a reader will use to view your document—the default display
font is a preference that can be set in the viewer’s browser, which knows it’s installed on that
viewer’s machine. So some viewers may read your words in serif Times Roman, others in sans serif
Helvetica or Arial.

14
2.4 Computers and Text

Very early in the development of the Macintosh computer’s monitor hardware, Apple chose to use a
resolution of 72 pixels per inch. This matches the standard measurement of the printing industry (72 points
per inch) and allows desktop publishers and designers to see on the monitor what their printed output will
look like (WYSIWYG). In addition, Apple made each pixel square-shaped, providing even measurements in
all directions. Until the Macintosh was invented, and the VGA video standard set for the PC (at 96 pixels per
inch), pixels were typically taller than they were wide. The aspect ratio for a pixel on older EGA monitors,
for example, is 1.33:1, taller than it is wide. VGA and SVGA monitor resolutions for both Macintosh and
Windows display pixels at an aspect ratio of 1:1 (square).

2.4.1 The Font Wars are Over

In 1985, the desktop publishing revolution was spearheaded by Apple and the Macintosh
computer, in combination with word processing and page layout software products that enabled a
high-resolution 300 dpi laser printer using special software to “draw” the shapes of characters as a
cluster of square pixels computed from the geometry of the character. This special software was the
Adobe PostScript page description and outline font language. It was licensed by Apple and included
in the firmware of Apple’s LaserWriter laser printer.
PostScript is really a method of describing an image in terms of mathematical constructs
(Bézier curves), so it is used not only to describe the individual characters of a font but also to
describe entire illustrations and whole pages of text. Because each PostScript character is a
mathematical formula, it can be easily scaled bigger or smaller so it looks right whether drawn at 24
points or 96 points, whether the printer is a 300 dpi Laser- Writer or a high-resolution 1200, 2400, or
even 3600 dpi image setter suitable for the finest print jobs. And the PostScript characters can be
drawn much faster than in the old-fashioned way. Before PostScript, the printing software looked up
the character’s shape in a bitmap table containing a representation of the pixels of every character
in every size. PostScript quickly became the de facto industry font and printing standard for desktop
publishing and played a significant role in the early success of Apple’s Macintosh computer.
There are two kinds of PostScript fonts: Type 3 and Type 1. Type3 font technology is older
than Type 1 and was developed for output to printers; it is rarely used by multimedia developers.
There are currently over6,000 different Type 1 typefaces available. Type 1 fonts also contain hints,
which are special instructions for grid-fitting to help improve resolution. Hints can apply to a font in
general or to specific characters at a particular resolution.
Other companies followed Adobe into the desktop publishing arena with their own proprietary
and competitive systems for scalable outline fonts. In 1989, Apple and Microsoft announced a joint
effort to develop a “better and faster” quadratic curves outline font methodology, called TrueType.
In addition to printing smooth characters on printers, True-Type would draw characters to a low-
resolution (72 dpi or 96 dpi) monitor. Furthermore, Apple and Microsoft would no longer need to
license the PostScript technology from Adobe for their operating systems. Because TrueType was
based on Apple technology, it was licensed to Microsoft. Adobe and Microsoft then developed a new
and improved font management system incorporating the best features of both PostScript and
TrueType, and by 2007, OpenType became a free, publicly available international standard. The font
wars were over.
WARNING TrueType, OpenType, and PostScript fonts do not display (or print) exactly the same, even
though they may share the same name and size. The three technologies use different formulas. This means that
word-wrapping in a text field may change. So if you build a field or a button that precisely fits text displayed
with a PostScript font, be aware that if you then display it with the same font in TrueType or OpenType, the
text may be truncated or wrapped, wrecking your layout.

2.4.1.1 Font Foundries

Today collections of fonts are available through retail channels or directly from their
manufacturers. Typefaces are created in a foundry, a term much like case, that has carried over from
times when lead was poured into molds to make letter faces. There is also a special interest group
(SIG) at America Online (go to Computing: Software Libraries: Desktop & Web Publishing Forum: Fonts)

15
where people who enjoy designing and making interesting fonts post them for others to download—
hundreds and hundreds of them with names like Evil of Frankenstein, CocaCola, Kerouac, LED,
PonchoVia (sic), Spaghetti, TreeFrog, and Sassy. When you purchase some applications, such as
CorelDraw or Adobe Illustrator, many extra fonts are included for free.

2.4.2 Character Sets and Alphabets

Knowing that there is a wide selection of characters available to you on our computer and
understanding how you can create and use special and custom-made characters will broaden your
creative range when you design and build multimedia projects.

2.4.2.1 The ASCII Character Set

The American Standard Code for Information Interchange (ASCII) is the 7-bit character coding
system most commonly used by computer systems in the United States and abroad. ASCII assigns a
number or value to 128 characters, including both lower- and uppercase letters, punctuation marks,
Arabic numbers, and math symbols. Also included are 32 control characters used for device control
messages, such as carriage return, line feed, tab, and form feed.
ASCII code numbers always represent a letter or symbol of the English alphabet, so that a
computer or printer can work with the number that represents the letter, regardless of what the letter
might actually look like on the screen or printout. To a computer working with the ASCII character set,
the number 65, for example, always represents an uppercase letter A. Later, when displayed on a
monitor or printed, the number is turned into the letter.
ASCII was invented and standardized for analog teletype communication early in the age of
bits and bytes. The capabilities of the technology have now moved far beyond the original intent of
the standard, but because millions of installed computers and printers use ASCII, it is difficult to set
any new standards for text without the expense and effort of replacing existing hardware. At least,
for these 128 characters, most computers and printers share the same values.

2.4.2.2 The Extended Character Set

A byte, which consists of eight bits, is the most commonly used building block for computer
processing. ASCII uses only seven bits to code its 128 characters; the eighth bit of the byte is unused.
This extra bit allows another 128 characters to be encoded before the byte is used up, and computer
systems today use these extra 128 values for an extended character set. The extended character set
is 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. This fuller set of 255 characters is also known as the ISOLatin- 1 character set; it is
used when programming the text of HTML
web pages.
NOTE The rules for encoding extended characters are not standardized. Thus ASCII value 165, for example, may
be a bullet (•) character on the Macintosh or the character for Japanese yen (¥) in Windows (ANSI).

2.4.2.3 Unicode

As the computer market has become more international, one of the

resulting problems has been handling the various international language
alphabets. It was at best difficult, and at times impossible, to translate the text
portions of programs from one script to another. For example, the differences
between the Latin script (also known as “Roman”) used by western European
writers and the kanji script used by Japanese writers made it particularly
challenging to transfer innovative programs from one market to another.
Since 1989, a concerted effort on the part of linguists, engineers, and
information professionals from many well-known computer companies has been focused on a 16-bit
architecture for multilingual text and character encoding. Called Unicode, the original standard

16
accommodated up to about 65,000 characters to include the characters from all known languages and
alphabets in the world.

2.5 Font Editing and Design Tools

Special font editing tools can be used to make your own type, so you can communicate an
idea or graphic feeling exactly. With these tools, professional typographers create distinct text and
display faces. Graphic designers, publishers, and ad agencies can design instant variations of existing
typefaces.
Typeface designs fall into the category of industrial design and have been determined by the
courts in some cases to be protected by patent. For example, design patents have been issued for
Bigelow & Holmes’ Lucida, ITC Stone, and Adobe’s Minion.

2.5.1 Fontlab

Fontlab, Ltd., located at www.fontlab.com, specializes in font editors for both Macintosh and Windows
platforms. You can use this software to develop PostScript, TrueType, and OpenType fonts for Macintosh,
Windows, and Sun workstations. Designers can also modify existing typefaces, incorporate PostScript
artwork, automatically trace scanned images, and create designs from scratch. A sample of the
Fontographer screen is shown in Figure 2-3.

Figure 2-3 Fontographer is a powerful font

editor for Macintosh and Windows.

Fontographer’s features include a freehand drawing tool to create professional and precise inline and
outline drawings of calligraphic and script characters, using either the mouse or alternative input
methods (such as a pressure-sensitive pen system). Fontographer allows the creation of multiple font
designs from two existing typefaces, and you can design lighter or heavier fonts by modifying the
weight of an entire typeface.

2.5.2 Making Pretty Text

To make your text look pretty, you need a toolbox full of fonts and special graphics
applications that can stretch, shade, shadow, color, and anti-alias your words into real artwork. Pretty
text is typically found in bitmapped drawings where characters have been tweaked, manipulated, and
blended into a graphic image. Simply choosing the font is the first step. Most designers find it easier
to make pretty type starting with ready-made fonts, but some will create their own custom fonts using
font editing and design tools.
With the proper tools and a creative mind, you can create endless variations on plain-old
type, and you not only choose but also customize the styles that will fit with your design needs.
Most image-editing and painting applications let you make text using the fonts available in your
system. You can colorize the text, stretch, squeeze, and rotate it, and you can filter it through various
plug-ins to generate wild graphic results.
17
 As a multimedia developer, you may only need to be concerned about how your fonts look
on monitors, not how they are printed to paper— unless, of course, you are printing perfect proposals,
bids, storyboards, reports, and above all, invoices J. TrueType, OpenType, and PostScript
outline fonts allow text to be drawn at any size on your computer screen without jaggies:
Jaggies are avoided by anti-aliasing the edges of the text characters, making them seem
smoother to the eye. Pasting an image that was anti-aliased against a light background onto a
darker-colored background using transparency (so that the new, dark background is seen, instead of
the old, light one) can be problematic: the blending pixels along the edge will show as a halo and
may have to be edited pixel by pixel.
Macintosh and PCs handle anti-aliasing differently. Authoring programs such as Adobe Flash
allow you to fine-tune anti-aliasing settings for text fields, useful when you want a different look for
text that will be static versus text that will be animated.

2.6 Hypermedia and Hypertext

Multimedia—the combination of text, graphic, and audio elements into a single collection or
presentation—becomes interactive multimedia when you give the user some control over what
information is viewed and when it is viewed. Interactive multimedia becomes hypermedia when its
designer provides a structure of linked elements through which a user can navigate and interact.
When a hypermedia project includes large amounts of text or symbolic content, this content
can be indexed and its elements then linked When words are keyed or indexed to other words, you
have a hypertext system; the “text” part of this term represents the project’s content and meaning,
rather than the graphical presentation of the text. Hypertext is what the World Wide Web is all about.
When text is stored in a computer instead of on printed pages, the computer’s powerful
processing capabilities can be applied to make the text more accessible and meaningful. The text can
then be called hypertext; because the words, sections, and thoughts are linked, the user can navigate
through text in a nonlinear way, quickly and intuitively.
Using hypertext systems, you can electronically search through all the text of a computer-
resident book, locate references to a certain word, and then immediately view the page where the
word was found. Or you can create complicated Boolean searches (using terms such as AND, OR,
NOT, and BOTH) to locate the occurrences of several related words, such as “Elwood,” “Gloria,”
“mortgage,” and “happiness,” in a paragraph or on a page. Whole documents can be linked to other
documents.
A word can be made hot, as can a button, thus leading the user from one reference to
another. Click on the word “Elwood,” and you may find yourself reading a biography or resume; click
on “mortgage,” and a calculator pops up. Some authoring systems incorporate a hypertext facility that
allows you to identify words in a text field using a bold or colored style, then link them to other
words, pages, or activities, such as playing a sound or video clip related to that hot word. You cannot
do this kind of nonlinear and associative navigation in a sequentially organized book. But on a CD-
ROM, where you might have more than 100,000 pages of text to investigate, search, and browse,
hypertext is invaluable.
Because hypertext is the organized cross-linking of words not only to other words but also to
associated images, video clips, sounds, and other exhibits, hypertext often becomes simply an
additional feature within an overall multimedia design. The term “hyper” (from the Greek word “over”
[υπερ]) has come to imply that user interaction is a critical part of the design, whether for text
browsing or for the multimedia project as a whole. When interaction and cross-linking is then added
to multimedia, and the navigation system is nonlinear, multimedia becomes hypermedia.

2.6.1 Using Hypertext

Special programs for information management and hypertext have been designed to present
electronic text, images, and other elements in a database fashion. Commercial systems have been
used for large and complicated mixtures of text and images—for example, a detailed repair manual
for a Boeing 747 aircraft, a parts catalog for Pratt & Whitney jet turbine engines, an instant reference
to hazardous chemicals, and electronic reference libraries used in legal and library environments. Such
searchable database engines are widely used on the Web, where software robots visit millions of web
pages and index entire web sites. Hypertext databases rely upon proprietary indexing systems that
18
carefully scan the entire body of text and create very fast cross-referencing indexes that point to the
location of specific words, documents, and images. Indeed, a hypertext index by itself can be as large
as 50 percent to 100 percent the size of the original document. Indexes are essential for speedy
performance. Google’s search engine produces about 1,220,000,000 hits in less than a quarter of a
second!
Commercial hypertext systems were developed historically to retrofit gigantic bodies of
information. Licenses for use and distribution of these commercial systems are expensive, and the
hypertext-based projects typically require the large mass-storage capability of one or many CD-ROMs
and/or dedicated gigabyte hard disks. Simpler but effective hypertext indexing tools are available for
both Macintosh and Windows, and they offer fairly elaborate features designed to work in concert
with many multimedia authoring systems. Server-based hypertext and database engines designed for
the Web are now widely available and competitively priced.

2.6.2 Searching for Words

Although the designer of a hypermedia database makes assumptions, he or she also presents
users with tools and a meaningful interface to exercise the assumptions. Employing this interface,
users can tailor word searches to find very specific combinations. Following are typical methods for
word searching in hypermedia systems:
■Categories Selecting or limiting the documents, pages, or fields of text within which to search for a
word or words.
■ Word relationships Searching for words according to their general proximity and order. For example,
you might search for “party” and “beer” only when they occur on the same page or in the same
paragraph.
■Adjacency Searching for words occurring next to one another, usually in phrases and proper names.
For instance, find “widow” only when “black” is the preceding adjacent word.
■ Alternates Applying an OR criterion to search for two or more words, such as “bacon” or “eggs.”
■ Association Applying an AND criterion to search for two or more words, such as “skiff,” “tender,”
“dinghy,” and “rowboat.”
■ Negation Applying a NOT criterion to search exclusively for references to a word that are not
associated with the word. For example, find all occurrences of “paste” when “library” is not present in
the same sentence.
■ Truncation Searching for a word with any of its possible suffixes. or example, to find all occurrences
of “girl” and “girls,” you may need to specify something like girl#. Multiple character suffixes can be
managed with another specifier, so geo* might yield “geo,” “geology,” and “geometry,” as well as
“George.”
■ Intermediate words Searching for words that occur between what might normally be adjacent
words, such as a middle name or initial in a proper name.
■ Frequency Searching for words based on how often they appear: the more times a term is
mentioned in a document, the more relevant the document is to this term.

2.6.3 Hypertext Tools

Two functions are common to most hypermedia text management systems, and they are often
provided as separate applications: building (or authoring) and reading. The builder creates the links,
identifies nodes, and generates the all-important index of words. The index methodology and the search
algorithms used to find and group words according to user search criteria are typically proprietary, and
they represent an area where computers are carefully optimized for performance—finding search words
among a list of many tens of thousands of words requires speed-demon programming.
Hypertext systems are currently used for electronic publishing and reference works, technical
documentation, educational courseware, interactive kiosks, electronic catalogs, interactive fiction, and text
and image databases. Today these tools are used extensively with information organized in a linear fashion;
it still may be many years before the majority of multimedia project users become comfortable with fully
nonlinear hypertext and hypermedia systems. When (and perhaps if) they do, the methodology
of human thought and conceptual management—indeed, the way we think—will be forever changed

19
2.7 Graphics Design

Graphic design is the creative planning and execution of visual communication. One learns to
create a combination of shapes and forms, words and images, in order to reproduce them in some
flat medium (two dimensional - paper, cardboard, cloth, plastic, video, computer, or projection screen,
on poster, billboard, or other signage) or in a three-dimensional form (fabricated or manufactured) in
order to convey information to a targeted audience. All graphic design has a purpose or function.
Usually its purpose is commercial to explain aesthetically something -- to express, inform, and
influence the thoughts and actions of its audience.

This subject introduces the student to art intended to communicate information and advertising.
The focus is on studying and using layout and design concepts used in the graphic design field. The
students will employ both analog media (drawing with pencil and paper, etc.) and digital media --
using up-to-date computer tools (graphics hardware and software - for drawing, painting, layout,
typography, scanning, and photography).

2.7.1 History

Hundreds of graphic designs of animals by the primitive people in the Chauvet Cave, in the
south of France, which were drawn more than 30,000 BC, as well as similar designs in the Lascaux
cave of France that were drawn more than 14,000 BC, or the designs of the primitive hunters in the
Bhimbetka rock shelters in India that were drawn more than 7,000 BC, and the Aboriginal Rock Art,
in the Kakadu National Park of Australia, and many other rock or cave paintings in other parts of the
world show that graphics have a very long history which is shared among humanity. This history
together with the history of writing which was emerged in 3000-4000 BC are at the foundation of the
Graphic Art.

Examples:
Rock and Cave Art Writings Used in Books Maps

2.7.2 Graphics and Design

Graphics from Greek γραφικός graphikos) are visual presentations on some surface, such as
a wall, canvas, screen, paper, or stone to brand, inform, illustrate, or entertain. Graphics word is
derived from the word graph. A graph has x and y axis. Same way something which is created in
digital word is seen on a digital screen, this screen also has x and y axis. So the output on any
digital device is termed as graphics. In other words an image that is generated by a computer called
graphics. The pictorial representation and manipulation of data, as used in computer-aided design and
manufacture, in typesetting and the graphic arts, and in educational and recreational programs.

Examples are photographs, drawings, Line Art, graphs, diagrams, typography, numbers,
symbols, geometric designs, maps, engineering drawings, or other images. Graphics often combine
text, illustration, and color. Graphic design may consist of the deliberate selection, creation, or
arrangement of typography alone, as in a brochure, flier, poster, web site, or book without any other
element. Clarity or effective communication may be the objective, association with other cultural
elements may be sought, or merely, the creation of a distinctive style.
20
Design is the creation of a plan or convention for the construction of an object or a system (as in
architectural blueprints, engineering drawing, business process, circuit diagrams and sewing patterns).

2.7.3 What is Graphics Designing

Graphic design is a creative process—most often involving a client and a designer and usually
completed in conjunction with producers of form (i.e., printers, sign makers, etc.)—undertaken in order
to convey a specific message (or messages) to a targeted audience. The term "graphic design" can
also refer to a number of artistic and professional disciplines that focus on visual communication and
presentation. The field as a whole is also often referred to as Visual Communication or Communication
Design. Various methods are used to create and combine words, symbols, and images to create a
visual representation of ideas and messages. A graphic designer may use a combination of
typography, visual arts and page layout techniques to produce the final result. Graphic design often
refers to both the process (designing) by which the communication is created and the products
(designs) which are generated.

Common uses of graphic design include identity (logos and branding), publications (magazines,
newspapers, and books), advertisements and product packaging. For example, a product package
might include a logo or other artwork, organized text and pure design elements such as shapes and
color which unify the piece. Composition is one of the most important features of graphic design,
especially when using pre-existing materials or diverse elements.

Graphic designer is a professional within the graphic

design and graphic arts industry who assembles together images,
typography or motion graphics to create a piece of design. A
graphic designer creates the graphics primarily for published,
printed or electronic media, such as brochures (sometimes) and
advertising. They are also sometimes responsible for typesetting,
illustration, user interfaces, web design, or take a teaching
position. A core responsibility of the designer's job is to present
information in a way that is both accessible and memorable.
Photo manipulation is the application of
image editing techniques to photographs in order to
create an illusion or deception (in contrast to mere
enhancement or correction), through analog or
digital means

21
 2.7.4 10 Tips on being a Graphic Designer
1. Always take the road less travelled, sometimes take the road with the most obstacles and learn
from overcoming them.
2. Never think what a solution SHOULD be, but what it COULD be.
3. Never let technology/craft be a hindrance of going with a good idea, figure it out!
4. See things from another angle; see it from far away, up really close, from underneath or on top,
pull it apart and put it back together in a different way.
5. Do good with what you have available. There is beauty in everything, you might just have to look a
little harder to find it!
6. Perfection is sometimes the imperfect.
7. If something is good enough, is it really good?
8. Breathe! Timeout!
9. See mistakes as detours rather than mistakes.
10. Helvetica is hardly ever the answer, merely a placeholder.

2.7.5 Tips in Graphics Design

1. Take a deep breath. Especially if you have a key presentation looming that needs charts, graphs,
and visuals and all you have are loose papers and a migraine, first take a deep breath. Put on a
fresh pot of coffee. Clear your workspace. Handle those last minute telephone calls. In short, you are
going to need to focus your attention on your design project, so prepare yourself. You're about to
solve your graphic design problem in classic, do-it-yourself fashion.

2. Outline your project. Make a simple list of the presentation graphics you think you'll need. Don't get
into details at this point. For example, you might list: opening-- photo of young couple with product
and company logo; midpoint-- new market pie chart and bar graph of financial growth; close-- photo
of new satisfied customer using product. You just want to create a rough outline that can help steer
you through the project.

3. Define what you're trying to say. To keep your audience visually interested you must keep things
simple and avoid clutter that will confuse your focus.

Communicate one concept at a time with your graphics. Your message can contain various parts, but
your communication as a whole must concentrate on the key concept you want to get across. To
shoot for more is to court disaster. At all costs, avoid making everything important, as that's the
surest way to create visual anarchy. When you attempt to give great importance to more than one
message (or visual item), you introduce confusion and succeed only in dispersing the viewer¹s
attention instead of directing it where you want it.

4. Keep it simple. Visually, simple is better than complex, especially when images will only be seen a
short time. Avoid the complex since it obscures your message rather than clarifies it. Use pictures,
illustrations, graphs, etc. to punch up an important point, and to make complex ideas simple.
However, avoid literally mimicking what's said in the text. The graphics must enhance and play on
variations of the text to make it more interesting - but never stray from the spirit of the message. At
their best, graphics add humor, emotion, reality, believability, and playfulness to help bring about
understanding and agreement in viewers.

Keep text simple and readable, without overdoing emphasis. Use changes of size, style, color, and
position, including bullets, symbols and other devices to highlight and organize your text in moderation.
To avoid distracting the reader, limit the number of fonts to two or three in no more than three or
four readable sizes. Keep the background simple, and use contrast to ensure legibility. Contrast is the
noticeable difference between things, and can be as simple as bolding or underlining text in some
cases. But don't fill every bit of "empty" space, as well-chosen space can serve to "frame" graphic
elements you may want to emphasize.

22
5. Lay out your type, graphics, and photos. Look at how the elements blend together. Lay out the
type, graphics, photos, etc. in rough format similar to how they will be presented. If you know how,
use computer formatting on programs such as MS Word or Excel to experiment with layout. Or you
may want to lay out the physical materials on a desk or conference table. Similarly, you may want to
tape or pin them to a wall or cubicle to see how vertical display affects their visual impact.

Now, here's where a little strategic thinking can set your graphic design work apart from the norm:

Visually group graphics to show similarity and build interest. Try to visually group objects using
similarities of theme, color, direction, position, alignment, etc. Show what goes with what, so your
viewers will draw the proper conclusions. For example, a picture of worn-out old shoes could depict a
potential client's current database management system (DBS), and brand new track cleats could
depict your DBS product. Of course, things that belong together must have characteristics in common,
and must be similar enough to be perceived as a group or set.

Also, make visual order part of your message. For example, decide WHEN the viewer should notice
your logo: Before reading the copy? After reading the headline? Should the viewer note your company
name before or after the product you're selling? These strategic distinctions can boost or detract both
from your credibility and ability to persuade.

6. Add emphasis with a little color and contrast. The graphics of your piece must be easily seen and
attract more attention than anything around it. If not, your audience's attention will go elsewhere: to a
competitor's ad, booth, flyer, banner, etc. To improve the odds of getting your audience's attention,
use color and contrast in moderation to create interest. Remember to use emphasis sparingly, like
spice in cooking, because a little goes a long ways but too much simply overpowers.

That said, attention does gravitate toward the area of greatest contrast. (That's why print is usually
black-on-white, which makes the letters stand out for easier viewing, instead of say, black-on-brown).
For example, in a visual ad or billboard, a single sentence on an otherwise empty page demands
attention. You can't help but read it. Other examples of good, eye-catching contrast: a white spotlight
in a dark theater; a 3-D object jutting out of a flat wall; a moving object among motionless ones (or a
stationary object among moving ones); and a bright, colorful poster over a dull, monochrome
background. Similarly, at a trade show you'd want your signage to run horizontally if you're
competitors' signs run vertically. In each case, your audience is visually attracted toward what stands
out or offers contrast.

Here are a few types of useful contrast to consider using in your graphics: large/small, light/dark,
flat/3-D, high/low, short/long, strong/weak, smooth/course, one/many, full/empty, warm/cool (colors),
before/after, complex/simple, straight/winding, round/angular, continuous/interrupted,
horizontal/vertical/diagonal, etc.

For a series of visuals, use contrasting sequences to build interest as well. Contrasting sequences
such as before/after, young/old, or gradations of color can guide and build the viewer's interest by
suggesting degrees of importance, recognizable patterns, or consequences. When establishing what
the viewer should notice first, second, third, etc., control the order in which he perceives the various
items, using a scale of contrasts from most different to most similar. The greater the contrast, the
more importance a visual item is given.

7. Get a fresh perspective. After focusing on your graphics project, it helps to get a fresh perspective.
Ideally, you should ask someone with art or design experience a few questions. How do these
graphics strike you? Do they support the message? What would you change? The less they know
about your presentation, company, or product the more helpful their opinion, as it will more closely
approximate your audience's reaction. But really, anyone's opinion helps to pinpoint strengths and
weaknesses in your designs, so don't be afraid to ask. And don't be afraid to accept criticism. If no
one is available, take a break from your project if at all possible, so you can approach your graphic
project with fresher, less biased eyes.

23
8. Put on the finishing touches. Then adjust your graphics project according to the objective feedback
you received. Here's where you may brighten or lighten colors, change font sizes, or rearrange
graphics for better overall layout.

Also, round out your pictures and graphics with carefully chosen words. From caption to headline and
story, words are a critical part of the message you're visually communicating, so they must be chosen
and arranged carefully for the whole to work. Include only what's important, so as not to dilute your
carefully crafted message.

Along these lines, speak your viewers' language in a way that addresses their problems and answers
their needs. For example, if your picture shows a healthy Mr. Jones tussling with grandkids after
successful bypass surgery, mention how your new medical product reduced recovery time to three
weeks from the normal three months.

9. Take one last look. No matter how careful you are there's always last minute mistakes to catch:
misspelled words, misaligned margins, or graphics that still need to be rearranged to lessen
distracting "white" or trapped space. Use spell and grammar checkers, then print out sample copies
to test overall visual effect until you're satisfied with the results.

10. Print out and mount your final presentation. Since all your previous work counts for naught if the
final graphic product isn't displayed and mounted properly, it's critical to prevent the wrinkling,
bubbling, warping, and peeling that can sink an otherwise impeccable graphic presentation. To this
end, I have long used and recommended Pres-On products. Well known amongst professional graphic
artists and photographers, Pres-On has a broad line of do-it-yourself, self-stick mounting board
products for just about every application. I've mounted everything from extremely large oversize prints
like architectural renderings and giant logos, to small decorative items, and consistently Pres-On
mounting products makes it very easy to do and gives me professional results.

Their newest mounting product Score & Snap, is made of a thin, surprisingly strong, plastic material
that's coated with self-stick mounting adhesive. It was designed to mount logos, photos, charts, signs
and other graphics quickly and easily, with the capability to correct mistakes, but with subsequent
permanent positioning. Once a graphic is mounted, the protective plastic can be easily scored with an
X-Acto knife, then snapped off into the desired shape. Because of the consistency of the plastic
material, its versatility in positioning graphics, and its clean edges, it makes it easy to produce a
spectacular looking finished product that won't come undone at the worst possible moment.

With a firm grip on your graphics project, you can now look forward to the presentation deadline
without knots in your stomach. Who knows, with the knockout graphics you cranked out, on a
shoestring budget to boot, you could be in line for a promotion. As a parting tip, ask for a raise, as
you've just added polished graphic presentation to your list of job skills. Just keep your Graphic
Design Rescue Tips handy because the next project might not be so easy.

24
 CHAPTER 2 REVIEW

Chapter Summary ■ On the printed page, serif fonts are

traditionally used for body text because the
For your review, here’s a summary of the serifs are said to help guide the reader’s
important concepts discussed in this eye along the line of text. Sans serif fonts,
chapter. on the other hand, are used for headlines
Recognize the importance of word choice and bold statements. But sans serif fonts are
■ With the recent explosion of the Internet far more legible and attractive when used in
and the World Wide Web, text has the small sizes of a text field on a screen.
become more ■ You must strike a balance between too
important than ever. Words and symbols little text on a screen and too much text.
in any form, spoken or written, are the
most common Discuss the presentation of text on Windows
system of communication. It’s important and Macintosh platforms
to design labels for title screens, menus,
and buttons using ■ There will be subtle (and sometimes not-
words that have the most precise and so-subtle) differences in how text looks on
powerful meanings to express what you Windows and Macintosh platforms.
need to say. Experiment
with the words you plan to use by letting Find sources for free and shareware fonts
others try them.
■ Download free fonts and use shareware
Describe the difference between a tools to modify fonts by adding special
typeface and a font and list at least characters and even
three attributes of a font, for example, logos.
upper/lowercase, serif/sans serif,
PostScript/TrueType/OpenType Define hypermedia, hypertext, links, anchors,
and nodes and be able to discuss both the
■ A typeface is a family of graphic potential
characters that usually includes many and limitations of hypertext and hyperlinking
type sizes and styles. systems
■ Serif versus sans serif is the simplest
way to categorize a typeface. ■ Multimedia—the combination of text,
■ A font is a collection of characters of a graphic, and audio elements into a single
single size and style belonging to a collection or presentation—becomes
particular typeface family. interactive multimedia when you give the
■ Three common font styles are bold, user some control over what information is
italic, and underline, but there are several viewed and when it is viewed. Interactive
others; some, such as superscript, multimedia becomes hypermedia when its
emboss, or strikethrough, have specialized designer provides a structure of linked
uses. elements through which a user can navigate
■Type sizes are usually expressed in and interact.
points (about 72 per inch). ■ When a hypermedia project includes large
■ Leading is the space between lines. amounts of text or symbolic content, this
■ Kerning is the space between individual content
characters. can be indexed and its elements then linked
■ Alignment can be left, right, centered, together to afford rapid electronic retrieval of
or justified. the
associated information. When words are
Discuss the importance of text and ways keyed or indexed to other words, you have a
text can be leveraged in multimedia hypertext
presentations system; the “text” part of this term
represents the project’s content and
■ Size, color, background color, style, and meaning, rather than the
leading are factors that affect the graphical presentation of the text. Hypertext
legibility of text. is what the World Wide Web is all about.

25
When text lives in a computer instead of ■ Graphic design is the creative planning
on printed pages, the computer’s and execution of visual communication. All
powerful processing graphic design has a purpose or function.
capabilities can be applied to make the Usually its purpose is commercial to explain
text more accessible and meaningful. The aesthetically something -- to express, inform,
text can then be and influence the thoughts and actions of its
called hypertext; because the words, audience.
sections, and thoughts are linked, the ■Photographs, drawings, Line Art, graphs,
user can navigate through diagrams, typography, numbers, symbols,
text in a nonlinear way, quickly and geometric designs, maps, engineering
intuitively. Because hypertext is the drawings, or other images. Graphics often
organized cross-linking combine text, illustration, and color. Graphic
of words not only to other words but also design may consist of the deliberate
to associated images, video clips, sounds, selection, creation, or arrangement of
and other typography alone, as in a brochure, flier,
exhibits, hypertext often becomes simply poster, web site, or book without any other
an additional feature within an overall element.
multimedia ■ Graphic design is a creative process—
design. most often involving a client and a designer
■ Links are connections between the and usually completed in conjunction with
conceptual elements, that is, the nodes producers of form (i.e., printers, sign makers,
containing text, etc.)—undertaken in order to convey a
graphics, sounds, or related information in specific message (or messages) to a
the knowledge base. The term anchor is targeted audience.
formally used ■ Graphic designer is a professional within
in HTML as the reference from one the graphic design and graphic arts industry
document to another document, image, who assembles together images, typography
sound, or file. Links or motion graphics to create a piece of
are the navigation pathways and menus; design.
nodes are accessible topics, documents,
messages, and ■ 10 Tips on being a Graphic Designer
content elements. A link anchor is where 1. Always take the road less travelled,
you come from; a link end is the sometimes take the road with the most
destination node linked to the anchor. obstacles and learn from overcoming them.
■The standard document format used for 2. Never think what a solution SHOULD be,
pages on the Web is called Hypertext but what it COULD be.
Markup Language (HTML). In an HTML 3. Never let technology/craft be a hindrance
document you can specify typefaces, of going with a good idea, figure it out!
sizes, colors, and other properties by 4. See things from another angle; see it from
“marking up” the text in the document far away, up really close, from underneath or
with tags. The remarkable growth of the on top, pull it apart and put it back together
Web is straining the “old” designs for in a different way.
displaying text on computers. Dynamic 5. Do good with what you have available.
HTML uses Cascading Style Sheets (CSS) There is beauty in everything, you might just
to define choices ranging from line height have to look a little harder to find it!
to margin width to font face. HTML 6. Perfection is sometimes the imperfect.
character entities are represented either 7. If something is good enough, is it really
by a number or by a word and always good?
prefixed by an ampersand (escape) and 8. Breathe! Timeout!
followed by a semicolon. 9. See mistakes as detours rather than
■ You can search and view potentially mistakes.
billions of documents and files 10. Helvetica is hardly ever the answer,
(information), but you can merely a placeholder.
also become “lost in hyperspace.”

26
Key term Quiz

1. Type sizes are usually expressed in _______________.

2. When a password must be entered in upper- or lowercase in order to match the original
password, it is said to be _______________.
3. Symbolic representations of objects and processes common to the graphical user interfaces
of many
computer operating systems are called _______________.
4. Special HTML characters, always prefixed by an ampersand (escape) and followed by a
semicolon, are
called _______________.
5. “What you see is what you get” is spoken as _______________.
6. Translating or designing multimedia (or any computer-based material) into a language other
than the one in which it was originally written is called _______________.
7. The little decoration at the end of a letter stroke is a _______________.
8. Designers call roomy blank areas _______________.
9. _______________ blends the colors along the edges of the letters (called dithering) to
create a soft
transition between the letter and its background.
10. Conceptual elements consisting of text, graphics, sounds, or related information in the
knowledge base are called _______________.

Multiple Choice Quiz

1. A family of graphic characters that usually includes many type sizes and styles is called a:
a. typeface b. font c. point d. link e. node

2. Which of the following is a term that applies to the spacing between characters of text?
a. leading b. kerning c. tracking d. points e. dithering

3. Intercapping, the practice of placing a capital in the middle of a word, is a trend that emerged
from the computer programming community because:
a. it looks cool
b. they wanted to copy marketing practices in the electronics industry
c. they found they could see the words used for variables and commands better
d. one of the first computer programmers had a faulty shift key on his keyboard
e. it increases security in case-sensitive passwords

4. Dynamic HTML uses _______ to define choices ranging from line height to margin width to font
face.
a. Cascading Style Sheets b. font mapping c. font substitution
d. software robots e. encapsulated PostScript

5. If a DHTML document includes a font face that is not installed on the user’s computer, a browser
will:
a. automatically download the correct font
b. refuse to load the page
c. leave a blank space where that text is
d. crash
e. try to substitute the font with a similar looking font

6. In the URL http://www.timestream.com/info/people/biotay/biotay1.html, which part is case

sensitive?
a. the record type: http://
27
b. the domain name: “timestream.com”
c. the subdomain “www”
d. the document path: “info/people/biotay/biotay1.html”
e. all are case sensitive

7. Multimedia becomes interactive multimedia when:

a. the user has some control over what information is viewed and when it is viewed
b. the information is displayed by a computer with a touchscreen or other input device
c. the information is available on the Web— either the Internet or a local area network
d. quizzes and tests with evaluations and scoring are included
e. the user can change such attributes as volume and type size

8. Interactive multimedia becomes hypermedia when:

a. the information is available on the Web—either the Internet or a local area network
b. quizzes and tests with evaluations and scoring are included
c. it includes a structure of linked elements through which a user can navigate and interact
d. the user can change such attributes as volume and type size
e. the content formatting complies with the American Standard Code for Information Interchange

9. Web pages are coded using:

a. Unicode
b. American Standard Code for Information Interchange
c. File Transfer Protocol
d. Hypertext Markup Language
e. encapsulated PostScript

10. Which of the following provides a system for dynamically displaying a font?
a. Apache b. PostScript c. HTTPD d. serif e. WYSIWYG

11. A printed page might be presented in which of these orientations?

a. newsscape b. portrait c. flat-file d. x-height e. node

12. Which of the following is a character encoding system?

a. FontTab b. HTML c. CSS d. WYSIWYG e. Unicode

13. The reference from one document to another document, image, sound, or file on the Web is
a(n):
a. sweetspot b. anchor c. node d. tag e. button

14. Which of the following is a problem that might apply to hypermedia?

a. Users’ eye movements affect their ability to link.
b. Users will be turned off by excessive animation.
c. Hypermedia software might create inappropriate links.
d. Current hyperlinking technology far exceeds what today’s desktop computers can handle.
e. Search results generally are too granular to be useful.

15. Which of the following is a typical method for word searching in a hypermedia system?
a. best fit b. adjacency c. popularity d. tracking e. localization

28
Essay Quiz

1. Describe what characteristics a block of text might have.

2. Describe what characteristics a typeface might have.

3. Discuss the problems encountered using text across computer platforms and in different languages.

4. Discuss the differences among multimedia, interactive multimedia, hypertext, and hypermedia.

5. Your boss wants you to create a hypermedia system for Web visitors to find technical support
information about your company. What are some of the implications in creating this system? Should
you hand-build the links or use an automatic indexing system? Why?

29
Laboratory 2.1
Select a webpage then take a screenshot. Spot or circle the different blocks of text. Characterize the
types of text used in each block:

■ Which blocks are headlines? What type of font is used? Is it bold? serif? Characterize the text. How
is it spaced?

■ Which blocks are body text? What type of font is used? Is it bold? serif? Characterize the text. How
is it spaced?

Laboratory 2.2
Create a new document in a word processing application. Next, type in a line of text and copy the
line five times. Now change each line into a different font. Recopy the entire set of lines three times.
Finally, change the size of the first set to 10-point text, the second set to 18-point text, and the third
set to 36-point text.

■ Which of the smallest lines of text is most readable?

■ Which line of text stands out the most?

30