A detailed presentation on Typography and the reasons why its powerful

1. LANGUAGE is mostly Spoken or Heard
TYPOGRAPHYis an art that makes Language Visible

2. This art form has evolved
over several millennia
Cave
Paintings
Medieval
Ages
Digital
Typography
Ancient
Hieroglyphics
We have come a long way from scribbling on walls to type setting on a digital canvas.
A neat type setting does not only result in an aesthetic appeal but reduces the void between man and machine.

3. TYPEFACE is a set of typographical
symbols and characters. This is the design
of the structure of the alphabet.
FONT is traditionally defined as a
complete character set within a typeface,
often of a particular size & style.
vs FontsTypefaces
EXAMPLE
1 2 3
1 - is a font that is average in it’s build
2 - is tall and lanky font
3 - is stout and swollen font.
Assume 1, 2, 3 are brothers that have the
same dashed attribute border and
comprise of the dashed triangle typeface.
To keep it simple, typeface is the creative labour involved in giving birth to a great font
that can have multiple variations. A collection of these variations forms a type-family.

4. Serif typefaces Sans serif typefaces Script typefaces Ornamental typefaces
BLACK - LETTER GAELIC MONO - SPACED SYMBOL EFFECT
CJK - Chinese / Japanese / Korean
Mincho typefaces Gothic typefaces Maru typefaces
TYPEFACE
CLASSIFICATION
ROMAN
Mimicry typefaces
An abundance of typefaces have been created over the centuries. Roman types
are the most widely used typefaces today. This is the primary classification and
the rabbit hole keeps getting deeper with new fonts coming up everyday.
E E E E
EE E
E E E  E
OTHERS

5. THE ANATOMY OF TYPE
IMAGE SOURCE: Martin Silvertant - Deviant Art

6. Mixing various styles
to create more variety
Bodoni and Futura have very different
looking letterforms, but their structure
is based on the same basic geometric
principles.
Use varying weights to
convey & create unity
See how different weights effect the
look and feel of the textual elements in
design. We shall come to learn sizes
soon.

7. 5 reasons why TYPOGRAPHY is powerful
1. It attracts and holds the audience’s attention.
2. It is reader friendly.
3. It establishes an information hierarchy.
4. It helps to create harmony.
5. It creates and builds recognition.

8. Importance of WHITESPACE

9. IT MAY SEEM AS THOUGH ALL UPPERCASE OR CAPITAL LETTERS
WOULD BE LIKELY TO CATCH A READER’S ATTENTION BUT IT’S
LACK OF LEGIBILITY IS MORE LIKELY TO ALIENATE THAN ATTRACT.
ALL CAPS MAKES THE TEXT LOOK AS THOUGH IT WERE
SCREAMING AND GENERALLY THIS IS WHAT THE USERS PERCEIVE.
• The main use of typography is to guide the users eye along your presentation.
• Our eye's span of acute focus is only about 3 inches (8 cm).
• We can see three to five words at a given point of time.
• Eyes following a long line of text, they tend to lose track of the next line.
• Magazines and Newspapers use columns to help maintain comfortable focus.
Creating Reader Friendly Type

10. What is LOREM IPSUM
“Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Maecenas magna sem, imperdiet non auctor ac, tempor sit
amet est. Cras ultricies elementum risus vel adipiscing.
Aliquam erat volutpat. Nullam interdum tincidunt velit. Etiam
rhoncus volutpat posuere. Suspendisse turpis lectus, varius
non risus a, scelerisque imperdiet orci. Vivamus tincidunt
mauris justo, id auctor lacus tincidunt id. Vivamus ultrices eros
sit amet diam molestie imperdiet. Nulla porttitor congue
ipsum, nec feugiat quam ullamcorper nec. Quisque euismod
id diam nec sodales.”
Lorem Ipsum has been the printing and
typesetting industry's standard since the 1500s.
It has endured five centuries and has also leapt
into electronic typesetting.
This is not random text and has roots in a piece
of classical Latin literature from 45 BC, making
it over 2000 years old.
Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum
passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of
"de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during
the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et
Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
ADDITIONAL NOTES

11. Font - Family
Font - Size
Font - Weight
Font - Style
Font - Variant
Letter - Spacing
Word - Spacing
Line - Height
List of Typographical Properties
Text - Align
Text - Decoration
Text - Indent
Text - Transform
Text - Shadow
Vertical - Align
White - Space
Direction
Margins
STYLING FORMATTING

12. The most important part of the composition is
given the most prominence.
Once the viewer is hooked, supplementary
information is displayed.
Symmetric : Equally distributed on either side
of a central axis.
A modular scale is a sequence of numbers that
relate to one another in a meaningful way.
& BalanceProportion
Asymmetric : Distributed unevenly on a page
so that positive and negative space are equal.
BALANCE CAN BE
ACHIEVED
SYMMETRICALLY
OR
ASYMMETRICALLY
BALANCE CAN BE
ACHIEVED
SYMMETRICALLY OR
ASYMMETRICALLY

13. Sometimes it helps to think of type
as a design element that is confined
within a grid.
A Grid sets up a system of blocks
that can be arranged as elements in
a composition.
How to style, color, and size type are all dictated by the principals of design:
• Hierarchy & Dominance - the most prominent item gets VIP treatment
• Unity & Variety - this can be achieved by using varying font sizes and colours
• Balance - distribution around a central axis / by using equal +ve & -ve space
• Proportion - using modular scales to give a homogeneous feel to the type.
Proportional Systems & the Grid

14. Tried & Tested font combinations

15. Fonts that look great on MOBILE screens
■ Noticia / Serif - Typeface
■ Bariol / Rounded - Typeface
■ Gleegoo / Serif - Typeface
■ Cabin / Sans Serif - Typeface
■ Ubuntu / Sans Serif - Typeface
■ Ostrich Sans / Sans Serif - Typeface
■ Dock no. 11 / Sans Serif - Typeface

16. Ligatures

17. Tracking & Kerning
Kerning is the process of adding or subtracting space between specific pairs of characters.
Tracking is the process of loosening or tightening a block of text.

18. Further Reading
http://www.adobe.com/type/topics/glossary.html
http://voiceandtone.com/
http://www.adobe.com/type/browser/classifications.html
http://powerpointsymphony.com/?tag=typography
http://practicaltypography.com
http://www.creativebloq.com/typography/free-web-fonts-1131610
http://www.smashingmagazine.com/2009/11/15/20-new-high-quality-free-fonts/
THANK YOU !
by,
Rohan Kartik
UI - Designer