SlideShare a Scribd company logo
1 of 19
The Design Universal Principles
Typography
What is typography?
• Design is about
  communication, and even
  with the power of images,
  words remain at the core of
  how we communicate.
• Typography is the practice
  of visually representing
  words.
Type conveys a meaning  the face, size,
weight, color etc.. They all add to the message.
What is typography?
• Remember: legibility is
  important AND the content is
  the king.
• Legibility comes from various
  things – spacing, letter shape,
  size, weight..
• Both content and presentation
  have direct effect on the
  message we convey
Associating meaning with
type
Different typefaces have different character
which adds to the message
Associating meaning with
type
The first impression is important

                                | Diploma




                                | Bauhaus




                                | Furby regular
How type works?


          •Type communicates visually with
          curves, corners, variation, visual
          balance etc
          •Anatomy of a letter
          http://www.counterspace.us/typogra
How type works?
• Typefaces come in variety of styles;
  Old-style, Transitional, Modern,
  Egyptian/slab-serif, Sans-serif
• Sans-serifs can be further classified realist,
  geometric & humanist faces
Serif & sans-serif?

• This is text written with a serif
  typeface
• This is text written with a
  serif typeface
Serif & sans-serif?
• serif : A stroke added usually to the
  beginning or the end of a letter
• sans: ”without”
A small glossary of
typographic terms

                 Letterspacing
                   unnevenly spaced letters
           can disrupt our ability to
           distiguish words
A small glossary of
typographic terms

                                      Line-height (leading)
                                         can have great impact on
                                legibility of text passages.




Sami Niemelä | sn@neocite.com
A small glossary of
  typographic terms
           Line length
         The main issue for the reader is the disruption
of having to go from the end of one line to the
beginning of the next. When lines are too long this can
be quite difficult because of the sheer distance the eye
has to travel. On the other hand,
if lines are set
extremely short,
the reader will
have to switch
lines much more often.
  Sami Niemelä | sn@neocite.com
A small glossary of
  typographic terms
           X-height
           Has a great impact on legibility:




           Both typefaces are set on the exact same size
but
           the readability varies greatly
  Sami Niemelä | sn@neocite.com
Good typography on web
 design
• The biggest problem for good online
  typography is the screen resolution




 Sami Niemelä | sn@neocite.com
Rule of Thirds!
• Don’t place anything directly in center!
• No bull’s eye!
Your First Assignment…
• 2. Going to any of the website address' listed on
  class website, find 1 example of a logo design that
  you find visually appealing and uses:
• A. Size
• B. Weight (light vs. dark)
• C. Form (shapes)
• D. Rule of Thirds (don’t center!)
• E. Direction
• F. Color
                                        Form, Color,
                                        Weight
• Choose examples that       Color or Direction
  you could possibly
  show your
  PERSONALITY in
  Font style and your
  Logo Design
                               Rule of Thirds


• 2. Save example in
  folder on your desktop
  computer. Label file for
  each item listed in A-F.
Color           Direction   Form




Rule of Thirds    Size       Weight

More Related Content

What's hot

A crash course in typography
A crash course in typographyA crash course in typography
A crash course in typographyMigle Migle
 
The Power of Typography
The Power of TypographyThe Power of Typography
The Power of Typography[x]cube LABS
 
1.01 Typography PowerPoint
1.01 Typography PowerPoint1.01 Typography PowerPoint
1.01 Typography PowerPointcindymartin
 
Learn more About Typography Art Technique
Learn more About Typography Art TechniqueLearn more About Typography Art Technique
Learn more About Typography Art TechniqueRavi Bhadauria
 
Tips and Tricks how to use Typography
Tips and Tricks how to use TypographyTips and Tricks how to use Typography
Tips and Tricks how to use TypographyRavi Bhadauria
 
Designing your own font
Designing your own fontDesigning your own font
Designing your own fontiamlejen
 
Type faces and letter forms finished 2
Type faces and letter forms finished 2Type faces and letter forms finished 2
Type faces and letter forms finished 2karan singh
 
Sans-Serif Vs. Serif Fonts - Presentation by Feroza Ali
Sans-Serif Vs. Serif Fonts - Presentation by Feroza AliSans-Serif Vs. Serif Fonts - Presentation by Feroza Ali
Sans-Serif Vs. Serif Fonts - Presentation by Feroza AliHamad Pervaiz
 
Typography 101: The Basics
Typography 101: The BasicsTypography 101: The Basics
Typography 101: The BasicsMainstreethost
 
Typography teaching presentation
Typography teaching presentationTypography teaching presentation
Typography teaching presentationBrianna Morris
 
The dos and donts of good presentations
The dos and donts of good presentationsThe dos and donts of good presentations
The dos and donts of good presentationsNthabiseng Radebe
 
