SlideShare a Scribd company logo
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.
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
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.
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
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.
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
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
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.
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..
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.
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.
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
Font Anatomy
Font Anatomy
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
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
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
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.
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
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
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
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
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
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
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
Terminology
   Point size
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
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.
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
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
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.
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

More Related Content

What's hot

Typography Fundamentals
Typography FundamentalsTypography Fundamentals
Typography Fundamentals
Steve Hickey
 
Typography
TypographyTypography
Typography
Derek Miller
 
Typography
TypographyTypography
Typography
Sai Kiran Reddy
 
Typography Essentials: Part 2
Typography Essentials: Part 2Typography Essentials: Part 2
Typography Essentials: Part 2
Jennifer Janviere
 
The Power of Typography
The Power of TypographyThe Power of Typography
The Power of Typography
[x]cube LABS
 
Typography - History, Basics and Trends
Typography - History, Basics and TrendsTypography - History, Basics and Trends
Typography - History, Basics and Trends
Rida Farooq
 
Design Elements Typography Fundamentals by Kristin Cullen
Design Elements Typography Fundamentals by Kristin CullenDesign Elements Typography Fundamentals by Kristin Cullen
Design Elements Typography Fundamentals by Kristin CullenHazlin Aisha Zainal Abidin
 
A crash course in typography
A crash course in typographyA crash course in typography
A crash course in typography
Migle Migle
 
typography
 typography typography
typography
Rahul Gupta
 
Understanding Graphic Design
Understanding Graphic DesignUnderstanding Graphic Design
Understanding Graphic Design
Frank Curkovic
 
Typography
TypographyTypography
Graphic Design Overview
Graphic Design OverviewGraphic Design Overview
Graphic Design Overview
Ravi Bhadauria
 
Use of Shapes in Graphic Design
Use of Shapes in Graphic DesignUse of Shapes in Graphic Design
Use of Shapes in Graphic Design
Ravi Bhadauria
 
Elements of Graphic Design
Elements of Graphic DesignElements of Graphic Design
Elements of Graphic Design
clewis86
 
Introduction to Layouts in Graphic Design
Introduction to Layouts in Graphic DesignIntroduction to Layouts in Graphic Design
Introduction to Layouts in Graphic Design
Casey Robertson
 
introduction of graphic design
introduction of graphic designintroduction of graphic design
introduction of graphic design
youssef farag
 
Graphic Design Elements and Principles - Tips and inspiration
Graphic Design Elements and Principles - Tips and inspirationGraphic Design Elements and Principles - Tips and inspiration
Graphic Design Elements and Principles - Tips and inspiration
Shahria Hossain
 
1.01 Typography Usability and Readability
1.01 Typography Usability and Readability1.01 Typography Usability and Readability
1.01 Typography Usability and Readability
MsGilbert
 
Basic concept of Graphic Design
Basic concept of Graphic DesignBasic concept of Graphic Design
Basic concept of Graphic Design
Ashikul Islam
 

What's hot (20)

Typography Fundamentals
Typography FundamentalsTypography Fundamentals
Typography Fundamentals
 
Typography
TypographyTypography
Typography
 
Typography
TypographyTypography
Typography
 
Typography Essentials: Part 2
Typography Essentials: Part 2Typography Essentials: Part 2
Typography Essentials: Part 2
 
The Power of Typography
The Power of TypographyThe Power of Typography
The Power of Typography
 
Typography - History, Basics and Trends
Typography - History, Basics and TrendsTypography - History, Basics and Trends
Typography - History, Basics and Trends
 
Design Elements Typography Fundamentals by Kristin Cullen
Design Elements Typography Fundamentals by Kristin CullenDesign Elements Typography Fundamentals by Kristin Cullen
Design Elements Typography Fundamentals by Kristin Cullen
 
A crash course in typography
A crash course in typographyA crash course in typography
A crash course in typography
 
typography
 typography typography
typography
 
Understanding Graphic Design
Understanding Graphic DesignUnderstanding Graphic Design
Understanding Graphic Design
 
Typography
TypographyTypography
Typography
 
Graphic Design Overview
Graphic Design OverviewGraphic Design Overview
Graphic Design Overview
 
