SlideShare a Scribd company logo
1 of 19
Download to read offline
What about Typography?


                         COM305
Typography
Legibility
• Speed and ease with
  which individual letters
  can be recognized
Readability
• Likelihood that your
  readers will pick up
  material, read it and
  take action
Typography
• Case
   – Lower and upper
• X-height
   – The height of the lower
     case letter x
• Ascender
   – Any part of a letter that
     goes above the x-height
• Descender
   – Any part of the letter that
     goes below the baseline.
• Cap height
   – Height of the capital
     letters of a typeface
Pallets
                          •Font
                           •Style
                     •Font Size     • Leading
                      •Kerning      • Tracking
                 •Vertical Scale    • Horizontal Scale
                 •Baseline Shift    • Skew




                     •Left Indent   • Right Indent
          •First Line Left Indent   • Last Line Right Indent
                   •Space Before    • Space After
          •Drop Cap # of Lines      • Drop Cap on or more characters
Terms
• Typeface                        • Baseline
   – Single set of letter forms     – Is the line invisible line
• Type Family                         letters “sit” on
   – Several font designs         • Character
     representing a range of        – Single letter form or unit
     style variations with a      • Counter
     common base.
                                    – Space enclosed by the
• Type style                          strokes of a letter
   – light, medium , bold,
     italic, etc.
Serif vs. San-Serif
            Screen                      Print
Heading     Heads: Minimum of 2         Heads: Minimum of 2
            times larger than           times larger than subheads
            subheads
                                        Subheads: minimum of 2
            Subheads: minimum of 2      pts larger than body copy
            pts larger than body copy

Body        San-Serif                   Serif

Weight      Bold                        Bold
Captions    Same size as body text      2 pts larger or 1 pt smaller
Serif Text
• Has hooks, feet and brackets   •   Times New Roman
• Highly readable – in print
                                 •   Book m an
                                 •   Garamond
                                 •   Palatino
                                 •   Baskerville
                                 •   Bodoni
                                 •   Rockwell
                                 •   Palatino
San-Serif Text
• Perceived as modern,            •   Helvetica
  cosmopolitan, scientific and
  up-to-date                      •   Futura
• Read less accurately – unless
  on screen
                                  •   Gill Sans
                                  •   Arial
                                  •   Myriad
                                  •   Century Gothic
                                  •   Calibri
                                  •   Franklin Gothic
                                  •   Tahoma
Font types continued
Justification
Ragged Right Text       Justified Text               Centered Text          Ragged Left Text
This is the standard    Potential problem: Potential problem:              Potential problem:
for justification       rivers of white space    Beginning of each            Demands more
                        lead to vertical pull  line is difficult to find     effort from your
Problems can be         “Ladders are created                                           reader
overcome if your use by             repeating
other justification for hyphens
no more than 30% of More than three is a
your layout             “red alert” Narrow
                        columns         create
                        uneven            word
                        spacing
Adding Emphasis
• Use in small doses
• “It’s critically important that all people volunteer at least one time”

• “It’s critically important that all people volunteer at least one time”

• “It’s critically important that all people volunteer at least one time”

• “It’s critically important that all people volunteer at least one time”

• “It’s critically important that all people volunteer at least one time”

• “It’s critically important that all people volunteer at least one time”

• “It’s CRITICALLY IMPORTANT that all people volunteer at least one time”
Hard-To-Read Text
• LINES OF COPY SHOULD BE INVITING TO READ, NOT AN OBSTACLE
  TO OVERCOME

• Lines of copy should be inviting to read, not an obstacle to overcome

• LINES OF COPY SHOULD BE INVITING TO READ, NOT
  AN OBSTACLE TO OVERCOME

• Lines of copy should be inviting to read, not an obstacle to overcome

• Lines of copy should be inviting to read, not an obstacle
  to overcome
Tracking
 – Adjusts space in blocks of text
Kerning
 – Adjusts space between selected letters.
Time to play
• Mother and Child
• Explode
• Expansion
• The quick brown fox jumped over the lazy
  dog
