Practical Typography

“Rule the Typography”

By Ravi Bhadauria
ADMEC MULTIMEDIA INSTITUTE
www.admecindia.co.in
#9811-818-122, #9911-782-350
 Typography Defined
• Typography is the art of designing typefaces
and printing with type.
• Typography is means by which words,
conceived in someone’s mind and then put
down on paper are made available to world at
large.
 Why Typography so Important?
• Typography is fundamental to good graphic
design.
• Typography is important in the designing of
advertisements, magazines, newspapers, and
books.
• Typefaces can be used to create moods.
• Some typefaces even have special functions.
 Moods & Functions of Typefaces
• If you seek a feminine mood,
then you might use Isadora
• For something comical,
consider Comic Sans
• For signage, Helvetica is
used worldwide because of
its functionality
• For a classic look, try
Garamond, designed in France
almost 500 years ago
 A Few Definitions
• Type family- a number of different fonts
based on the same fundamental design.
• Type series- the many sizes that a type font is
available in.
• Font- a font is a collection of characters of the
alphabet of one size and series.
Members of a type family have distinguishing names such as Century Light, Century
Light Italic, Century Bold, Century Bold Italic, and so on.

A standard type series is: 5.5, 6, 7, 8, 8.5, 9, 9.5, 10, 11, 12, 14, 18, 24, 30,
36, 48, 60, 72, 96, 108
 Classification of Typefaces
• There are several systems for classification of
typefaces, but the various systems have
elements in common
• All such schemes, for example, recognize
roman types as a major category
• All such schemes also have a special category
called miscellaneous for typefaces that do not
fall in some other category
 Attributes of Typefaces
In order to classify
typefaces, we need
some system like
taxonomy as in
biology.
On the right hand
side you can see
some common
attributes.
 Classification of Typefaces
– Roman/ Serif
– Egyptian
– Sans Serif
– Script
– Dingbats/ Symbols
– Black Letters
– Fantasy
– Miscellaneous
 Category I: Roman Typefaces
• Roman typefaces get their name from the fact
that their designs are based on letterforms
used in ancient Rome, about 2,000 years ago.
• Their most distinguishing characteristic is the
fine cross-stroke at the end of each main
stroke, called a serif.
The Pantheon (118-128) in Rome, dedicated to
the 12 Olympian gods. Note the typeface on the plinth.
Another view of the Pantheon. Note the serifs. Also
note that there are no lowercase characters.
 Example of a Roman Typeface
• This is Times New Roman, a typical roman
typeface
• It appears in many computer programs
• It is based on a typeface designed for the Times
daily newspaper, in London, more than 100
years ago
 Classification of Roman Typefaces
• Most typographers, including Craig, divide the
roman typefaces into three categories
• The three categories are oldstyle, transitional
and modern
• The next slide is an illustration of an oldstyle
roman typeface
 Old Style Roman Type
• Old style roman typefaces date from the late
15th century, more than 500 years ago
• They are characterized by rounded serifs,
oblique stress, and low contrast
 Example: Garamond
• Garamond is an old style typeface originally
credited to French typographer Claude
Garamond, who died in 1561
• Note the low contrast, small counters, and
oblique stress
• The letterforms are open and round, making the
typeface very readable
• One peculiar characteristic is that the capital
letters are shorter than the ascenders
 Blow froggie
Example of Garamond illustrating
that the capital “B” is shorter than
the lowercase “l”.
Toy Garamond: Note the rounded
serifs and gradual curves
between the main strokes and
the serifs; also note stress.
 Transitional Roman Type

• Now that we have finished examining in

detail an oldstyle roman typeface, let’s turn
to a transitional roman typeface
• For this example, let’s use Baskerville
 Example: Baskerville

• Modern roman typefaces are not really

