Lecture on Text and fonts

cottonseedbotanistAI and Robotics

Oct 23, 2013 (4 years and 8 months ago)



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!”


When is “Terrific” more appropriate or effective?


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

Why is the title of a piece especially important?


It should clearly communicate the content.


It should get the user interested in exploring the content.

Let’s discuss some of your proposed project titles.

e guidelines for writing effective script:

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


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


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:


Say it i
n active voice:

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


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


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


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

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



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


(from Vaughan)


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


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

typical font

are boldface, italic, bold italic, and underlined


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


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

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


(pronounced “
”) 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

based fonts permit changes
to character metrics for interesting effects;

based fonts do not


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?


font has little decorations at the end of each letter stroke

Times and Century Schoolbook are examples of serif fonts;

is a



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

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

Headlines use
sans serif


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


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


(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

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

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

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


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

Authorware 5 now boast support for anti


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.,

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
, 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

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


Surround headlines with plenty of white space