• Just wait until you meet my family
Time to play
Time to play

More Related Content

What's hot

Swot analysis design 3 powerpoint presentation templates.
Swot analysis design 3 powerpoint presentation templates.Swot analysis design 3 powerpoint presentation templates.
Swot analysis design 3 powerpoint presentation templates.SlideTeam.net
 
Template for swot analysis style design 3 powerpoint ppt slides.
Template for swot analysis style design 3 powerpoint ppt slides.Template for swot analysis style design 3 powerpoint ppt slides.
Template for swot analysis style design 3 powerpoint ppt slides.SlideTeam.net
 
Template for swot analysis design 3 powerpoint ppt templates.
Template for swot analysis design 3 powerpoint ppt templates.Template for swot analysis design 3 powerpoint ppt templates.
Template for swot analysis design 3 powerpoint ppt templates.SlideTeam.net
 
Template for swot analysis style design 3 powerpoint presentation slides.
Template for swot analysis style design 3 powerpoint presentation slides.Template for swot analysis style design 3 powerpoint presentation slides.
Template for swot analysis style design 3 powerpoint presentation slides.SlideTeam.net
 
Template for swot analysis design 3 powerpoint presentation slides.
Template for swot analysis design 3 powerpoint presentation slides.Template for swot analysis design 3 powerpoint presentation slides.
Template for swot analysis design 3 powerpoint presentation slides.SlideTeam.net
 
Swot analysis design 3 powerpoint presentation slides.
Swot analysis design 3 powerpoint presentation slides.Swot analysis design 3 powerpoint presentation slides.
Swot analysis design 3 powerpoint presentation slides.SlideTeam.net
 
Swot analysis style design 3 powerpoint ppt templates.
Swot analysis style design 3 powerpoint ppt templates.Swot analysis style design 3 powerpoint ppt templates.
Swot analysis style design 3 powerpoint ppt templates.SlideTeam.net
 
Template for swot analysis design 3 powerpoint ppt slides.
Template for swot analysis design 3 powerpoint ppt slides.Template for swot analysis design 3 powerpoint ppt slides.
Template for swot analysis design 3 powerpoint ppt slides.SlideTeam.net
 
Template for swot analysis style design 3 powerpoint presentation templates.
Template for swot analysis style design 3 powerpoint presentation templates.Template for swot analysis style design 3 powerpoint presentation templates.
Template for swot analysis style design 3 powerpoint presentation templates.SlideTeam.net
 

What's hot (10)

Swot analysis design 3 powerpoint presentation templates.
Swot analysis design 3 powerpoint presentation templates.Swot analysis design 3 powerpoint presentation templates.
Swot analysis design 3 powerpoint presentation templates.
 
Template for swot analysis style design 3 powerpoint ppt slides.
Template for swot analysis style design 3 powerpoint ppt slides.Template for swot analysis style design 3 powerpoint ppt slides.
Template for swot analysis style design 3 powerpoint ppt slides.
 
Template for swot analysis design 3 powerpoint ppt templates.
Template for swot analysis design 3 powerpoint ppt templates.Template for swot analysis design 3 powerpoint ppt templates.
Template for swot analysis design 3 powerpoint ppt templates.
 
Template for swot analysis style design 3 powerpoint presentation slides.
Template for swot analysis style design 3 powerpoint presentation slides.Template for swot analysis style design 3 powerpoint presentation slides.
Template for swot analysis style design 3 powerpoint presentation slides.
 
Template for swot analysis design 3 powerpoint presentation slides.
Template for swot analysis design 3 powerpoint presentation slides.Template for swot analysis design 3 powerpoint presentation slides.
Template for swot analysis design 3 powerpoint presentation slides.
 
Swot analysis design 3 powerpoint presentation slides.
Swot analysis design 3 powerpoint presentation slides.Swot analysis design 3 powerpoint presentation slides.
Swot analysis design 3 powerpoint presentation slides.
 
