Practical Typography Workshop Tips

Some Rules of Thumb for Every Designer
by
ADMEC Multimedia Institute
www.admecindia.co.in

Typography
vs
Design
A Workshop by Ravi Bhadauria at
ADMEC Multimedia Institute
An in-depth exploration of
Practical Typography
A
C
B

Practical Typography
ADMEC MULTIMEDIA INSTITUTE
Leader in Animation & Digital Media Education
ISO 9001 : 2008 CERTIFIED
www.admecindia.co.in | www.graphic-design-institute.com
Phones: +91-9811-8181-22, +91-9911-7823-50
R
A Presentation by: Ravi Bhadauria

Preface & Acknowledgment
Dear Reader,
ADMEC Multimedia Institute is a growing institute which provides industry oriented
training to the world at large. Being a multimedia institute we offer training for designing
content for the advertising and publishing on various medias also.
This presentation is one of the best presentations from our study material for our weekly
workshops which ADMEC conducts every week at the center. We want to share this with
the world so that everyone can take benefits from our efforts.
This presentation contains very good information about “Use of Typefaces in Graphic
Design”.
We express thanks to many books and websites, specially Google for making it one of
the best presentations of all the time.
Thanks
Ravi Bhadauria, Instructor (Web and Visual Designing)
Director ADMEC Multimedia Institute
http://www.admecindia.co.in

What are you going to learn today?
● Why Typography matters?
● Typography Rules
● Typographic Terms
● Use of Typefaces
● Projects

Lets see why typography matters
I want to show you some design
examples that will make clear one thing
and that is "How proper use of
typefaces in a design improves the
overall design while incorrect use of it
makes a design drastically mess".

And the result for correct is:
2, 1, 2, 1, 2, 1, 2, 1, 2

Typographic Readability and Legibility
●
Readability refers to the way in which words and blocks
of type are arranged on a page.
●
Legibility refers to how a typeface is designed and how
well one individual character can be distinguished from
another.

Legibility
When choosing a typeface, it all depends on how you plan to
use it. Ask yourself some basic questions:
●
What size will the text be used at?
●
Will it appear as body copy or a headline?
●
Does it need to be a workhorse or will it be used more as
eye candy?
●
Will it be paired with another font?
●
Does the appearance of the typeface complement the
subject matter?

Things to remember for legibility
This leads us into the first of a few things to remember
concerning a typeface’s legibility:
Display vs. Text
Some typefaces were designed to be used large, such as in
headlines. Usually these typefaces are less readable at smaller
sizes and should not be used for body copy. These are called
display faces.

Different typefaces for different uses
●
Garamond - highly legible when printed in a large body of text. It
was considered as eco-friendly too of its time, conserving ink
usage.
●
Bell Centennial - commissioned by AT&T in the 1970's,
designed to be used in telephone directories.
●
Georgia and Verdana - designed specifically for the digital
screens.
●
Helvetica – used worldwide for signage
●
Comic Sans – comical issues or comics
●
Isadora a female special typeface–

Things to remember for legibility contd..
Other typefaces
are designed
specifically to be
used in large
areas of smaller
body copy. These
are called text or
body faces.

Serif vs. Sans Serif
Serif faces are always more readable as our history tells us. In
ancient Rome this type of typefaces were very common. All
the classical books such as religious books were written in
serif typefaces.
So, don't use serif in headlines, sub-headlines, intros, titles,
captions etc while sans-serif can't be used in long text such as
paragraphs.

x-height
Another characteristic to note is x-height. This typically
applies to using type at body text sizes. It doesn't take into
account the height of the ascenders or descenders. When used
small, typefaces with larger x-heights are typically more
readable.

Readability
Readability is about arranging words and groups of words in a
way that allows the readers eye to access the content easily
and in a way that makes sense. It’s really an art form that is
honed over time as successful combinations are found.
In my experience this tends to be one of the hardest tasks
beginning designers.
Here are few things to keep in mind.

Spacing / Line height

Letter Spacing

Few more
● Size
● Measure or Line Height
● Contrast
● Hierarchy

Leading or Line Spacing Guidelines
More line spacing generally results in greater
legibility, until the lines seem to be separate lines.

Linespacing Guidelines
●
The longer the measure (column width), the more the lead
●
The greater the x-height, the more the lead.
●
The looser the word spacing, the more the lead.
●
The darker the face, the more the lead
●
The larger the type size the more the lead
●
Reference material: less lead; continuous reading: more lead.
●
Serifed face: less lead; sanserif face: more lead
●
Old style face: less lead; modern face: more lead

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
in contrast.
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.
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.
4. Line lengths should be about 60-65 characters long.
Bigger types need longer lines while smaller types need
shorter ones.
Use of type on a page

5. If you can adjust the leading, make it about 1.25 times the
type size (in most cases).
6. Don't use double spacing! the “outline” and “shadow”
options usually look amateurish.
7. Don't use short justified lines unless you're prepared to
spend time hyphenating words to remove rivers and lakes of
white space.
8. Don't put too much type on a page. Let there be pleasant
margins.
9. Resist the urge to set lines on angles. Unless you're an
excellent designer, these tricks seldom work.

10. Remember the most important thing about your page is
that it must be legible. People need to be able to read it
quickly.
11. Just because your computer can do something doesn't
mean you should!
12. Provide at least 3/8" white space around the page. Your
copier or printer may need this space for mechanical
reasons.
13. Unless you really know what you're doing, don't have
different colored items touch each other. This will cause
reproduction problems.
14. Don't use full lines of uppercase type, especially if you
are using text or script type or an italic family member.

15. Higher x-height means more readability so don't
forget this legibility test.
16. Manage the kerning for better readability. It is the
space between two letters.

