Your SlideShare is downloading. ×
0
T
                                                   H Y
                                                A P
             ...
Anatomy

        BASELINE



                            Hlgx
Tuesday, October 12, 2010
Anatomy

        CAP HEIGHT



                            Hlgx
Tuesday, October 12, 2010
Anatomy

        ASCENDER



                            Hlgx
Tuesday, October 12, 2010
Anatomy

        DESCENDER



                            Hlgx
Tuesday, October 12, 2010
Anatomy

        X HEIGHT



                            Hlgx
Tuesday, October 12, 2010
Anatomy

                                                                                                                 ...
Anatomy

        SERIFS



                            Hlgx
Tuesday, October 12, 2010
Anatomy

        SANS SERIF



                            Hlgx
Tuesday, October 12, 2010
Anatomy

        SANS (STYLIZED)



                            Hlgx
Tuesday, October 12, 2010
Anatomy

        WEIGHT (NORMAL - 400)



                            Hlgx
        p{
          font-weight: normal   100,...
Anatomy

        WEIGHT (BOLD - 700)



                              Hlgx
        p{
          font-weight: bold     100,...
Anatomy

        WEIGHT (OTHER)

        100 = thin           p{
        200 = extra-light         font-weight: 300;
     ...
Anatomy

        STYLE (OBLIQUE)



                              Hlgx
        p{
        font-style: oblique
        }


...
Anatomy

        STYLE (OBLIQUE)




        p{
        font-style: oblique
        }



Tuesday, October 12, 2010
Anatomy

        STYLE (ITALIC)



                             Hlgx
        p{
        font-style: italic
        }



Tu...
Readability

        LETTER SPACING (KERINING)



                            Hlgx
Tuesday, October 12, 2010
Readability

        LETTER SPACING (KERINING)



                            OVEN
Tuesday, October 12, 2010
Readability

        LETTER SPACING (KERINING)



                            OVEN
Tuesday, October 12, 2010
Readability

        LETTER SPACING (TRACKING)



                            Hlgx
Tuesday, October 12, 2010
Readability

        LETTER SPACING (TRACKING)



                            oven
Tuesday, October 12, 2010
Readability

        LETTER SPACING (TRACKING)



                            oven
Tuesday, October 12, 2010
Readability

        LETTER SPACING (TRACKING)




         h1 {
                            oven
           letter-spacin...
Readability

        WORD SPACING

        Turn off the oven
        p{
          word-spacing: 10px;
        }




Tuesda...
Readability

        WORD SPACING

        Turn off the oven
        Turn off the oven

Tuesday, October 12, 2010
Readability

        WORD SPACING

        Turn off the oven
        Turn off the oven
        Turn off the oven
        p...
Readability

        LIGATURES

        Turn off the oven


Tuesday, October 12, 2010
Readability

        LIGATURES

        Turn off the oven


Tuesday, October 12, 2010
Readability

        LIGATURES

        Turn off the oven
        Turn off the oven

Tuesday, October 12, 2010
Readability

        MONOSPACED (EM)

        Courier ham


Tuesday, October 12, 2010
Readability

        SIZE (EM)

        size     size       size   size   size   size   size   size
        .75 1.0       ...
Readability

        VERITCAL SPACING (LEADING)
        Lorem ipsum dolor sit amet, consectetur
        adipisicing elit, ...
Readability

        VERITCAL SPACING (LEADING)
        Lorem ipsum dolor sit amet, consectetur
        adipisicing elit, ...
Readability

        VERITCAL SPACING (LEADING)
        Lorem ipsum dolor sit amet, consectetur
        adipisicing elit, ...
Readability

        VERITCAL SPACING (LEADING)
        Lorem ipsum dolor sit amet, consectetur
        adipisicing elit, ...
Readability

        VERITCAL SPACING (LEADING)
        Lorem ipsum dolor sit amet, consectetur
        adipisicing elit, ...
Readability

        VERITCAL SPACING (LEADING)
        Lorem ipsum dolor sit amet, consectetur
        adipisicing elit, ...
Readability

        VERITCAL SPACING (LEADING)
        Lorem ipsum dolor sit amet, consectetur
        adipisicing elit, ...
Readability

        VERITCAL SPACING (LEADING)
        Lorem ipsum dolor sit amet, consectetur
        adipisicing elit, ...
Readability

        VERITCAL SPACING (COLOR)
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiu...
Readability

        VERITCAL SPACING (COLOR)
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiu...
Readability

        VERITCAL SPACING (COLOR)
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiu...
Readability

        VERITCAL SPACING (COLOR)
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiu...
Readability

        VERTICAL SPACING (PARAGRAPH)
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed ...
Readability

        VERTICAL SPACING (PARAGRAPH)
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed ...
Readability

        VERTICAL SPACING (BASELINE GRID)
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...
Readability

        VERTICAL SPACING (BASELINE GRID)
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...
Readability

        COLUMN WIDTH (620 px)
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eius...
Readability

        COLUMN WIDTH (620 px)
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eius...
Readability

        COLUMN WIDTH (420 px)
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eius...
Readability

        COLUMN WIDTH (80 px)
          Lorem ipsum dolor sit
        amet, consectetur
        adipisicing el...
Readability

        INDENTS
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
 ...
Readability

        ALIGNMENT (FLUSH LEFT)
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiu...
Readability

        ALIGNMENT (CENTERED)
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do ei...
Readability

        ALIGNMENT (FLUSH RIGHT)
                   Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...
Readability

        ALIGNMENT (JUSTIFIED)
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do ei...
Readability

        LINKS
   “ Lorem ipsum doloj sit game, consectetur       “Lorem ipsum doloj sit game, consectetur
   ...
Readability

        ALL CAPS
       ALL CAPS TYPE CAN ADD EMPHASIS. BUT TOO
       MUCH TYPE IN ALL CAPS IS VERY HARD TO ...
Readability

        ALL CAPS
       Requires tight leading – less than the font size




        HIRE                    ...
Readability

        ALL CAPS
       It can also look good with loose tracking.




        JU STIC E

        h1 {
      ...
Web fonts




Tuesday, October 12, 2010
Web fonts

        FORMATS

        .ttf                .otf   .svg   .eot   .woff




Tuesday, October 12, 2010
Web fonts

        @fontface

        .ttf                .otf   .svg   .eot   .woff




Tuesday, October 12, 2010
Web fonts




Tuesday, October 12, 2010
Web fonts

        @fontface
                               29.95%

                               11.4%

                ...
Web fonts

        @fontface


        .ttf
        .otf
        .svg
        .eot




Tuesday, October 12, 2010
Web fonts

        @fontface


        .ttf
        .otf
        .svg
        .eot
        .woff               IE9   3.6  ...
Web fonts

        @fontface
        @font-face {
          font-family: "Anivers";
          src: url("Anivers.eot");
   ...
Web fonts

        TYPEKIT
        HTML
        <head>
          <script type="text/javascript" src="http://use.typekit.co...
Web fonts

        TYPEKIT                 IE6           3.5             4.0249.4   3.1        10.54



        HTML
     ...
Web fonts

        TYPEKIT                   2.2                     Experimental



        HTML
        <head>
         ...
PhotoShop


        FONT                WEIGHT
        SIZE                LEADING
        KERNING             TRACKING


...
PhotoShop


        ALIGNMENT
        INDENT LEFT         INDENT RIGHT
        INDENT 1ST
        SPACE               SPAC...
Upcoming SlideShare
Loading in...5
×

Web typography

2,218

Published on

Type basics and the CSS selectors that control them.

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,218
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
75
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Web typography"

  1. 1. T H Y A P G What does it sayR O about you? P T Y IG N E S D & BY LEN D E G RO OT Tuesday, October 12, 2010
  2. 2. Anatomy BASELINE Hlgx Tuesday, October 12, 2010
  3. 3. Anatomy CAP HEIGHT Hlgx Tuesday, October 12, 2010
  4. 4. Anatomy ASCENDER Hlgx Tuesday, October 12, 2010
  5. 5. Anatomy DESCENDER Hlgx Tuesday, October 12, 2010
  6. 6. Anatomy X HEIGHT Hlgx Tuesday, October 12, 2010
  7. 7. Anatomy a . . . . Quick Reference Ascender Handglovery Stem Terminal Ear Bowl Eye Shoulder Serif - - Crossbar Counter Aperture Bracket Axis Overshoot Link/Neck Loop/Lobe Tail Descender Typeface The upward vertical stem on some An imaginary line drawn from top to The curved part of the character that lowercase letters, such as ‘h’ and ‘b’, that bottom of a glyph bisecting the upper and encloses the circular or curved parts Anatomy extends above the x-height is the lower strokes is the axis. (counter) of some letters such as ‘d’ ‘b’, ‘o’, , ascender. ‘D’, and ‘B’ is the bowl. The imaginary line upon which the letters CREDIT: FontShop.com The aperture is the partially enclosed, in a font appear to rest. The bracket is a curved or wedge-like somewhat rounded negative space in connection between the stem and serif — Basic parts some characters such as ‘n’, ‘C’, ‘S’, the of some fonts. Not all serifs are lower part of ‘e’, or the upper part of a bracketed serifs. Tuesday, October 12, 2010typeface of a double-storey ‘a’.
  8. 8. Anatomy SERIFS Hlgx Tuesday, October 12, 2010
  9. 9. Anatomy SANS SERIF Hlgx Tuesday, October 12, 2010
  10. 10. Anatomy SANS (STYLIZED) Hlgx Tuesday, October 12, 2010
  11. 11. Anatomy WEIGHT (NORMAL - 400) Hlgx p{ font-weight: normal 100, 200, 300, 400, 500, 600, 700, 800, 900 } Tuesday, October 12, 2010
  12. 12. Anatomy WEIGHT (BOLD - 700) Hlgx p{ font-weight: bold 100, 200, 300, 400, 500, 600, 700, 800, 900 } Tuesday, October 12, 2010
  13. 13. Anatomy WEIGHT (OTHER) 100 = thin p{ 200 = extra-light font-weight: 300; 300 = light } 400 = normal, book 500 = medium p {font-weight: bolder} 600 = demi-bold p {font-weight: lighter} 700 = bold 800 = heavy 900 = black Tuesday, October 12, 2010
  14. 14. Anatomy STYLE (OBLIQUE) Hlgx p{ font-style: oblique } Tuesday, October 12, 2010
  15. 15. Anatomy STYLE (OBLIQUE) p{ font-style: oblique } Tuesday, October 12, 2010
  16. 16. Anatomy STYLE (ITALIC) Hlgx p{ font-style: italic } Tuesday, October 12, 2010
  17. 17. Readability LETTER SPACING (KERINING) Hlgx Tuesday, October 12, 2010
  18. 18. Readability LETTER SPACING (KERINING) OVEN Tuesday, October 12, 2010
  19. 19. Readability LETTER SPACING (KERINING) OVEN Tuesday, October 12, 2010
  20. 20. Readability LETTER SPACING (TRACKING) Hlgx Tuesday, October 12, 2010
  21. 21. Readability LETTER SPACING (TRACKING) oven Tuesday, October 12, 2010
  22. 22. Readability LETTER SPACING (TRACKING) oven Tuesday, October 12, 2010
  23. 23. Readability LETTER SPACING (TRACKING) h1 { oven letter-spacing: -3px; } Tuesday, October 12, 2010
  24. 24. Readability WORD SPACING Turn off the oven p{ word-spacing: 10px; } Tuesday, October 12, 2010
  25. 25. Readability WORD SPACING Turn off the oven Turn off the oven Tuesday, October 12, 2010
  26. 26. Readability WORD SPACING Turn off the oven Turn off the oven Turn off the oven p {word-spacing: 10px;} Tuesday, October 12, 2010
  27. 27. Readability LIGATURES Turn off the oven Tuesday, October 12, 2010
  28. 28. Readability LIGATURES Turn off the oven Tuesday, October 12, 2010
  29. 29. Readability LIGATURES Turn off the oven Turn off the oven Tuesday, October 12, 2010
  30. 30. Readability MONOSPACED (EM) Courier ham Tuesday, October 12, 2010
  31. 31. Readability SIZE (EM) size size size size size size size size .75 1.0 1.25 1.5 2.0 3.0 4.0 5.0 h1 { font-size: 2.5 em; } /* 40px/16=2.5em */ h2 { font-size: 1.875 em; } /* 30px/16=1.875em */ Tuesday, October 12, 2010
  32. 32. Readability VERITCAL SPACING (LEADING) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tuesday, October 12, 2010
  33. 33. Readability VERITCAL SPACING (LEADING) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. FONT: 16 PT LEADING: 16 PT Tuesday, October 12, 2010
  34. 34. Readability VERITCAL SPACING (LEADING) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. FONT: 16 PT LEADING: 16 PT Tuesday, October 12, 2010
  35. 35. Readability VERITCAL SPACING (LEADING) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. FONT: 16 PT LEADING: 16 PT Tuesday, October 12, 2010
  36. 36. Readability VERITCAL SPACING (LEADING) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. p{ line-height: 1.25; } /* 1 em = 16pt so 1.25 em = 20 pt leading */ FONT: 16 PT LEADING: 20 PT Tuesday, October 12, 2010
  37. 37. Readability VERITCAL SPACING (LEADING) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. p{ line-height: 1.25; } /* 1 em = 16pt so 1.25 em = 20 pt leading */ FONT: 16 PT LEADING: 20 PT Tuesday, October 12, 2010
  38. 38. Readability VERITCAL SPACING (LEADING) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. p{ line-height: 1.25; } /* 1 em = 16pt so 1.25 em = 20 pt leading */ FONT: 16 PT LEADING: 20 PT Tuesday, October 12, 2010
  39. 39. Readability VERITCAL SPACING (LEADING) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. p{ font-size: 16px; line-height: 20px; } Tuesday, October 12, 2010
  40. 40. Readability VERITCAL SPACING (COLOR) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Tuesday, October 12, 2010
  41. 41. Readability VERITCAL SPACING (COLOR) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Tuesday, October 12, 2010
  42. 42. Readability VERITCAL SPACING (COLOR) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Tuesday, October 12, 2010
  43. 43. Readability VERITCAL SPACING (COLOR) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Tuesday, October 12, 2010
  44. 44. Readability VERTICAL SPACING (PARAGRAPH) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Tuesday, October 12, 2010
  45. 45. Readability VERTICAL SPACING (PARAGRAPH) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. p{ margin-bottom: 20px; } Tuesday, October 12, 2010
  46. 46. Readability VERTICAL SPACING (BASELINE GRID) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit. reprehenderit in voluptate velit. GOOD BAD Tuesday, October 12, 2010
  47. 47. Readability VERTICAL SPACING (BASELINE GRID) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do body{ eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut font-size: 13px; aliquip ex ea commodo consequat. Duis aute irure dolor in line-height: 15px; reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in } culpa qui officia deserunt mollit anim id est laborum. p{ Lorem ipsum dolor margin-bottom: 15px; Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim } ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit. h3 { font-size: 15px; line-height: 20px; GOOD margin-bottom: -5px; } Tuesday, October 12, 2010
  48. 48. Readability COLUMN WIDTH (620 px) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. TOO WIDE Tuesday, October 12, 2010
  49. 49. Readability COLUMN WIDTH (620 px) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. TOO WIDE Tuesday, October 12, 2010
  50. 50. Readability COLUMN WIDTH (420 px) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut GOOD Tuesday, October 12, 2010
  51. 51. Readability COLUMN WIDTH (80 px) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in TOO NARROW Tuesday, October 12, 2010
  52. 52. Readability INDENTS Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat. p{ text-indent:30px; } Tuesday, October 12, 2010
  53. 53. Readability ALIGNMENT (FLUSH LEFT) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat. DEFAULT Tuesday, October 12, 2010
  54. 54. Readability ALIGNMENT (CENTERED) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat. p{ text-align: center; } Tuesday, October 12, 2010
  55. 55. Readability ALIGNMENT (FLUSH RIGHT) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat. p{ text-align: right; } Tuesday, October 12, 2010
  56. 56. Readability ALIGNMENT (JUSTIFIED) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat. p{ text-align: justify; } Tuesday, October 12, 2010
  57. 57. Readability LINKS “ Lorem ipsum doloj sit game, consectetur “Lorem ipsum doloj sit game, consectetur adipisicing elit, sed do eiusmod tempor adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat cupidatat aliqua. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. deserunt mollit anim id est laborum.” GOOD BAD Tuesday, October 12, 2010
  58. 58. Readability ALL CAPS ALL CAPS TYPE CAN ADD EMPHASIS. BUT TOO MUCH TYPE IN ALL CAPS IS VERY HARD TO READ. IT WILL HURT PEOPLE IN THE BRAIN AND MAY RESULT IN SEIZURES. MAKE SURE THAT YOU USE SIMPLE PHRASES OR SINGLE WORDS. Tuesday, October 12, 2010
  59. 59. Readability ALL CAPS Requires tight leading – less than the font size HIRE HIRE HIRE ME ME ME GOOD 16/12 BAD 16/16 WORSE 16/20 Tuesday, October 12, 2010
  60. 60. Readability ALL CAPS It can also look good with loose tracking. JU STIC E h1 { letter-spacing: 30px; } Tuesday, October 12, 2010
  61. 61. Web fonts Tuesday, October 12, 2010
  62. 62. Web fonts FORMATS .ttf .otf .svg .eot .woff Tuesday, October 12, 2010
  63. 63. Web fonts @fontface .ttf .otf .svg .eot .woff Tuesday, October 12, 2010
  64. 64. Web fonts Tuesday, October 12, 2010
  65. 65. Web fonts @fontface 29.95% 11.4% 5.5% 49.87% 1.6% Tuesday, October 12, 2010
  66. 66. Web fonts @fontface .ttf .otf .svg .eot Tuesday, October 12, 2010
  67. 67. Web fonts @fontface .ttf .otf .svg .eot .woff IE9 3.6 6 Tuesday, October 12, 2010
  68. 68. Web fonts @fontface @font-face { font-family: "Anivers"; src: url("Anivers.eot"); } @font-face { font-family: "Anivers"; src: url("Anivers.otf"); } body { font-family: Anivers, "Helvetica Neue", Helvetica, Arial, sans-serif; } Tuesday, October 12, 2010
  69. 69. Web fonts TYPEKIT HTML <head> <script type="text/javascript" src="http://use.typekit.com/qfd4pcz.js"></script> <script type="text/javascript">try{Typekit.load();}catch(e){}</script> </head> CSS h1 { font-family: "ff-din-web", Helvetica, sans-serif; } Tuesday, October 12, 2010
  70. 70. Web fonts TYPEKIT IE6 3.5 4.0249.4 3.1 10.54 HTML <head> <script type="text/javascript" src="http://use.typekit.com/qfd4pcz.js"></script> <script type="text/javascript">try{Typekit.load();}catch(e){}</script> </head> CSS h1 { font-family: "ff-din-web", Helvetica, sans-serif; } Tuesday, October 12, 2010
  71. 71. Web fonts TYPEKIT 2.2 Experimental HTML <head> <script type="text/javascript" src="http://use.typekit.com/qfd4pcz.js"></script> <script type="text/javascript">try{Typekit.load();}catch(e){}</script> </head> CSS h1 { font-family: "ff-din-web", Helvetica, sans-serif; } Tuesday, October 12, 2010
  72. 72. PhotoShop FONT WEIGHT SIZE LEADING KERNING TRACKING COLOR Tuesday, October 12, 2010
  73. 73. PhotoShop ALIGNMENT INDENT LEFT INDENT RIGHT INDENT 1ST SPACE SPACE BEFORE AFTER Tuesday, October 12, 2010
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×