Swot analysis style design 3 powerpoint ppt templates.
Swot analysis style design 3 powerpoint ppt templates.Swot analysis style design 3 powerpoint ppt templates.
Swot analysis style design 3 powerpoint ppt templates.
 
Template for swot analysis design 3 powerpoint ppt slides.
Template for swot analysis design 3 powerpoint ppt slides.Template for swot analysis design 3 powerpoint ppt slides.
Template for swot analysis design 3 powerpoint ppt slides.
 
Template for swot analysis style design 3 powerpoint presentation templates.
Template for swot analysis style design 3 powerpoint presentation templates.Template for swot analysis style design 3 powerpoint presentation templates.
Template for swot analysis style design 3 powerpoint presentation templates.
 
Be strategic
Be strategicBe strategic
Be strategic
 

Viewers also liked (7)

Evaluation question 2
Evaluation question 2Evaluation question 2
Evaluation question 2
 
Com202 photo manipulation ethics
Com202 photo manipulation ethicsCom202 photo manipulation ethics
Com202 photo manipulation ethics
 
Html intro
Html introHtml intro
Html intro
 
Commercial Printing Options
Commercial Printing OptionsCommercial Printing Options
Commercial Printing Options
 
Copyright
CopyrightCopyright
Copyright
 
InDesign intro
InDesign introInDesign intro
InDesign intro
 
Visual communication and the web
Visual communication and the webVisual communication and the web
Visual communication and the web
 

Similar to Typography

1.01 Typography Usability and Readability
1.01 Typography Usability and Readability1.01 Typography Usability and Readability
1.01 Typography Usability and ReadabilityMsGilbert
 
Typography, A Presentation
Typography, A PresentationTypography, A Presentation
Typography, A PresentationGraeme Smith
 
Fundamental concept of typography
Fundamental concept of typographyFundamental concept of typography
Fundamental concept of typographyAnna Zara
 
Learn more About Typography Art Technique
Learn more About Typography Art TechniqueLearn more About Typography Art Technique
Learn more About Typography Art TechniqueRavi Bhadauria
 
Typecurious: A Typography Crash Course
Typecurious: A Typography Crash CourseTypecurious: A Typography Crash Course
Typecurious: A Typography Crash CourseDigital Surgeons
 
typography 101.pdf
typography 101.pdftypography 101.pdf
typography 101.pdfjb00007
 

Similar to Typography (12)

Typography
TypographyTypography
Typography
 
Typography class 2
Typography class 2Typography class 2
Typography class 2
 
1.01 Typography Usability and Readability
1.01 Typography Usability and Readability1.01 Typography Usability and Readability
1.01 Typography Usability and Readability
 
Typography Basics for DTP
Typography Basics for DTPTypography Basics for DTP
Typography Basics for DTP
 
Typography, A Presentation
Typography, A PresentationTypography, A Presentation
Typography, A Presentation
 
LETTERING STYLES.pptx
LETTERING STYLES.pptxLETTERING STYLES.pptx
LETTERING STYLES.pptx
 
Fundamental concept of typography
Fundamental concept of typographyFundamental concept of typography
Fundamental concept of typography
 
Learn more About Typography Art Technique
Learn more About Typography Art TechniqueLearn more About Typography Art Technique
Learn more About Typography Art Technique
 
10 typeface basics.fi_xed
10 typeface basics.fi_xed10 typeface basics.fi_xed
10 typeface basics.fi_xed
 
Font new edit
Font new editFont new edit
Font new edit
 
Typecurious: A Typography Crash Course
Typecurious: A Typography Crash CourseTypecurious: A Typography Crash Course
Typecurious: A Typography Crash Course
 
typography 101.pdf
typography 101.pdftypography 101.pdf
typography 101.pdf
 

More from Danielle Oser, APR

Design planning and stock images
Design planning and stock imagesDesign planning and stock images
Design planning and stock imagesDanielle Oser, APR
 
Adobe illustrator getting started
Adobe illustrator getting startedAdobe illustrator getting started
Adobe illustrator getting startedDanielle Oser, APR
 