Intro to Typography
Intro to TypographyIntro to Typography
Intro to Typography
 
Use of Shapes in Graphic Design
Use of Shapes in Graphic DesignUse of Shapes in Graphic Design
Use of Shapes in Graphic Design
 
Elements of Graphic Design
Elements of Graphic DesignElements of Graphic Design
Elements of Graphic Design
 
Introduction to Layouts in Graphic Design
Introduction to Layouts in Graphic DesignIntroduction to Layouts in Graphic Design
Introduction to Layouts in Graphic Design
 
introduction of graphic design
introduction of graphic designintroduction of graphic design
introduction of graphic design
 
Graphic Design Elements and Principles - Tips and inspiration
Graphic Design Elements and Principles - Tips and inspirationGraphic Design Elements and Principles - Tips and inspiration
Graphic Design Elements and Principles - Tips and inspiration
 
1.01 Typography Usability and Readability
1.01 Typography Usability and Readability1.01 Typography Usability and Readability
1.01 Typography Usability and Readability
 
Basic concept of Graphic Design
Basic concept of Graphic DesignBasic concept of Graphic Design
Basic concept of Graphic Design
 

Similar to Typography

Week 7_Chapter 7_typography.pptx
Week 7_Chapter 7_typography.pptxWeek 7_Chapter 7_typography.pptx
Week 7_Chapter 7_typography.pptx
WahyuRafdinal1
 
Cunning Plan - The Power of Typography
Cunning Plan -  The Power of Typography Cunning Plan -  The Power of Typography
Cunning Plan - The Power of Typography
Cunning Plan Marketing
 
Cunning Plan - The Power of Typography
Cunning Plan -  The Power of Typography Cunning Plan -  The Power of Typography
Cunning Plan - The Power of Typography
Lizzie Clarke
 
Semiotic typography course lite lecture_1
Semiotic typography course lite lecture_1Semiotic typography course lite lecture_1
Semiotic typography course lite lecture_1
David Engelby
 
TYPOGRAPHY 1 OVERVIEW (Intro to GD, Wk 4)
TYPOGRAPHY 1 OVERVIEW (Intro to GD, Wk 4)TYPOGRAPHY 1 OVERVIEW (Intro to GD, Wk 4)
TYPOGRAPHY 1 OVERVIEW (Intro to GD, Wk 4)
Shawn Calvert
 
Typograpghy final
Typograpghy finalTypograpghy final
Typograpghy finalSenistr0
 
French fold book
French fold bookFrench fold book
French fold book
Jada Cash
 
Type classification
Type classificationType classification
Type classification
Kevin Yeo
 
Put On Your Typeface by Chris Tyre
Put On Your Typeface by Chris TyrePut On Your Typeface by Chris Tyre
Put On Your Typeface by Chris TyreChris Tyre
 
12 Famous Typographers to Inspire You
12 Famous Typographers to Inspire You12 Famous Typographers to Inspire You
12 Famous Typographers to Inspire You
Ravi Bhadauria
 
Basic to Mastering Typography
Basic to Mastering TypographyBasic to Mastering Typography
Basic to Mastering Typography
Shahria Hossain
 
Project 4 - final information poster
Project 4 - final information posterProject 4 - final information poster
Project 4 - final information posterAlex Fergusson
 
LauraMartinez_Typebook
LauraMartinez_TypebookLauraMartinez_Typebook
LauraMartinez_TypebookLaura Martinez
 
Typography Presentation - OUGD404
Typography Presentation - OUGD404Typography Presentation - OUGD404
Typography Presentation - OUGD404Olivia Homar
 
Elige un tipo de letra adecuado para tu web
Elige un tipo de letra adecuado para tu webElige un tipo de letra adecuado para tu web
Elige un tipo de letra adecuado para tu web
Ana Cirujano
 
Timothy Samara-Type Style Finder_ The Busy Designer's Guide to Type-Rockport ...
Timothy Samara-Type Style Finder_ The Busy Designer's Guide to Type-Rockport ...Timothy Samara-Type Style Finder_ The Busy Designer's Guide to Type-Rockport ...
Timothy Samara-Type Style Finder_ The Busy Designer's Guide to Type-Rockport ...
ARLENEPARALEJAS3
 
