Typography

Multimedia & Webpage Design

1.01 Investigate typefaces and fonts.

Desktop Publishing
Involves using a desktop computer and publishing
software to create documents for publication.
Some examples of Desktop publications include:

Flyers
Newsletters
Magazine and Newspaper Articles
Advertisements
Proposals
Brochures
Business Correspondence
Letterhead
Business cards
Envelopes

The Target Audience

Publications are created to convey a
message to the intended audience,
called the target audience.
The target audience will determine the:

Language used.
Typefaces used.
Colors used.
Graphics used.

Typography
Many publications will contain a
large amount of text to deliver the
message.
It is important to understand a few
basic guidelines for working with text
and typography.
Typography refers to the design of
the characters and the way they are
presented on the page.

Typefaces, Fonts, and

Font Families
A typeface is the basic design of a character.
Each typeface has a design for each letter of
the alphabet, numbers, punctuation symbols
and may contain other symbols.
Example:
Arial

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
!@#$%^&*()_+-=?,.:;
Click here for more examples of typefaces.

Typeface Categories
Typefaces can be divided into four
main categories.
Serif
Sans Serif
Script
Decorative/Ornamental

Serif Typefaces
Have attributes or strokes at the tips of
the letters called serifs.
Examples:

Bodoni
Courier
Goudy
Times New Roman
Used for body text in printed publications.
Business correspondence
Magazine article text
Newsletter text

Book text
Newspaper text

Recommended sizes for body text are 10 to

12 points.

Serif Typefaces

Sans Serif Typefaces

There are no attributes (serifs) at the tips
of the letters.
Examples:
Arial
Berlin Sans

Gill Sans
Verdana

Used for very large or very small text

and for digital display.
Webpages
Headings
Captions

On-screen display
Tables
Headlines

Serif vs Sans Serif Typefaces

The ends of each

character do not
have attributes
(serifs)

Sans Serif

Decorative/Ornamental
Typefaces
Designed strictly to catch the eye
Should be used sparingly.
Can be hard to read.

Examples
Chiller Broadway
Webdings
engravers MT

Used for decoration.

Headlines on flyers or advertisements.
Webdings can be used for symbols in logos.

Script Typefaces
Appear to have been written by hand with
a calligraphy pen or brush
Should never be used to key in all caps.

Example

French Script
Uses

Formal Invitations
Place cards
Poetry
Announcements

Fonts
Its easier to understand fonts if you begin with
the original definition of a font.
Before desktop publishing, people called
typesetters set the type by hand using
moveable type.
Each character was a separate block of metal.
The letters were set on the layout to form the
text.
Each typeface had a complete set of metal
characters for each size, weight, etc.
Click here for an image on Wikipedia

Fonts Continued
Each different size or weight required a
completely separate set of metal characters.
Each metal set of characters was kept in its
own drawer and was called a type font.
So a font is the specific size, weight and style
applied to a typeface.
Examples:

Arial, bold, 12 point

Arial, italic, 14 point
Arial, 10 point

Font Style
The font style refers to the slant, weight
and special effects applied to the text.
Examples:
Bold

Italic
Underline
Shadow
Outline
Small Caps

Font Families
A font family is the different sizes,
weights and variations of a typeface.
Examples:

Bold

Arial
Arial Black
Arial Narrow
Arial Rounded MT

Typeface Spacing

Monospace
Proportional
Leading
Kerning
Tracking

Monospaced Typefaces
Each letter takes up the same amount of
space regardless of the letter size.
Advantages
Easier to see thin punctuation marks.
Similar characters look more different.
If limited to a certain number of characters
per line, each line will look alike.

Used often in computer programming

and biology
Courier is monospaced

Proportional Typefaces
Proportional
The amount of space each character takes up is
adjusted to the width of that character.
Therefore, an i is not as wide as an m and receives
less space.

Advantages
Does not take up as much space as monospaced
typefaces.
Easier to read.

Used in most documents and publications.

Times New Roman is proportional

Proportional vs. Monospace

Leading
The vertical spacing between lines of text.
Pronounced led-ding.
In most software programs, it is referred to as
line spacing.
In Desktop Publishing, it is still referred to as
leading because typesetters used long pieces of
lead between the moveable type to create blank
lines between the text.

Leading Continued
If there were no space between the lines
of text, the letters would touch the lines
above and below them and would be
extremely difficult to read.
Used to:
Slightly increase or decrease the length of a
column of text so that it is even with an
adjacent column.
To make a block of text fit in a space that is
larger or smaller than the text block.

Leading
Look in the nook to find
Leading (vertical spacing between lines of text)

the book that you

Leading (vertical spacing between lines of text)

borrowed to read.

Kerning
Horizontal spacing between pairs of
letters
Used to add or subtract space between
pairs of letters to create a more visually
appealing and readable text.
BOOK before kerning.
after kerning the Os.

Tracking
Horizontal spacing between all of
characters in a large block of text.
Makes a block of text seem more open
or more dense.
Examples

Tracking Continued
Makes a block of text more open and
airy or more dense.
Used to expand or contract a block of
text for the purpose of aligning two
columns.

Kerning, Leading, Tracking

LOOK in the nook to find

the book that you

Kerning (horizontal spacing between pairs of letters)

Leading (vertical spacing between lines of text)

borrowed to read.

Tracking (horizontal spacing between all

characters in a large block of text.

Glossary Sites
www.typenow.net/glossary.htm
www.adobe.com/type/topics/glossa
ry.html
www.typophile.com/wiki/Terminolog
y

Useful Sites

www.identifont.com
www.typeculture.com
www.typographi.com
www.typophile.com
http://www.dubbocollm.schools.nsw.edu.au/Training/DT
P/DTPtypeface.htm
http://www.x24d.com/blog/?p=34