Visual communication the more you know the more you see
Visual communication the more you know the more you seeVisual communication the more you know the more you see
Visual communication the more you know the more you seeDanielle Oser, APR
 
Visual communication and computers
Visual communication and computersVisual communication and computers
Visual communication and computersDanielle Oser, APR
 
Visual communication and television
Visual communication and televisionVisual communication and television
Visual communication and televisionDanielle Oser, APR
 
Visual communication and movies
Visual communication and moviesVisual communication and movies
Visual communication and moviesDanielle Oser, APR
 
Visual communication and photography
Visual communication and photographyVisual communication and photography
Visual communication and photographyDanielle Oser, APR
 
Visual communication and Cartoons
Visual communication and CartoonsVisual communication and Cartoons
Visual communication and CartoonsDanielle Oser, APR
 
Visual communication and Infographics
Visual communication and InfographicsVisual communication and Infographics
Visual communication and InfographicsDanielle Oser, APR
 
Visual communication and typography
Visual communication and typographyVisual communication and typography
Visual communication and typographyDanielle Oser, APR
 
Visual communication and graphic design
Visual communication and graphic designVisual communication and graphic design
Visual communication and graphic designDanielle Oser, APR
 
Visual communication and Visual analysis
Visual communication and Visual analysisVisual communication and Visual analysis
Visual communication and Visual analysisDanielle Oser, APR
 
Visual communication and Visual stereotypes
Visual communication and Visual stereotypesVisual communication and Visual stereotypes
Visual communication and Visual stereotypesDanielle Oser, APR
 
Visual communication and Visual persuasion
Visual communication and Visual persuasionVisual communication and Visual persuasion
Visual communication and Visual persuasionDanielle Oser, APR
 
Visual communication and Visual communication theories
Visual communication and Visual communication theoriesVisual communication and Visual communication theories
Visual communication and Visual communication theoriesDanielle Oser, APR
 
Visual communication and Visual cues part two
Visual communication and Visual cues part twoVisual communication and Visual cues part two
Visual communication and Visual cues part twoDanielle Oser, APR
 
Visual communication and Visual cues part one
Visual communication and Visual cues part oneVisual communication and Visual cues part one
Visual communication and Visual cues part oneDanielle Oser, APR
 

More from Danielle Oser, APR (20)

Photo manipulation ethics
Photo manipulation ethicsPhoto manipulation ethics
Photo manipulation ethics
 
Design planning and stock images
Design planning and stock imagesDesign planning and stock images
Design planning and stock images
 
Desktop publishing intro
Desktop publishing introDesktop publishing intro
Desktop publishing intro
 
Adobe illustrator getting started
Adobe illustrator getting startedAdobe illustrator getting started
Adobe illustrator getting started
 
Copyright and stock images
Copyright and stock imagesCopyright and stock images
Copyright and stock images
 
Visual communication the more you know the more you see
Visual communication the more you know the more you seeVisual communication the more you know the more you see
Visual communication the more you know the more you see
 
Visual communication and computers
Visual communication and computersVisual communication and computers
Visual communication and computers
 
Visual communication and television
Visual communication and televisionVisual communication and television
Visual communication and television
 
Visual communication and movies
Visual communication and moviesVisual communication and movies
Visual communication and movies
 
Visual communication and photography
Visual communication and photographyVisual communication and photography
Visual communication and photography
 
Visual communication and Cartoons
Visual communication and CartoonsVisual communication and Cartoons
Visual communication and Cartoons
 
Visual communication and Infographics
Visual communication and InfographicsVisual communication and Infographics
Visual communication and Infographics
 
Visual communication and typography
Visual communication and typographyVisual communication and typography
Visual communication and typography
 
Visual communication and graphic design
Visual communication and graphic designVisual communication and graphic design
Visual communication and graphic design
 
Visual communication and Visual analysis
Visual communication and Visual analysisVisual communication and Visual analysis
Visual communication and Visual analysis
 
Visual communication and Visual stereotypes
Visual communication and Visual stereotypesVisual communication and Visual stereotypes
Visual communication and Visual stereotypes
 