Typography Essentials: Part 1
Typography Essentials: Part 1Typography Essentials: Part 1
Typography Essentials: Part 1Jennifer Janviere
 
Basic to Mastering Typography
Basic to Mastering TypographyBasic to Mastering Typography
Basic to Mastering TypographyShahria Hossain
 
Presentation1
Presentation1Presentation1
Presentation1patreng25
 
Typecurious: A Typography Crash Course
Typecurious: A Typography Crash CourseTypecurious: A Typography Crash Course
Typecurious: A Typography Crash CourseDigital Surgeons
 

What's hot (20)

A crash course in typography
A crash course in typographyA crash course in typography
A crash course in typography
 
Typography class 1
Typography class 1Typography class 1
Typography class 1
 
The Power of Typography
The Power of TypographyThe Power of Typography
The Power of Typography
 
Design for Blogs
Design for BlogsDesign for Blogs
Design for Blogs
 
1.01 Typography PowerPoint
1.01 Typography PowerPoint1.01 Typography PowerPoint
1.01 Typography PowerPoint
 
Learn more About Typography Art Technique
Learn more About Typography Art TechniqueLearn more About Typography Art Technique
Learn more About Typography Art Technique
 
Tips and Tricks how to use Typography
Tips and Tricks how to use TypographyTips and Tricks how to use Typography
Tips and Tricks how to use Typography
 
Designing your own font
Designing your own fontDesigning your own font
Designing your own font
 
Type faces and letter forms finished 2
Type faces and letter forms finished 2Type faces and letter forms finished 2
Type faces and letter forms finished 2
 
Sans-Serif Vs. Serif Fonts - Presentation by Feroza Ali
Sans-Serif Vs. Serif Fonts - Presentation by Feroza AliSans-Serif Vs. Serif Fonts - Presentation by Feroza Ali
Sans-Serif Vs. Serif Fonts - Presentation by Feroza Ali
 
Rob design
Rob designRob design
Rob design
 
Typography 101: The Basics
Typography 101: The BasicsTypography 101: The Basics
Typography 101: The Basics
 
Typography teaching presentation
Typography teaching presentationTypography teaching presentation
Typography teaching presentation
 
Science of font
Science of fontScience of font
Science of font
 
Typography
TypographyTypography
Typography
 
The dos and donts of good presentations
The dos and donts of good presentationsThe dos and donts of good presentations
The dos and donts of good presentations
 
Typography Essentials: Part 1
Typography Essentials: Part 1Typography Essentials: Part 1
Typography Essentials: Part 1
 
Basic to Mastering Typography
Basic to Mastering TypographyBasic to Mastering Typography
Basic to Mastering Typography
 
Presentation1
Presentation1Presentation1
Presentation1
 
Typecurious: A Typography Crash Course
Typecurious: A Typography Crash CourseTypecurious: A Typography Crash Course
Typecurious: A Typography Crash Course
 

Viewers also liked

Artist influenced slideshow 2 d
Artist influenced slideshow   2 dArtist influenced slideshow   2 d
Artist influenced slideshow 2 dBrooke Nelson
 
Visual arts sketchbooks SEMESTER 1: #1-20
Visual arts sketchbooks SEMESTER 1: #1-20Visual arts sketchbooks SEMESTER 1: #1-20
Visual arts sketchbooks SEMESTER 1: #1-20Brooke Nelson
 
Intro to comics slideshow
Intro to comics slideshowIntro to comics slideshow
Intro to comics slideshowBrooke Nelson
 
Comic book unit sketchbook assignments 1
Comic book unit   sketchbook assignments 1Comic book unit   sketchbook assignments 1
Comic book unit sketchbook assignments 1Brooke Nelson
 
Layout and paneling comics
Layout and paneling comicsLayout and paneling comics
Layout and paneling comicsBrooke Nelson
 

Viewers also liked (7)

Artist influenced slideshow 2 d
Artist influenced slideshow   2 dArtist influenced slideshow   2 d
Artist influenced slideshow 2 d
 
Visual arts sketchbooks SEMESTER 1: #1-20
Visual arts sketchbooks SEMESTER 1: #1-20Visual arts sketchbooks SEMESTER 1: #1-20
Visual arts sketchbooks SEMESTER 1: #1-20
 
Intro to comics slideshow
Intro to comics slideshowIntro to comics slideshow
Intro to comics slideshow
 
Stained glass
Stained glassStained glass
Stained glass
 
Pop Art PDF
Pop Art PDFPop Art PDF
Pop Art PDF
 
Comic book unit sketchbook assignments 1
Comic book unit   sketchbook assignments 1Comic book unit   sketchbook assignments 1
Comic book unit sketchbook assignments 1
 