“modern”, but evolved in the 18th century
• They were considered modern at the time
because they represented a radical
departure from previous type designs
• They have greater contrast and vertical
stress
Toy
Baskerville: Note the serifs are
almost squared off; note also the
lack of stress and greater contrast
than in the oldstyle typefaces.
 Modern Roman Type

• Modern roman typefaces are not really

“modern”, but evolved in the 18th century
• They were considered modern at the time
because they represented a radical departure
from previous type designs
• They have greater contrast and vertical
stress
 Example: Fenice
• This is an example of Fenice
• Note that the contrast between thick and
thin strokes is even greater than in
Baskerville
• It has a more modern feel to it than
Garamond does
Toy
Fenice: Note the extreme contrast
between thick and thin strokes.
Also note the vertical stress.
 Category II: Egyptian Typefaces

• Egyptian typefaces are notable for their

prominent, square serifs
• Because of these large, square serifs, some
typographers refer to egyptians as square
serif typefaces
• For an example of this category, we will
examine Century
 Example: Century

• Century is excellent example of a refined

Egyptian typeface. It was designed in 1894
for Century magazine in the U.S.
• Note the square serifs
• Century is good as a display type because of
its boldness
 Century: Because of the
large x-height, some leading
is required.

Toy
Note that the serifs are
like slabs.
Category III: Sans Serif Typefaces

• “Sans” is French for “without”, so “sans

serif” means “without serifs”
• As a group, the sans serif faces are among
the most modern of all typeforms
• For an illustration of sans serif typefaces,
we will use Helvetica, which is known and
used worldwide
 Example: Helvetica

• Helvetica was introduced by the Haas

type foundary in 1957
• It has a large x-height and narrow
letters
• It also has very little stress, and the
strokes are of relatively equal width
• It has been adopted universally for
signage
Toy
Example of Helvetica. Note the narrow letters,
large x-height, lack of contrast and lack of
stress.
 Category IV: Scripts

• Scripts are designed to look like handwriting

• This one is called Isadora
• Some typographers classify these as
“miscellaneous” typefaces, but others put them
in their own category
• They are easily overused, so use them
sparingly
 Category V: Miscellaneous

• In this category go all those typefaces that

do not fit into the first four categories
• The following slides will illustrate some of
the more interesting typefaces
 Example: Bauhaus

• bauhaus was a revolutionary typeface

designed in germany around 1920
• it was “revolutionary” because it
originally was designed with no capital
letters
• the german language capitalizes all
nouns, so “purists” thought the absence
of capital letters was almost obscene
 Rules of Thumb

Seriously there are some

rules of thumb to make easy
typography to you to
understand!. Whatever I
have learnt in my designing
career of 15 years here I am
describing as rules of
typography for you.
 Rule 1
Don't use more than two type styles (races) on a
page. If you use more than one type style, be
sure the styles you use contrast.
 Rule 2
• Don't use more than one type family from one
style on a page. For example, DON‘T use
Times and Palatino on the same page. They
will clash.
Times New Roman Times New Roman Palatino Linotype Palatino Linotype
Times New Roman Times New Roman Palatino Linotype Palatino Linotype
Times New Roman Times New Roman Palatino Linotype Palatino Linotype
Times New Roman Times New Roman Palatino Linotype Palatino Linotype
Times New Roman Times New Roman Palatino Linotype Palatino Linotype
Times New Roman Times New Roman Palatino Linotype Palatino Linotype
Times New Roman Times New Roman Palatino Linotype Palatino Linotype
Times New Roman Times New Roman Palatino Linotype Palatino Linotype
Times New Roman Times New Roman Palatino Linotype Palatino Linotype
 Rule 3
Use as many members of the same family as
you'd like on a page. They will AL-WAYS work
well together and never clash. But, the “outline”
and “shadow” options usually look amateurish.
 Rule 4
Line lengths should be about 60-65 characters
long. Bigger types need longer lines while
smaller types need shorter ones.

Bigger types need longer lines