Visual communication and Visual persuasion
Visual communication and Visual persuasionVisual communication and Visual persuasion
Visual communication and Visual persuasion
 
Visual communication and Visual communication theories
Visual communication and Visual communication theoriesVisual communication and Visual communication theories
Visual communication and Visual communication theories
 
Visual communication and Visual cues part two
Visual communication and Visual cues part twoVisual communication and Visual cues part two
Visual communication and Visual cues part two
 
Visual communication and Visual cues part one
Visual communication and Visual cues part oneVisual communication and Visual cues part one
Visual communication and Visual cues part one
 

Typography

  • 2.
  • 3. Typography Legibility • Speed and ease with which individual letters can be recognized Readability • Likelihood that your readers will pick up material, read it and take action
  • 4. Typography • Case – Lower and upper • X-height – The height of the lower case letter x • Ascender – Any part of a letter that goes above the x-height • Descender – Any part of the letter that goes below the baseline. • Cap height – Height of the capital letters of a typeface
  • 5. Pallets •Font •Style •Font Size • Leading •Kerning • Tracking •Vertical Scale • Horizontal Scale •Baseline Shift • Skew •Left Indent • Right Indent •First Line Left Indent • Last Line Right Indent •Space Before • Space After •Drop Cap # of Lines • Drop Cap on or more characters
  • 6. Terms • Typeface • Baseline – Single set of letter forms – Is the line invisible line • Type Family letters “sit” on – Several font designs • Character representing a range of – Single letter form or unit style variations with a • Counter common base. – Space enclosed by the • Type style strokes of a letter – light, medium , bold, italic, etc.
  • 7. Serif vs. San-Serif Screen Print Heading Heads: Minimum of 2 Heads: Minimum of 2 times larger than times larger than subheads subheads Subheads: minimum of 2 Subheads: minimum of 2 pts larger than body copy pts larger than body copy Body San-Serif Serif Weight Bold Bold Captions Same size as body text 2 pts larger or 1 pt smaller
  • 8. Serif Text • Has hooks, feet and brackets • Times New Roman • Highly readable – in print • Book m an • Garamond • Palatino • Baskerville • Bodoni • Rockwell • Palatino
  • 9. San-Serif Text • Perceived as modern, • Helvetica cosmopolitan, scientific and up-to-date • Futura • Read less accurately – unless on screen • Gill Sans • Arial • Myriad • Century Gothic • Calibri • Franklin Gothic • Tahoma
  • 10.
  • 12. Justification Ragged Right Text Justified Text Centered Text Ragged Left Text This is the standard Potential problem: Potential problem: Potential problem: for justification rivers of white space Beginning of each Demands more lead to vertical pull line is difficult to find effort from your Problems can be “Ladders are created reader overcome if your use by repeating other justification for hyphens no more than 30% of More than three is a your layout “red alert” Narrow columns create uneven word spacing
  • 13. Adding Emphasis • Use in small doses • “It’s critically important that all people volunteer at least one time” • “It’s critically important that all people volunteer at least one time” • “It’s critically important that all people volunteer at least one time” • “It’s critically important that all people volunteer at least one time” • “It’s critically important that all people volunteer at least one time” • “It’s critically important that all people volunteer at least one time” • “It’s CRITICALLY IMPORTANT that all people volunteer at least one time”
  • 14. Hard-To-Read Text • LINES OF COPY SHOULD BE INVITING TO READ, NOT AN OBSTACLE TO OVERCOME • Lines of copy should be inviting to read, not an obstacle to overcome • LINES OF COPY SHOULD BE INVITING TO READ, NOT AN OBSTACLE TO OVERCOME • Lines of copy should be inviting to read, not an obstacle to overcome • Lines of copy should be inviting to read, not an obstacle to overcome
  • 15. Tracking – Adjusts space in blocks of text
  • 16. Kerning – Adjusts space between selected letters.
  • 17. Time to play • Mother and Child • Explode • Expansion • The quick brown fox jumped over the lazy dog • Just wait until you meet my family