Layout and paneling comics
Layout and paneling comicsLayout and paneling comics
Layout and paneling comics
 

Similar to The Design Universal Principles of Typography

Similar to The Design Universal Principles of Typography (20)

Font new edit
Font new editFont new edit
Font new edit
 
Texture and typography
Texture and typographyTexture and typography
Texture and typography
 
Typography in UI Design
Typography in UI DesignTypography in UI Design
Typography in UI Design
 
Text-Elements of multimedia
Text-Elements of multimediaText-Elements of multimedia
Text-Elements of multimedia
 
Text
TextText
Text
 
Typography3 bh
Typography3 bhTypography3 bh
Typography3 bh
 
CHAPTER – 3 Text
CHAPTER – 3    TextCHAPTER – 3    Text
CHAPTER – 3 Text
 
11. Typography data visualization .pdf
11. Typography data visualization .pdf11. Typography data visualization .pdf
11. Typography data visualization .pdf
 
Typography manual2pages
Typography manual2pagesTypography manual2pages
Typography manual2pages
 
Lettering
LetteringLettering
Lettering
 
Text
TextText
Text
 
what is Font in multimedia
 what is Font in multimedia what is Font in multimedia
what is Font in multimedia
 
Typography
TypographyTypography
Typography
 
Course Content Considerations
Course Content ConsiderationsCourse Content Considerations
Course Content Considerations
 
An introduction to web graphics lesson 1 (c by)
An introduction to web graphics   lesson 1 (c by)An introduction to web graphics   lesson 1 (c by)
An introduction to web graphics lesson 1 (c by)
 
Unit 2 graphics
Unit 2 graphicsUnit 2 graphics
Unit 2 graphics
 
Fonts!
Fonts!Fonts!
Fonts!
 
Midterm review
Midterm reviewMidterm review
Midterm review
 
Make your school magazine look professional
Make your school magazine look professionalMake your school magazine look professional
Make your school magazine look professional
 
Design concepts
Design conceptsDesign concepts
Design concepts
 

More from Brooke Nelson

2016 forced perspective
2016 forced perspective2016 forced perspective
2016 forced perspectiveBrooke Nelson
 
Warm up #8 photogram
Warm up #8 photogramWarm up #8 photogram
Warm up #8 photogramBrooke Nelson
 
Powerpointdayofdeadslideshow
PowerpointdayofdeadslideshowPowerpointdayofdeadslideshow
PowerpointdayofdeadslideshowBrooke Nelson
 
Vanishing point slideshow
Vanishing point slideshowVanishing point slideshow
Vanishing point slideshowBrooke Nelson
 
Depth of field and texture
Depth of field and textureDepth of field and texture
Depth of field and textureBrooke Nelson
 
Warm up 2 line fill frame
Warm up 2 line fill frameWarm up 2 line fill frame
Warm up 2 line fill frameBrooke Nelson
 
5 elements principles of photo
5 elements principles of photo5 elements principles of photo
5 elements principles of photoBrooke Nelson
 
photo warm ups rule of thirds
photo warm ups rule of thirdsphoto warm ups rule of thirds
photo warm ups rule of thirdsBrooke Nelson
 
6 word memoir slideshow
6 word memoir slideshow6 word memoir slideshow
6 word memoir slideshowBrooke Nelson
 
4 oscar kim_briana_presentation
4 oscar kim_briana_presentation4 oscar kim_briana_presentation
4 oscar kim_briana_presentationBrooke Nelson
 
6 word memoir_photo_presentation
6 word memoir_photo_presentation6 word memoir_photo_presentation
6 word memoir_photo_presentationBrooke Nelson
 
Example photo portfolio 2016
Example photo portfolio 2016Example photo portfolio 2016
Example photo portfolio 2016Brooke Nelson
 
Final projects slideshow
Final projects slideshowFinal projects slideshow
Final projects slideshowBrooke Nelson
 
Pop art warhol 9_presentation2
Pop art warhol 9_presentation2Pop art warhol 9_presentation2
Pop art warhol 9_presentation2Brooke Nelson
 
Slideshow ABC PHOTOgraphy
Slideshow ABC PHOTOgraphySlideshow ABC PHOTOgraphy
Slideshow ABC PHOTOgraphyBrooke Nelson
 

More from Brooke Nelson (20)

2016 forced perspective
2016 forced perspective2016 forced perspective
2016 forced perspective
 
Warm up #8 photogram
Warm up #8 photogramWarm up #8 photogram
Warm up #8 photogram
 
Cyanotype slideshow
Cyanotype slideshowCyanotype slideshow
Cyanotype slideshow
 
Powerpointdayofdeadslideshow
PowerpointdayofdeadslideshowPowerpointdayofdeadslideshow
Powerpointdayofdeadslideshow
 