Type 1 2 3
Type 1 2 3Type 1 2 3
Type 1 2 3
Hans Gerhard Meier
 
Type in 1-2-3
Type in 1-2-3Type in 1-2-3
Type in 1-2-3
Hans Gerhard Meier
 

Similar to Typography (20)

Week 7_Chapter 7_typography.pptx
Week 7_Chapter 7_typography.pptxWeek 7_Chapter 7_typography.pptx
Week 7_Chapter 7_typography.pptx
 
Cunning Plan - The Power of Typography
Cunning Plan -  The Power of Typography Cunning Plan -  The Power of Typography
Cunning Plan - The Power of Typography
 
Cunning Plan - The Power of Typography
Cunning Plan -  The Power of Typography Cunning Plan -  The Power of Typography
Cunning Plan - The Power of Typography
 
Semiotic typography course lite lecture_1
Semiotic typography course lite lecture_1Semiotic typography course lite lecture_1
Semiotic typography course lite lecture_1
 
TYPOGRAPHY 1 OVERVIEW (Intro to GD, Wk 4)
TYPOGRAPHY 1 OVERVIEW (Intro to GD, Wk 4)TYPOGRAPHY 1 OVERVIEW (Intro to GD, Wk 4)
TYPOGRAPHY 1 OVERVIEW (Intro to GD, Wk 4)
 
Typograpghy final
Typograpghy finalTypograpghy final
Typograpghy final
 
French fold book
French fold bookFrench fold book
French fold book
 
Type classification
Type classificationType classification
Type classification
 
Type lecture
Type lectureType lecture
Type lecture
 
Put On Your Typeface by Chris Tyre
Put On Your Typeface by Chris TyrePut On Your Typeface by Chris Tyre
Put On Your Typeface by Chris Tyre
 
12 Famous Typographers to Inspire You
12 Famous Typographers to Inspire You12 Famous Typographers to Inspire You
12 Famous Typographers to Inspire You
 
Basic to Mastering Typography
Basic to Mastering TypographyBasic to Mastering Typography
Basic to Mastering Typography
 
Project 4 - final information poster
Project 4 - final information posterProject 4 - final information poster
Project 4 - final information poster
 
LauraMartinez_Typebook
LauraMartinez_TypebookLauraMartinez_Typebook
LauraMartinez_Typebook
 
Typography Presentation - OUGD404
Typography Presentation - OUGD404Typography Presentation - OUGD404
Typography Presentation - OUGD404
 
Elige un tipo de letra adecuado para tu web
Elige un tipo de letra adecuado para tu webElige un tipo de letra adecuado para tu web
Elige un tipo de letra adecuado para tu web
 
Timothy Samara-Type Style Finder_ The Busy Designer's Guide to Type-Rockport ...
Timothy Samara-Type Style Finder_ The Busy Designer's Guide to Type-Rockport ...Timothy Samara-Type Style Finder_ The Busy Designer's Guide to Type-Rockport ...
Timothy Samara-Type Style Finder_ The Busy Designer's Guide to Type-Rockport ...
 
Type 1 2 3
Type 1 2 3Type 1 2 3
Type 1 2 3
 
Type in 1-2-3
Type in 1-2-3Type in 1-2-3
Type in 1-2-3
 
Lecture 4
Lecture 4Lecture 4
Lecture 4
 

Recently uploaded

一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
asuzyq
 
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
h7j5io0
 
RTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,DRTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,D
cy0krjxt
 
Expert Accessory Dwelling Unit (ADU) Drafting Services
Expert Accessory Dwelling Unit (ADU) Drafting ServicesExpert Accessory Dwelling Unit (ADU) Drafting Services
Expert Accessory Dwelling Unit (ADU) Drafting Services
ResDraft
 
Can AI do good? at 'offtheCanvas' India HCI prelude
Can AI do good? at 'offtheCanvas' India HCI preludeCan AI do good? at 'offtheCanvas' India HCI prelude
Can AI do good? at 'offtheCanvas' India HCI prelude
Alan Dix
 
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
7sd8fier
 