while smaller types need
shorter ones
Bigger types need longer lines while
smaller types need shorter ones. Bigger
types need longer lines while smaller
types need shorter ones.
Bigger types need longer lines while
smaller types need shorter ones. Bigger
types need longer lines while smaller
types need shorter ones.
 Rule 5
If you can adjust the leading, make it about 1.25
times the type size (in most cases).

If you can adjust the leading, make it about 1.25 times the type size (in most
cases). If you can adjust the leading, make it about 1.25 times the type size (in
most cases). If you can adjust the leading, make it about 1.25 times the type
size (in most cases).

If you can adjust the leading, make it about 1.25 times the type size (in most
cases). If you can adjust the leading, make it about 1.25 times the type size (in
most cases). If you can adjust the leading, make it about 1.25 times the type
size (in most cases).
 Rule 6
• Don’t use drop shadows on text.
 Rule 7
Widows and Orphans
A widow is a short line or
single word at the end of
a paragraph. An orphan is
a word or short line at
the beginning or end of a
column that is separated
from the rest of the
paragraph. Widows and
Orphans create awkward
rags, interrupt the
reader’s eye and affect
readability.
 Rule 8
• Don't use short justified lines unless you're
prepared to spend time hyphenating words to
remove rivers and lakes of white space.
 Rule 9
• Don't put too much text on a page. Let there
be pleasant margins.
 Rule 10

Resist the
urge to set
lines on
angles.
Unless
you're an
excellent
designer,
these tricks
seldom
work.
 Rule 11
Just because your computer can do something
doesn't mean you should!
 Rule 12

Provide at least
3/8" white space
around the page.
Your copier or
printer may need
this space for
mechanical
reasons.
 Rule 13
Don't use full lines of uppercase type, especially
if you are using text or script type or an italic
family member.
DON'T USE FULL LINES OF UPPERCASE TYPE, ESPECIALLY IF YOU ARE USING
TEXT OR SCRIPT TYPE OR AN ITALIC FAMILY MEMBER.

DON'T USE FULL LINES OF UPPERCASE

TYPE, ESPECIALLY IF YOU ARE USING TEXT
OR SCRIPT TYPE OR AN ITALIC FAMILY
MEMBER.
Don't use full lines of uppercase type, especially
if you are using text or script type or an italic
 Rule 14
Long lines of text are hard to read. Generally, a
line should have 55 to 60 characters, or 9 to 10
words. Try multiple columns or, if you are stuck
with a long line length, increase the leading
slightly to make it easier for the eye to move
from line to line
 Rule 15
White space
on the page
makes your
document
cleaner-
looking and
easier to
read.
 Rule 16
Use indents
and bullets to
highlight
important
points. Use
headings and
subheadings
to help your
readers find
the
information
they’re
interested in.
 Rule 17
• Avoid using more than two type families on a
page. Generally one serif and one sans serif
make a nice mix. Using the sans serif for head
lines and the serif for body text is a common
and effective formula.
 Rule 18
Use italics or bold
to highlight words
and phrases,
rather than using
all uppercase. All
uppercase is hard
to read.
 Rule 19
• Left justification
can be easier to
read and looks
less formal than
full justification.
Pick the
alignment option
that matches the
tone of your
document.
 Rule 20
Graphs, pictures,
and charts add
interest to your
documents and
clarify your text.
Horizontal and
vertical lines can
be used
sparingly to
break up blocks
of text.
 Rule 21
Alignment
Please don’t just throw everything center aligned (unless that’s a deliberate
design decision). Think about using a grid. Have everything on the page in
relation to something else. Use guides and clean things up. Don’t throw
things in the corners of a page either, that looks like you couldn’t decide
where to put anything.
 Thanks

Can you rule typography now!

ADMEC MULTIMEDIA INSTITUTE

C-7/114, 1st Floor, Sector-7, Rohini
Delhi- 110085

www.admecindia.co.in