Lecture on Text and fonts

1

Multimedia Design and Development

Text and Fonts


Text looks like the easiest medium to create and the least expensive to transmit,

but there’s more to text creation than meets the eye!


First, effective use of text requires good writing, striving for conc
iseness and accuracy.



Advertising wordsmiths sell product lines with a logo or tag lines with just a few words



Similarly, multimedia developers are also presenting text in a media
-
rich context, weaving words
with sounds, images, and animations



Design label
s for multimedia title screens, menus and buttons using words with the precise and
powerful meanings



Which feedback is more powerful: “That answer was correct.” or “Terrific!”

o

When is “Terrific” more appropriate or effective?

o

Why is “quit” more powerful th
an “close”? Why does UM uses “out” instead?



Why is the title of a piece especially important?

o

It should clearly communicate the content.

o

It should get the user interested in exploring the content.



Let’s discuss some of your proposed project titles.


Som
e guidelines for writing effective script:



Write for your audience, bearing in mind your audience’s background and interests

o

Can you assume that your audience knows what the traveling saleman problem is?



Yes, if your audience is CS faculty; no, if it’s CS
undergraduates.

o

When should you use a casual, idiomatic style or a formal, business
-
like style?



Again, it depends on your audience.



Recommended reading for writers:
The Elements of Style
, by William Strunk, full of pithy advice
and rules of thumb:

o

Say it i
n active voice:

“Genetic algorithms were invented by John Holland in 1970’s.”

vs.

“John Holland invented genetic algorithms in the 1970's.”

o

Avoid wordiness: “computer algorithm” vs. just “algorithm”

o

Avoid high
-
falutin’ phrases: “appropriate incorporated” v
s. “using”



Write and rewrite, bearing in mind that users won’t read much on a screen.



2

Fonts


Once you’ve chosen your words, you need to decide how to present them, using a typeface and font

See
http://www.eecs.lehigh.edu/~glennb/mm/pics/typefont.jpg

(from Vaughan)

a
typeface

is a family of graphic characters that usually includes many type sizes and styles

e.g., Times, Courier and Helvetica are typefaces, each of which include many size
s & styles

a
font

is a collection of characters of a single size and style, belong to a typeface family

typical font
styles

are boldface, italic, bold italic, and underlined

font
sizes

are expressed in terms of points, where one point is .0138 or 1/72 inch
,

where size is the distance from the top of capital letters to the bottom of descenders

in lower
-
case letters such as
g

and
j
.

Times is a typeface; Times 12
-
point italic is a font

In computerese, however, people say “font” when “typeface” would be more ac
curate.

Leading

(pronounced “
ledding
”) is the space between lines of text

Lopuck recommends increasing the leading to improve readability of text on a screen

Character metrics

are the measurements of individual characters

Vector
-
based fonts permit changes
to character metrics for interesting effects;

bit
-
based fonts do not

Kerning

is the spacing between character pairs

Some fonts have variable kerning (e.g., Times), so have fixed kerning (e.g., Courier)

When is fixed kerning more desirable?

(Computer code)

What about variable kerning?

A
serif

font has little decorations at the end of each letter stroke

Times and Century Schoolbook are examples of serif fonts;
Arial

is a
sans

serif

font

On printed pages, serif fonts are traditionally used for body text

becau
se they help guide the reader’s eye along the line of text

Headlines use
sans serif

text

Computer screens, with 72
-
dpi (dots per inch), don’t provide as much resolution as print,

so it can be argued sans serif fonts are more legible in small sizes

hence, U
M standardized on 12
-
point Arial font (in Windows)


PostScript vs. TrueType

For the Macintosh, Apple chose a resolution of 72 pixels per inch,

corresponding to standard font resolution for print of 72 points per inch


This allows desktop publishers to have

WYSIWYG, approximately

Mac also standardized pixels as square
-
shaped, so that measurements are even on all sides

On the PC side, VGA imitated these standards

(earlier, EGA had an aspect ratio of 1.33:1, taller than wide)

VGA and Mac standardized no 640 x

480 square
-
pixel screens,

now the defacto baseline for multimedia production

So far, the good news...

Apple also spearheaded desktop publishing by adopting Adobe’s PostScript

page description language for printing to Apple’s LaserWriter

Until then, char
acters were stored in a bitmap table representing every character at every size

PostScript

is vector
-
based, describing each character in terms of mathematical constructs



3

(Bezier curves), so that each character can be scaled

This facilitates drawing charact
ers at various sizes and in various resolutions

A problem with PostScript is that it represents fonts for printer and screens separately

Adobe Type Manager accesses a font’s outline in the printer font,

and scales it to display to the right size on a scre
en

Apple apparently didn’t like Adobe’s approach, so they later (circa 1989) introduced
TrueType

you only need one file per font, for either printer or screen, nor do you need ATM utility

TrueType also uses a quadratic curves outline font method,

which Ap
ple and others claim produces a smoother characters

Now Truetype is generally available on all Windows and Macintosh systems

Both PostScript and TrueType fonts allow text to be drawn on any size without
jaggies

or jagged edges on the outlines of a characte
r, such as in a bold italic style

Anti
-
alaising

exploits color by blending (or dithering) the colors along the edges of letter

Authorware 5 now boast support for anti
-
aliasing

See
http:/
/www.eecs.lehigh.edu/~glennb/mm/pics/MacPCfnt.jpg

for comparison

Since PostScript and TrueType are now fairly universal,

it’s fairly safe to use them without worrying about portability,

though not all fonts are identical on each platform

Authorware and Di
rector point out possible problems with mapping fonts

and suggests possible solutions

For example, Arial on Windows apparently maps approximate to Helvitica on Mac

However, these are not exactly equivalent, so porting text is not trivial!

Also, special ch
aracters, such as curling quotation marks, rarely map properly.

One way to solve font mapping problems is to convert text into bitmaps

If you want to use other fonts, you either create them yourself,

or obtain from a font manufacturer (sometimes known as a

type foundry
),

such as Adobe, and Bitstream, Monotype, etc.

These and other interesting fonts are available on the web, e.g.,
www.bitstream.com


Some more heuristics about choosing text fonts:

For small type, avoid decorative fonts; strive for legibility

Use as few different typefaces in a piece, but vary the style and size where it looks good

Also experiment with different colors and different backgrounds

In blocks of text, use ample
leading
, i.e., space between lines of text

Avoid scrolling text; test sh
ow that users will gloss over all your information!

Keep length of each line short. Lopuck recommend keeping line length under 3".

User’s eyes can get lost finding the next line if the lines are too long.

I try to end each line with a punctuation mark if
possible.

Use anti
-
aliased text for a gentle and blended look for titles and headlines

For attention
-
grabbing headlines, try graphically altering the text,

using a font editing tool such as ResEdit or Fontographer,

or use drop shadows or three
-
dimensional

effects

Surround headlines with plenty of white space