Top Israeli Products and Brands - Plan it israel.pdf
Top Israeli Products and Brands - Plan it israel.pdfTop Israeli Products and Brands - Plan it israel.pdf
Top Israeli Products and Brands - Plan it israel.pdf
PlanitIsrael
 
Mohannad Abdullah portfolio _ V2 _22-24
Mohannad Abdullah  portfolio _ V2 _22-24Mohannad Abdullah  portfolio _ V2 _22-24
Mohannad Abdullah portfolio _ V2 _22-24
M. A. Architect
 
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
708pb191
 
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Mansi Shah
 
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
h7j5io0
 
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
7sd8fier
 
Exploring the Future of Smart Garages.pdf
Exploring the Future of Smart Garages.pdfExploring the Future of Smart Garages.pdf
Exploring the Future of Smart Garages.pdf
fastfixgaragedoor
 
White wonder, Work developed by Eva Tschopp
White wonder, Work developed by Eva TschoppWhite wonder, Work developed by Eva Tschopp
White wonder, Work developed by Eva Tschopp
Mansi Shah
 
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
n0tivyq
 
Research 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdfResearch 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdf
ameli25062005
 
Common Designing Mistakes and How to avoid them
Common Designing Mistakes and How to avoid themCommon Designing Mistakes and How to avoid them
Common Designing Mistakes and How to avoid them
madhavlakhanpal29
 
7 Alternatives to Bullet Points in PowerPoint
7 Alternatives to Bullet Points in PowerPoint7 Alternatives to Bullet Points in PowerPoint
7 Alternatives to Bullet Points in PowerPoint
Alvis Oh
 
Book Formatting: Quality Control Checks for Designers
Book Formatting: Quality Control Checks for DesignersBook Formatting: Quality Control Checks for Designers
Book Formatting: Quality Control Checks for Designers
Confidence Ago
 
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
ameli25062005
 

Recently uploaded (20)

一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
 
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
 
RTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,DRTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,D
 
Expert Accessory Dwelling Unit (ADU) Drafting Services
Expert Accessory Dwelling Unit (ADU) Drafting ServicesExpert Accessory Dwelling Unit (ADU) Drafting Services
Expert Accessory Dwelling Unit (ADU) Drafting Services
 
Can AI do good? at 'offtheCanvas' India HCI prelude
Can AI do good? at 'offtheCanvas' India HCI preludeCan AI do good? at 'offtheCanvas' India HCI prelude
Can AI do good? at 'offtheCanvas' India HCI prelude
 
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
 
Top Israeli Products and Brands - Plan it israel.pdf
Top Israeli Products and Brands - Plan it israel.pdfTop Israeli Products and Brands - Plan it israel.pdf
Top Israeli Products and Brands - Plan it israel.pdf
 
Mohannad Abdullah portfolio _ V2 _22-24
Mohannad Abdullah  portfolio _ V2 _22-24Mohannad Abdullah  portfolio _ V2 _22-24
Mohannad Abdullah portfolio _ V2 _22-24
 
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
 
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
 
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
 
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
 
Exploring the Future of Smart Garages.pdf
Exploring the Future of Smart Garages.pdfExploring the Future of Smart Garages.pdf
Exploring the Future of Smart Garages.pdf
 
White wonder, Work developed by Eva Tschopp
White wonder, Work developed by Eva TschoppWhite wonder, Work developed by Eva Tschopp
White wonder, Work developed by Eva Tschopp
 
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
 
Research 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdfResearch 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdf
 
Common Designing Mistakes and How to avoid them
Common Designing Mistakes and How to avoid themCommon Designing Mistakes and How to avoid them
Common Designing Mistakes and How to avoid them
 
7 Alternatives to Bullet Points in PowerPoint
7 Alternatives to Bullet Points in PowerPoint7 Alternatives to Bullet Points in PowerPoint
7 Alternatives to Bullet Points in PowerPoint
 
Book Formatting: Quality Control Checks for Designers
Book Formatting: Quality Control Checks for DesignersBook Formatting: Quality Control Checks for Designers
Book Formatting: Quality Control Checks for Designers
 
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
 

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
  • 26. Terminology Point size
  • 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