17. While the space between 2 specific letters in kerning.
18. The space among more than 2 letters is tracking.

19. Monospaced fonts: typewriters, not very legible:
The quick brown fox jumped over the
lazy dog. -Courier New
20. Variably spaced fonts: spaces between each
letterform varies with the shape of that letterform
(called “kerning pairs”). Also called proportional spacing:
The quick brown fox jumped over the lazy dog.

Justified type results in
irregular spacing between words, or
between words And letters. It also
results in “rivers” Of white space.
Both impede legibility. Newspapers
historically only justify type
for reasons of tradition and visual
real estate($ per inch).
Alignment
●
Justified type creates irregular spacing – especially for
mono-spacing without hyphenation
●
Can result in “rivers” of white space
●
Both impede legibility

●
Flush left, ragged right most legible to western eyes.
Now is the time for all good men to come to the aid of
their country. The quick brown fox jumped over the
moon. How much wood could a wood chuck chuck if a
wood chuck could chuck wood? Now is the time for all
good men to come to the aid of their country. The quick
brown fox jumped over the moon. How much wood could
a wood chuck chuck if a wood chuck could chuck wood?
Alignment

●
Centered type (except in small amounts) generally
impedes legibility.
Alignment

For text, the optimum line length is 55 – 75 characters
per line (counting spaces).
Line Length

ALWAYS provide a
margin - lack of
margins interferes
with readability and
legibility
Here is a some
flush-left text
that does not
have a margin
on the right side.
Not right.
Here is a some
flush-left text
that does have a
margin on the
right. Much
better!
ALWAYS provide a
margin - lack of
margins interferes
with readability and
legibility
Margins (Note also the gridding)

This is a level 1 heading
This is another level 1 heading
Typographical Hierarchy

This is another level 1 heading
Typographical Hierarchy Plus Indentation

CRAFTS AND GAMES
ARTS FESTIVAL
OF ATLANTAAND DECATUR
COME AND ENJOY
SEPTEMBER 19-24
Crafts and Games
Arts Festival
Of Atlanta and Decatur
September 19-24
Come and Enjoy!
Which one you prefer?
Example 1 Example 2

• Grid
• Mixes upper and lower case
• Picture too close to lower-left corner
• Date stands out more
• Font is sans serif
Why is the right example more pleasing?

Lets talk
practically now

Do not use wrong typefaces?
Who We Are?
ADMEC Multimedia institute is a group of finest
professionals and pioneer training center for the
courses in Web Design, Web Development, Internet
Marketing, Graphic Design, 2D-3D Animation, Video
Editing, Post Production, Motion Graphics, Visual
Effects, AutoCAD, Revit etc. We provide practical
training with the best placement assistance in all the
above courses.

Who We Are?
ADMEC Multimedia institute is a group of finest professionals and
pioneer training center for the courses in Web Design, Web
Development, Internet Marketing, Graphic Design, 2D-3D Animation,
Video Editing, Post Production, Motion Graphics, Visual Effects,
AutoCAD, Revit etc. We provide practical training with the best
placement assistance in all the above courses.
Do not use wrong typeface?
Who We Are?

Who We Are?

Who We Are?
Who We Are?

Who We Are?
Development, Internet Marketing, Graphic Design, 2D-3D
Animation, Video Editing, Post Production, Motion Graphics, Visual
Effects, AutoCAD, Revit etc. We provide practical training with the
best placement assistance in all the above courses.
Who We Are?
Development, Internet Marketing, Graphic Design, 2D-3D
Animation, Video Editing, Post Production, Motion Graphics, Visual
Effects, AutoCAD, Revit etc. We provide practical training with the
best placement assistance in all the above courses.

Who We Are?
Who We Are?
Marketing, Graphic Design, 2D-3D Animation,
Visual Effects, AutoCAD, Revit etc. We provide
practical training with the best placement
assistance in all the above courses.

Who We Are?
Who We Are?

Who We Are?
ADMEC Multimedia institute is a
group of finest professionals and
pioneer training center for the
courses in Web Design, Web
Development, Internet Marketing,
Graphic Design, 2D-3D Animation,
Visual Effects, AutoCAD, Revit etc.
We provide practical training with the
best placement assistance in all the
above courses.

Who We Are?
Marketing, Graphic Design, 2D-3D Animation, Visual
above courses.

Who We Are?
We provide practical training with
the best placement assistance in
all the above courses.
Who We Are?
We provide practical training with
the best placement assistance in
all the above courses.

Projects on Practical Typography
Theory:
● What is the practical typography and what are the essential things to remember while
creating a design, please explain?
● Explain Kerning, Tracking, and Leading in detail with all possible examples?
● How many types of leading and how it affects our designs? Please explain with
examples.
● Can you suggest 5 best combination of typefaces for a magazine on technology and
science? Add the images of typesetting examples as I did in my example in this
presentation.
Practical:
Create a Poster on any of the following given topics:
● Education (Play School, Vocational Studies, Higher Education
● Fashion (Showroom, Fashion Shows, Fashion Trends)
● Our Country (Culture, Possibilities for Youth, Gained in 50yrs)
Email me at: info@admecindia.co.in

Helpline 1: +91 9811-8181-22
Helpline 2: +91 9911-7823-50
URL: http://www.admecindia.co.in
R
Want to read more on visual designing
http://www.graphic-design-institute.com
ADMEC MULTIMEDIA
See
soon
you

Practical Typography Workshop Tips

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Practical Typography Workshop Tips

Ähnlich wie Practical Typography Workshop Tips (20)

Mehr von Ravi Bhadauria

Mehr von Ravi Bhadauria (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Practical Typography Workshop Tips