The term “Typography” comes from Greek words: “typos” (form) & “graphe” (writing). Easily the nemesis for most people - as a subject of understanding and application as well. This is my feeble attempt at explaining the very basics of "typography", its history, characteristics, terminology and best-practices.
Designing for privacy: 3 essential UX habits for product teams
Typography
1. Typography
- Kabir Malkani
* This presentation has been compiled from references available from the Internet. This is meant purely
for educational purposes and the presenter does not claim to hold any ownership whatsoever; of the
content (textual or graphical) included in this presentation. The ownership and copyrights of the following
content belong to the respective brands /agencies / artists showcased in this presentation.
2. Topics Covered
O A Brief History O Special Formatting
O Hyphens & Dashes
O Introduction to Typography O Line Breaks
O Font Anatomy O Drop Caps
O Raised Caps
O Type Classification O Typographer Quotes & Inch Marks
O Terminology O Spaces
O Font Size O Boxed Text
O Grid
O Weights & Styles
O Best Practices
O Letter Spacing (Kerning & O Usage To create Mood
Tracking) O Ligatures
O Leading (Line Spacing) O Rag
O Glyphs O Widows & Orphans
O Choosing a Type
O Ligatures
O Choosing Pairing Fonts
O Paragraph Rules O Typography & the Web
O Tabs O Examples of Good Typography
O Indents
3. A Brief History…
Ancient writing systems
Egyptian Sumerian Cuneiform Greek Alphabet System
Hieroglyphics 3000 BC 800 BC
3200 BC – AD 400 Still used today as technical
symbols in domains such as
mathematics, science etc.
4. A Brief History…
Gutenberg Bible – The 1st Printed book
Written in Latin, the Gutenberg Bible Johannes Gutenberg A Replica of the
was printed by Johannes Gutenberg, in 1398 - 1468 Gutenberg Printing
Mainz, Germany, in the 1450s German Engraver & Press
Inventor of the Mechanical
Movable Type Printing
Press
5. A Brief History…
Geoffroy Troy – Enlightenment & Abstraction
French painter and designer Geofroy Tory believed that the proportions of the alphabet should reflect the
ideal human form. He wrote, “the cross-stroke covers the man‟s organ of generation, to signify that
Modesty and Chastity are required, before all else, in those who seek acquaintance with well-shaped
letters.”
Geoffroy Tory
1480 - 1533
Humanist and
Engraver - His
life's work has
heavily
influenced
French
publishing to this
day.
6. A Brief History…
Early Typographers
Nicholas Jenson was responsible for the development of the first full roman
typeface, which was based on humanistic characteristics and was highly legible.
Nicholas Jenson
1420 – 1480
Typographer, French
Engraver, Type Designer
Creator of the Roman typeface
7. A Brief History…
Early Typographers
Aldus Manutius
1449 – 1515
Humanist, Italian Printer &
Publisher
Aldus introduced small and handy pocket
editions of the classics.
He commissioned Francesco Griffo to cut a
slanted type known today as italic.
He and his grandson are credited with
introducing a standardized system of
punctuation.
The software company Aldus was named
after him.
„Aristotle‟ printed by
Aldus Manutius, 1495-98
8. A Brief History…
Early Typographers
Claude Garamond
1490 – 1561
French Publisher, Type Designer & Punch Cutter
Credited with the introduction of the apostrophe, the accent and the
cedilla to the French language.
He was an assistant to Geoffroy Tory
Several contemporary typefaces, including those currently known as
Garamond, Granjon, and Sabon, reflect his influence.
9. A Brief History…
Early Typographers
Fournier's contributions to
printing were his creation of
initials and ornaments, his
design of letters, and his
standardization of type sizes
He designed typefaces
including Fournier &
Narcissus
He also developed a system
of type measurement, which
was further developed by
François-Ambroise Didot into
the point based system that
Pierre Simon still exists today.
Fournier
1712 - 1768 Fournier‟s Type Construction
French punch-
cutter, typefounder and
typographic theoretician..
10. A Brief History…
Early Typographers
William Caslon John Baskerville Giambattista Bodoni
1692 - 1766 1706 - 1775 1740 - 1813
English gunsmith and English businessman, in areas Italian typographer, type-
designer of typefaces including japanning and papier- designer, compositor, printer and
mâché, but he is best publisher.
remembered as a printer and
typographer.
11. Introduction to Typography
ty·pog·ra·phy
The term “Typography” comes from Greek words: “typos” (form) & “graphe” (writing)
Definition:
Typography is the art and technique of arranging type in order to make
language visible.
The 3 goals of typography:
O The 1st goal of typography is readability
O The 2nd goal of typography is to transfer information to the reader in an
efficient manner.
O The 3rd goal is to use “type” to provide a sense of order and structure that
makes logical and visual sense.
12. Introduction to Typography
Typeface or Font?
O A Typeface is a family of typographical
symbols and characters.
Helvetica, Bodoni, Futura, Verdana, Myriad,
Arial etc. are Typefaces.
O A Font, on the other hand, is
traditionally defined as a complete
character set within a typeface, often of
a particular size and style.
Myriad Pro Semibold Italic 24 pts, Futura
BdCn BT 18 pts etc. are Fonts
Specimen of the Trajan typeface
15. Type Classification
There are a number of different ways to classify typefaces and
type families. The most common classifications are:
O Serifs vs Sans Serif
O Proportional vs Monospaced
O Technical Styles
O Mood
16. Type Classification
Serifs vs Sans Serifs
Serifs are semi-structural details on the Sans Serifs lack such serif details on
ends of some of the strokes that make up characters. Sans-serif typefaces are more
letters and symbols. modern in appearance than serifs. „Sans‟ is
a French word, which means „without‟
Serif typefaces guides the eyes from letter to Sans Serif types are usually used in
letter and are therefore preferred for body magazine headlines and websites for it is
copy in print documents. The readability of easier to read off the computer screen. They
serifs online has been debated. are also used to attract attention within a
Print Ad for instance.
Popular serif typefaces: Garamond & Caslon
Popular sans serif typefaces: Helvetica &
Futura
17. Type Classification
Serifs vs Sans Serifs
Sub-classification of Serifs Sub-classification of Sans Serifs
Old Style serifs (also called humanist) Grotesque
Transitional serifs Neo-grotesque
Modern serifs Humanist
Slab serifs Geometric
18. Type Classification
Proportional vs. Monospaced
Proportional typefaces Monospace typefaces
The space a character takes up is Each character takes up the same
dependent on the natural width of that amount of space. Narrower characters
character. An “i” takes up less space simply get a bit more spacing around
than an “m”, for example. Times New them to make up for the difference in
Roman is a proportional typeface. width. Courier New is a monospace
typeface.
19. Type Classification
By Technical Styles (in chronological order)
Blackletter
Blackletter is the earliest printed type, and is
based on hand-copied texts. It is traditionally
associated with medieval German / Gothic and
Old English.
Dates back to around 1450
Oldstyle
Oldstyle is typified by a gradual thick-to-thin
stroke, gracefully bracketed serifs, and slanted
stress, as indicated by the red line through the
uppercase „O‟, and as measured through the
thinnest parts of
a letterform.
Dates back to around 1475
20. Type Classification
By Technical Styles (in chronological order)
Italic
Usually considered a component of the roman typeface,
italic really deserves its own class. italics are casual as
opposed to the more formal roman forms of a font. Italics
are generally used for emphasis, captions, and the like,
and not for body text. Italics for sans-serifs are often
called obliques.
Dates back to around 1500
Script
Script is a formal replication of calligraphy. As type, script
is unsuitable for a large body of text, but is widely used to
lend a formal element to a layout.
Dates back to around 1550
21. Type Classification
By Technical Styles (in chronological order)
Transitional
As the name implies, transitional bridges the gap between
oldstyle and modern. It embodies greater thick-to-thin
strokes, and smaller brackets on serifs. Stress moves to
be more vertical.
Dates back to around 1750
Modern
Modern typefaces embodies extreme thick-to-thin
strokes, and hairline serifs. Many modern typefaces lose
readability if set too tight, or at too small a
size, particularly those with strong vertical stress.
Dates back to around 1775
22. Type Classification
By Technical Styles (in chronological order)
Egyptian / Slab Serif
Egyptian or slab serif was developed for heavy type in
advertising. It appeared during the Egyptology craze in
Europe. It generally has little variation in stroke weight and
is generally more geometric, and less calligraphic.
Dates back to around 1825
Sans Serif
Gained popularity as a move towards an international
aesthetic in typography. Sans serif can be strictly
geometric, as in Futura, or more humanist, as with Gill
Sans. More recently, sans serifs with a variation in stroke
weight are becoming more common (Optima, Myriad).
Dates back to around 1900
23. Type Classification
By Technical Styles (in chronological order)
Serif / Sans serif
A fairly recent development are families of typefaces with
both serif and sans serif fonts. These provide the designer
with even more unified variation than an extensive family
of serif or sans serif.
Dates back to around 1990
Grunge
Now part of the common lexicon of typography, grunge
was a development spring from postmodernism and
deconstructionism. Type was developed as primarily
image, and less for its readability. Grunge typography was
a big enough movement to rate its own category, and
encompasses a wide variety of „dirty‟ typefaces.
Dates back to around 1995
24. Type Classification
By Technical Styles (in chronological order)
Postmodern / Display
Postmodern or Display types encompass a wide variety of
styles and are unsuitable for body text.
Contemporary
Handwritten
Seemingly a contradiction in terms, these fonts actually
can be considered scripts, but their generally informal
nature tends to separate them out.
Contemporary
25. Type Classification
By Mood
O Different typefaces have strikingly
different moods.
O Commonly used moods include:
O formal vs. informal
O modern vs. classic/traditional &
O light vs. dramatic.
O Times New Roman is a formal font, and is
used for business correspondence.
O Comic Sans, on the other hand, has a
more informal mood and should be avoided
for official correspondence
27. Terminology
Styles, Weights & Width
Weight Width Style
The weight determines how bold the The width determines how wide the The combination of properties
typeface looks, how heavy the characters are. including typeface, width and
strokes making up the characters weight defines the “Style” of a
are. font
Helvetica Cnd Obl-Light 24 pts is
The traditional weights are Light, a particular style that belongs to
Regular, Semibold, Bold, and Black the Helvetica typeface.
The traditional widths are
Extended, Condensed, Extra
Condensed or Compressed
28. Terminology
Letter Spacing
Tracking
Kerning
Kerning and Tracking are the two components of letter spacing.
Tracking defines the amount of Kerning adjusts the space
space between the characters based on character pairs.
in a word uniformly regardless There is strong kerning
of the characters between the V and the A, and
no kerning between the S and
the T.
29. Terminology
Leading (Line Spacing)
This is the vertical space between lines of text. The name comes from the
physical piece of lead that used to be used in mechanical printing process to
separate lines of text
30. Terminology
Glyphs
Refer to all the available
characters in a font, from
letters to numbers and all the
special characters.
Tahoma Glyph Set accessed using
the Windows Character Map
31. Terminology
Ligatures
Two or more letters combined into one character make a ligature. When
parts of the anatomy of characters either clash or look too close
together, they can be combined in what are called Ligatures.
Common Ligatures are:
„fi‟ ligature type, size
12pt Garamond.
32. Assignment
O Create an artwork which represents at least 5
principles of Design discussed in this
presentation
O Choose from projects listed below:
O Ad campaign (series of 3 or more Print Ads)
O Package Design (at least a series of 3 different
packaging samples)
O Brochure Design (for a luxury or consumer brand)
O Web Design (for a luxury or consumer brand)
* Final Date for submitting this assignment is the 31st of
March 2013