SlideShare una empresa de Scribd logo
1 de 32
Descargar para leer sin conexión
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

Más contenido relacionado

La actualidad más candente

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 typographyMigle Migle
 
Typography - History, Basics and Trends
Typography - History, Basics and TrendsTypography - History, Basics and Trends
Typography - History, Basics and TrendsRida Farooq
 
Typography Essentials: Part 2
Typography Essentials: Part 2Typography Essentials: Part 2
Typography Essentials: Part 2Jennifer Janviere
 
Typography Fundamentals
Typography FundamentalsTypography Fundamentals
Typography FundamentalsSteve Hickey
 
The Power of Typography
The Power of TypographyThe Power of Typography
The Power of Typography[x]cube LABS
 
Logo Design basics
Logo Design basicsLogo Design basics
Logo Design basicsGreg Sarles
 
Graphic Design
Graphic DesignGraphic Design
Graphic DesignBen Fayza
 
Elements of Graphic Design
Elements of Graphic DesignElements of Graphic Design
Elements of Graphic Designclewis86
 
The History of Graphic Design
The History of Graphic DesignThe History of Graphic Design
The History of Graphic DesignMatt Erickson
 
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 inspirationShahria Hossain
 
An Introduction To Graphic Design
An Introduction To Graphic DesignAn Introduction To Graphic Design
An Introduction To Graphic DesignAfshan Kirmani
 

La actualidad más candente (20)

The typography
The typographyThe typography
The typography
 
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 ppt
Typography pptTypography ppt
Typography ppt
 
Typography - History, Basics and Trends
Typography - History, Basics and TrendsTypography - History, Basics and Trends
Typography - History, Basics and Trends
 
Typography Essentials: Part 2
Typography Essentials: Part 2Typography Essentials: Part 2
Typography Essentials: Part 2
 
Typography Fundamentals
Typography FundamentalsTypography Fundamentals
Typography Fundamentals
 
typography
 typography typography
typography
 
The Power of Typography
The Power of TypographyThe Power of Typography
The Power of Typography
 
Logo Design basics
Logo Design basicsLogo Design basics
Logo Design basics
 
Graphic Design
Graphic DesignGraphic Design
Graphic Design
 
Graphic Design 101
Graphic Design 101Graphic Design 101
Graphic Design 101
 
Intro to Typography
Intro to TypographyIntro to Typography
Intro to Typography
 
Graphic design slideshow
Graphic design slideshow Graphic design slideshow
Graphic design slideshow
 
Typography
TypographyTypography
Typography
 
Design Fundamentals
Design FundamentalsDesign Fundamentals
Design Fundamentals
 
Elements of Graphic Design
Elements of Graphic DesignElements of Graphic Design
Elements of Graphic Design
 
The History of Graphic Design
The History of Graphic DesignThe History of Graphic Design
The History 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
 
An Introduction To Graphic Design
An Introduction To Graphic DesignAn Introduction To Graphic Design
An Introduction To Graphic Design
 

Similar a Typography

Week 7_Chapter 7_typography.pptx
Week 7_Chapter 7_typography.pptxWeek 7_Chapter 7_typography.pptx
Week 7_Chapter 7_typography.pptxWahyuRafdinal1
 
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_1David 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 bookJada Cash
 
Type classification
Type classificationType classification
Type classificationKevin 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 YouRavi Bhadauria
 
Basic to Mastering Typography
Basic to Mastering TypographyBasic to Mastering Typography
Basic to Mastering TypographyShahria 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 webAna 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
 

Similar a 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
 

Último

Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 

Último (19)

Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
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
  • 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