Vanishing point slideshow
Vanishing point slideshowVanishing point slideshow
Vanishing point slideshow
 
Shallow DOF
Shallow DOF Shallow DOF
Shallow DOF
 
Depth of field and texture
Depth of field and textureDepth of field and texture
Depth of field and texture
 
Warm up 2 line fill frame
Warm up 2 line fill frameWarm up 2 line fill frame
Warm up 2 line fill frame
 
5 elements principles of photo
5 elements principles of photo5 elements principles of photo
5 elements principles of photo
 
photo warm ups rule of thirds
photo warm ups rule of thirdsphoto warm ups rule of thirds
photo warm ups rule of thirds
 
6 word memoir slideshow
6 word memoir slideshow6 word memoir slideshow
6 word memoir slideshow
 
4 oscar kim_briana_presentation
4 oscar kim_briana_presentation4 oscar kim_briana_presentation
4 oscar kim_briana_presentation
 
6 word memoir_photo_presentation
6 word memoir_photo_presentation6 word memoir_photo_presentation
6 word memoir_photo_presentation
 
Example photo portfolio 2016
Example photo portfolio 2016Example photo portfolio 2016
Example photo portfolio 2016
 
Final projects slideshow
Final projects slideshowFinal projects slideshow
Final projects slideshow
 
Cyanotype slideshow
Cyanotype slideshowCyanotype slideshow
Cyanotype slideshow
 
Line & symmetry
Line & symmetryLine & symmetry
Line & symmetry
 
Pop art warhol 9_presentation2
Pop art warhol 9_presentation2Pop art warhol 9_presentation2
Pop art warhol 9_presentation2
 
Pop art slideshow
Pop art slideshowPop art slideshow
Pop art slideshow
 
Slideshow ABC PHOTOgraphy
Slideshow ABC PHOTOgraphySlideshow ABC PHOTOgraphy
Slideshow ABC PHOTOgraphy
 

The Design Universal Principles of Typography

  • 1. The Design Universal Principles Typography
  • 2. What is typography? • Design is about communication, and even with the power of images, words remain at the core of how we communicate. • Typography is the practice of visually representing words.
  • 3. Type conveys a meaning  the face, size, weight, color etc.. They all add to the message.
  • 4. What is typography? • Remember: legibility is important AND the content is the king. • Legibility comes from various things – spacing, letter shape, size, weight.. • Both content and presentation have direct effect on the message we convey
  • 5. Associating meaning with type Different typefaces have different character which adds to the message
  • 6. Associating meaning with type The first impression is important | Diploma | Bauhaus | Furby regular
  • 7. How type works? •Type communicates visually with curves, corners, variation, visual balance etc •Anatomy of a letter http://www.counterspace.us/typogra
  • 8. How type works? • Typefaces come in variety of styles; Old-style, Transitional, Modern, Egyptian/slab-serif, Sans-serif • Sans-serifs can be further classified realist, geometric & humanist faces
  • 9. Serif & sans-serif? • This is text written with a serif typeface • This is text written with a serif typeface
  • 10. Serif & sans-serif? • serif : A stroke added usually to the beginning or the end of a letter • sans: ”without”
  • 11. A small glossary of typographic terms Letterspacing unnevenly spaced letters can disrupt our ability to distiguish words
  • 12. A small glossary of typographic terms Line-height (leading) can have great impact on legibility of text passages. Sami Niemelä | sn@neocite.com
  • 13. A small glossary of typographic terms Line length The main issue for the reader is the disruption of having to go from the end of one line to the beginning of the next. When lines are too long this can be quite difficult because of the sheer distance the eye has to travel. On the other hand, if lines are set extremely short, the reader will have to switch lines much more often. Sami Niemelä | sn@neocite.com
  • 14. A small glossary of typographic terms X-height Has a great impact on legibility: Both typefaces are set on the exact same size but the readability varies greatly Sami Niemelä | sn@neocite.com
  • 15. Good typography on web design • The biggest problem for good online typography is the screen resolution Sami Niemelä | sn@neocite.com
  • 16. Rule of Thirds! • Don’t place anything directly in center! • No bull’s eye!
  • 17. Your First Assignment… • 2. Going to any of the website address' listed on class website, find 1 example of a logo design that you find visually appealing and uses: • A. Size • B. Weight (light vs. dark) • C. Form (shapes) • D. Rule of Thirds (don’t center!) • E. Direction • F. Color Form, Color, Weight
  • 18. • Choose examples that Color or Direction you could possibly show your PERSONALITY in Font style and your Logo Design Rule of Thirds • 2. Save example in folder on your desktop computer. Label file for each item listed in A-F.
  • 19. Color Direction Form Rule of Thirds Size Weight