Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Beautiful Web
  Typography
❦ Letter, text, & page
   Simon Pascal Klein — @klepas
   Version 5
Beautiful Web Typography
Beautiful Web Typography




             Intro…
Beautiful Web Typography




             I’m Pascal Klein.
Beautiful Web Typography




             I’m…
Beautiful Web Typography




             I’m…
         1. a graphic & web designer;
Beautiful Web Typography




             I’m…
         1. a graphic & web designer;
        2. a bit of a UI and UX aficio...
Beautiful Web Typography




             I’m…
         1. a graphic & web designer;
        2. a bit of a UI and UX aficio...
Beautiful Web Typography




                ‘Typophiles’ are über gεεks who
                           typography.
Beautiful Web Typography




                ‘Typophiles’ are über gεεks who
                                  typography....
Beautiful Web Typography




             ty•pog•ra•phy | tīˈpägrəfē | •n
Beautiful Web Typography




             ty•pog•ra•phy | tīˈpägrəfē | •n
             Typography is the art of creating a...
Beautiful Web Typography
Beautiful Web Typography




             Typography can bring aesthetic order to
             information, helping users ...
Beautiful Web Typography
Beautiful Web Typography




              i.e.   make textual stuff look pretty.

                                ☻
Beautiful Web Typography
Beautiful Web Typography




                           premise:
Beautiful Web Typography




                                    premise:


                           The intertubes toda...
Beautiful Web Typography




                                       premise:


                           The intertubes t...
Beautiful Web Typography




                                       premise:


                           The intertubes t...
Beautiful Web Typography
Beautiful Web Typography




             Assumptions?
Beautiful Web Typography




             Assumptions?
             It sucks? It’s boring?
Beautiful Web Typography




             Assumptions?
             It sucks? It’s boring?
         1. Limited to sans-ser...
Beautiful Web Typography




             Assumptions?
             It sucks? It’s boring?
         1. Limited to sans-ser...
Beautiful Web Typography




             Assumptions?
             It sucks? It’s boring?
         1. Limited to sans-ser...
Beautiful Web Typography
Beautiful Web Typography




                           Not quite.
Beautiful Web Typography




                           Not quite.

                             (Yay!)
Beautiful Web Typography
Beautiful Web Typography




         1. Letter (micro)
Beautiful Web Typography




         1. Letter (micro)


        3. Page or grid (macro)
Beautiful Web Typography




         1. Letter (micro)
        2. Text
        3. Page or grid (macro)
Beautiful Web Typography
Beautiful Web Typography




        0. Reset
Beautiful Web Typography




        0. Reset
             All the browsers have their own default styling for
           ...
Beautiful Web Typography




             body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,in
             p...
Beautiful Web Typography
Beautiful Web Typography




             Letter & Text
Beautiful Web Typography




             Letter & Text
          • typeface (font) and style
Beautiful Web Typography




             Letter & Text
          • typeface (font) and style
          • spacing (trackin...
Beautiful Web Typography




             Letter & Text
          • typeface (font) and style
          • spacing (trackin...
Beautiful Web Typography
Beautiful Web Typography




             serif
Beautiful Web Typography




             serif
             sans serif
Beautiful Web Typography




             serif
             sans serif
             script
Beautiful Web Typography




             serif
             sans serif
             script
             blackletter
Beautiful Web Typography




             serif
             sans serif
             script
             blackletter
     ...
Beautiful Web Typography
Beautiful Web Typography




             Mixing typefaces requires special attention. Try to
             align x-heights...
Beautiful Web Typography




             Mixing typefaces requires special attention. Try to
             align x-heights...
Beautiful Web Typography




             Mixing typefaces requires special attention. Try to
             align x-heights...
Beautiful Web Typography
Beautiful Web Typography




             Use a limited palette of type families. A common
             and effective techn...
Beautiful Web Typography




             Use a limited palette of type families. A common
             and effective techn...
Beautiful Web Typography




             Use a limited palette of type families. A common
             and effective techn...
Beautiful Web Typography




             Use a limited palette of type families. A common
             and effective techn...
Beautiful Web Typography
Beautiful Web Typography




                      …but only ‘web safe’ fonts?
Beautiful Web Typography
Beautiful Web Typography




             Arial
             Verdana
             Courier New
             Times New Roman...
Beautiful Web Typography




             Options for setting fonts:
Beautiful Web Typography




             Options for setting fonts:
         1. Installed fonts (mostly web-safe)
Beautiful Web Typography




             Options for setting fonts:
         1. Installed fonts (mostly web-safe)
       ...
Beautiful Web Typography




             Options for setting fonts:
         1. Installed fonts (mostly web-safe)
       ...
Beautiful Web Typography




             Options for setting fonts:
         1. Installed fonts (mostly web-safe)
       ...
Beautiful Web Typography




             Options for setting fonts:
         1. Installed fonts (mostly web-safe)
       ...
Beautiful Web Typography




             Options for setting fonts:
         1. Installed fonts (mostly web-safe)
       ...
Beautiful Web Typography




             Options for setting fonts:
         1. Installed fonts (mostly web-safe)
       ...
Beautiful Web Typography




             Options for setting fonts:
         1. Installed fonts (mostly web-safe)
       ...
Beautiful Web Typography




       . Installed or web-safe fonts
Beautiful Web Typography




       . Installed or web-safe fonts
             Simply call upon them directly in your fon...
Beautiful Web Typography




       . Installed or web-safe fonts
             Simply call upon them directly in your fon...
Beautiful Web Typography




       . Installed or web-safe fonts
             Simply call upon them directly in your fon...
Beautiful Web Typography




             Font stacks:
Beautiful Web Typography




             Font stacks:
          • desired
Beautiful Web Typography




             Font stacks:
          • desired
          • fallback
Beautiful Web Typography




             Font stacks:
          • desired
          • fallback
          • generic (e.g. ...
Beautiful Web Typography




       . s et al.
             Flash text replacement that in unison with JS
            ...
Beautiful Web Typography




       . s et al.
             Flash text replacement that in unison with JS
            ...
Beautiful Web Typography




       . s et al.
             Flash text replacement that in unison with JS
            ...
Beautiful Web Typography




       . s et al.
             Flash text replacement that in unison with JS
            ...
Beautiful Web Typography




       . s et al.
             Flash text replacement that in unison with JS
            ...
Beautiful Web Typography




       . Cufón & other  implementations
             These were the first JS -only implemen...
Beautiful Web Typography




       . Cufón & other  implementations
             These were the first JS -only implemen...
Beautiful Web Typography




       . Cufón & other  implementations
             These were the first JS -only implemen...
Beautiful Web Typography




       . Cufón & other  implementations
             These were the first JS -only implemen...
Beautiful Web Typography




       . Cufón & other  implementations
             These were the first JS -only implemen...
Beautiful Web Typography




       . webfonts: / Lite
             Developed by Microsoft, Embedded OpenType
     ...
Beautiful Web Typography




       . webfonts: / Lite
             Developed by Microsoft, Embedded OpenType
     ...
Beautiful Web Typography




       . webfonts: / Lite
             Developed by Microsoft, Embedded OpenType
     ...
Beautiful Web Typography




       . webfonts: / Lite
             Developed by Microsoft, Embedded OpenType
     ...
Beautiful Web Typography




       . webfonts: / Lite
             Developed by Microsoft, Embedded OpenType
     ...
Beautiful Web Typography




       . webfonts: /
             Also uses webfonts CSS @font-face and links
         ...
Beautiful Web Typography




       . webfonts: /
             Also uses webfonts CSS @font-face and links
         ...
Beautiful Web Typography




       . webfonts: /
             Also uses webfonts CSS @font-face and links
         ...
Beautiful Web Typography




       . webfonts: /
             Also uses webfonts CSS @font-face and links
         ...
Beautiful Web Typography




       . webfonts: /
             Also uses webfonts CSS @font-face and links
         ...
Beautiful Web Typography




       . Typekit, Fontdeck, Kernetst, et al.
             Generally foundry initiatives that...
Beautiful Web Typography




       . Typekit, Fontdeck, Kernetst, et al.
             Generally foundry initiatives that...
Beautiful Web Typography




       . Typekit, Fontdeck, Kernetst, et al.
             Generally foundry initiatives that...
Beautiful Web Typography




       . Typekit, Fontdeck, Kernetst, et al.
             Generally foundry initiatives that...
Beautiful Web Typography




       . Typekit, Fontdeck, Kernetst, et al.
             Generally foundry initiatives that...
Beautiful Web Typography
Beautiful Web Typography




       . OpenType permissions extension?
             Proposed by David Burlow from Font Bur...
Beautiful Web Typography




       . OpenType permissions extension?
             Proposed by David Burlow from Font Bur...
Beautiful Web Typography




       . OpenType permissions extension?
             Proposed by David Burlow from Font Bur...
Beautiful Web Typography




       . OpenType permissions extension?
             Proposed by David Burlow from Font Bur...
Beautiful Web Typography




       . OpenType permissions extension?
             Proposed by David Burlow from Font Bur...
Beautiful Web Typography




       . .webfont proposal
             Proposed by Tal Leming & Erik van Blokland as an
   ...
Beautiful Web Typography




       . .webfont proposal
             Proposed by Tal Leming & Erik van Blokland as an
   ...
Beautiful Web Typography




       . .webfont proposal
             Proposed by Tal Leming & Erik van Blokland as an
   ...
Beautiful Web Typography




       . .webfont proposal
             Proposed by Tal Leming & Erik van Blokland as an
   ...
Beautiful Web Typography




       . .webfont proposal
             Proposed by Tal Leming & Erik van Blokland as an
   ...
Beautiful Web Typography




               <fontdata>       name, file name, format

               <creationdate>   creat...
Beautiful Web Typography
Beautiful Web Typography




                           Meanwhile:
Beautiful Web Typography




                               Meanwhile:

                     Webfonts aren’t the holy grai...
Beautiful Web Typography




                               Meanwhile:

                     Webfonts aren’t the holy grai...
Beautiful Web Typography
Beautiful Web Typography




             Also remember, most fonts available from
             type foundries are not opt...
Beautiful Web Typography
Beautiful Web Typography




             Use a combination of families, styles, weights and
             to breath some f...
Beautiful Web Typography




             Use a combination of families, styles, weights and
             to breath some f...
Beautiful Web Typography




             Use a combination of families, styles, weights and
             to breath some f...
Beautiful Web Typography




             Use a combination of families, styles, weights and
             to breath some f...
Beautiful Web Typography
Beautiful Web Typography




             roman (‘normal’)
Beautiful Web Typography




             roman (‘normal’)
Beautiful Web Typography




             roman (‘normal’)
             italic
Beautiful Web Typography




             roman (‘normal’)
             italic ≠ oblique
Beautiful Web Typography




             roman (‘normal’)
             italic ≠ oblique
Beautiful Web Typography




             roman (‘normal’)
             italic ≠ oblique
Beautiful Web Typography




             roman (‘normal’)
             italic ≠ oblique
             ultralight regular b...
Beautiful Web Typography




             roman (‘normal’)
             italic ≠ oblique
             ultralight regular b...
Beautiful Web Typography




             roman (‘normal’)
             italic ≠ oblique
             ultralight regular b...
Beautiful Web Typography




             roman (‘normal’)
             italic ≠ oblique
             ultralight regular b...
Beautiful Web Typography




             roman (‘normal’)
             italic ≠ oblique
             ultralight regular b...
Beautiful Web Typography




             roman (‘normal’)
             italic ≠ oblique
             ultralight regular b...
Web Typography
Web Typography




            TRACKING
Web Typography




            TRACKING
            T RACKING
Web Typography




            TRACKING
            T RACKING
            Letter-spacing
Web Typography




            TRACKING
            T RACKING
            Letter-spacing
            Letter-spacing
Beautiful Web Typography
Beautiful Web Typography




             Letʼs see some loose word-
             spacing in action…
Beautiful Web Typography




             Letʼs see some loose word-
             spacing in action…

             And now...
Beautiful Web Typography
Beautiful Web Typography




             And finally, the recent popular
             trend of negative tracking.
Beautiful Web Typography
Beautiful Web Typography




             Tracking and word-spacing can help differentiate,
             aiding readability...
Beautiful Web Typography




             Tracking and word-spacing can help differentiate,
             aiding readability...
Beautiful Web Typography
Beautiful Web Typography




             Full-capital acronyms, along with other full-cap-
             sized glyphs can ...
Beautiful Web Typography




             Full-capital acronyms, along with other full-cap-
             sized glyphs can ...
Beautiful Web Typography




             Full-capital acronyms, along with other full-cap-
             sized glyphs can ...
Beautiful Web Typography
Beautiful Web Typography




          • letter-spacing and word-spacing controls
             tracking and word-spacing r...
Beautiful Web Typography




          • letter-spacing and word-spacing controls
             tracking and word-spacing r...
Beautiful Web Typography
Beautiful Web Typography




          • font-size controls… font sizes. Takes numerical
             and descriptive valu...
Beautiful Web Typography




          • font-size controls… font sizes. Takes numerical
             and descriptive valu...
Beautiful Web Typography




          • font-size controls… font sizes. Takes numerical
             and descriptive valu...
Beautiful Web Typography




             Why?
Beautiful Web Typography




             Why?
          • Some UA s don’t support font-resizing (Ctrl + +/-) or
         ...
Beautiful Web Typography




             Why?
          • Some UA s don’t support font-resizing (Ctrl + +/-) or
         ...
Beautiful Web Typography




             Why?
          • Some UA s don’t support font-resizing (Ctrl + +/-) or
         ...
Beautiful Web Typography
Beautiful Web Typography




             Key: remember font sizes are inherited:
             parents → children.
Beautiful Web Typography




             Key: remember font sizes are inherited:
             parents → children.

      ...
Beautiful Web Typography




             Key: remember font sizes are inherited:
             parents → children.

      ...
Beautiful Web Typography




             .% trick
Beautiful Web Typography




             .% trick
             Simplify your calculations. Consider:

             p {...
Beautiful Web Typography




             .% trick
             Simplify your calculations. Consider:

             p {...
Beautiful Web Typography




             .% trick (cont’d)
             In 2004 Richard Rutter wrote an article outlin...
Beautiful Web Typography




             .% trick (cont’d)
             In 2004 Richard Rutter wrote an article outlin...
Beautiful Web Typography




             .% trick (cont’d)
             In 2004 Richard Rutter wrote an article outlin...
Beautiful Web Typography




             .% trick (cont’d)
             In 2004 Richard Rutter wrote an article outlin...
Beautiful Web Typography
Beautiful Web Typography




             To find an element’s font size in absolute terms
             (e.g. pixels) you c...
Beautiful Web Typography




             Stick it to a scale
             Don’t just arbitrarily set type; use a scale:
Beautiful Web Typography




             Stick it to a scale
             Don’t just arbitrarily set type; use a scale:

...
Beautiful Web Typography
Beautiful Web Typography




             At small sizes font-decoration: underline;
             can render descender gly...
Beautiful Web Typography




             At small sizes font-decoration: underline;
             can render descender gly...
Beautiful Web Typography




             At small sizes font-decoration: underline;
             can render descender gly...
Beautiful Web Typography
Beautiful Web Typography




             Correct glyphs
Beautiful Web Typography




             Correct glyphs
             Consider:




                           ' "
Beautiful Web Typography




             Correct glyphs
             Consider:




                           1'61"
     ...
Beautiful Web Typography




                             "is is a group of
                           words surrounded b...
Beautiful Web Typography




                           “is is a quotation!”
                                           -...
Beautiful Web Typography




                           ‘’ “”
                              ’
Beautiful Web Typography
Beautiful Web Typography




                           - hyphen    Mary-Anne, Dominique Strauss-Kahn


                  ...
Beautiful Web Typography




                 “         opening double quote   &ldquo;
                 ”         closing ...
Beautiful Web Typography




             Smartypants et al.
Beautiful Web Typography




             Smartypants et al.
            ‘Doing something repetitive? Likely you’re doing ...
Beautiful Web Typography




             Smartypants et al.
            ‘Doing something repetitive? Likely you’re doing ...
Beautiful Web Typography




             Smartypants et al.
            ‘Doing something repetitive? Likely you’re doing ...
Beautiful Web Typography




             Smartypants et al.
            ‘Doing something repetitive? Likely you’re doing ...
Beautiful Web Typography




             Smartypants et al.
            ‘Doing something repetitive? Likely you’re doing ...
Beautiful Web Typography




             Smartypants et al.
            ‘Doing something repetitive? Likely you’re doing ...
Beautiful Web Typography
Beautiful Web Typography




             Give ampersands love
Beautiful Web Typography




             Give ampersands love
             Italic ampersand variants are often much prett...
Beautiful Web Typography




             Give ampersands love
             Italic ampersand variants are often much prett...
Beautiful Web Typography




             Give ampersands love
             Italic ampersand variants are often much prett...
Beautiful Web Typography




             Marking paragraphs
Beautiful Web Typography




             Marking paragraphs
             Don’t be afraid to mark new paragraphs with
    ...
Beautiful Web Typography




             Marking paragraphs
             Don’t be afraid to mark new paragraphs with
    ...
Beautiful Web Typography




             Marking paragraphs
             Don’t be afraid to mark new paragraphs with
    ...
Beautiful Web Typography




             Measures
             The measure is the length of a single line. It is
        ...
Beautiful Web Typography




             Measures
             The measure is the length of a single line. It is
        ...
Beautiful Web Typography




             Measures (cont’d)
Beautiful Web Typography




             Measures (cont’d)
             Web type generally benefits from smaller
         ...
Beautiful Web Typography




             Measures (cont’d)
             Web type generally benefits from smaller
         ...
Beautiful Web Typography




             Leading (line-height)
Beautiful Web Typography




             Leading (line-height)
             Don’t forget to set an ample leading for runn...
Beautiful Web Typography




             Leading (line-height)
             Don’t forget to set an ample leading for runn...
Beautiful Web Typography




             Hanging punctuation
             Traditionally punctuation marks, bullets, lists...
Beautiful Web Typography




             Hanging punctuation
             Traditionally punctuation marks, bullets, lists...
Beautiful Web Typography




             Hanging punctuation (cont’d)
             Simply with lists by setting their mar...
Beautiful Web Typography




             Hanging punctuation (cont’d)
             Simply with lists by setting their mar...
Beautiful Web Typography




             Hanging punctuation (cont’d)
             Simply with lists by setting their mar...
Beautiful Web Typography




             Web: text = UI
             Distinguish content elements from application
      ...
Beautiful Web Typography




             Web: text = UI
             Distinguish content elements from application
      ...
Beautiful Web Typography
Beautiful Web Typography
Beautiful Web Typography
Beautiful Web Typography




             Page (grid).
Beautiful Web Typography




             Page (grid).
             Grids bring order to your page and help specify
      ...
Beautiful Web Typography




             Page (grid).
             Grids bring order to your page and help specify
      ...
Beautiful Web Typography




             Page (grid).
             Grids bring order to your page and help specify
      ...
Beautiful Web Typography
Beautiful Web Typography
Beautiful Web Typography
Beautiful Web Typography




             Addendum
Beautiful Web Typography




             Addendum
             Please don’t use Comic Sans unless you have a
            ...
: ---
Beautiful Web Typography




             Inspirational typophiles
           • Cameron Moll: cameronmoll.com

           ...
Beautiful Web Typography




             Resources & reading
           • http://webtypography.net

           • http://a...
Thanks!
            klepas@klepas.org

            klepas.org

            @klepas



Licensed CC BY -NC -ND
http://creati...
Beautiful Web Typography (#5)
Beautiful Web Typography (#5)
Beautiful Web Typography (#5)
Beautiful Web Typography (#5)
Beautiful Web Typography (#5)
Beautiful Web Typography (#5)
Beautiful Web Typography (#5)
Beautiful Web Typography (#5)
Nächste SlideShare
Wird geladen in …5
×

von

Beautiful Web Typography (#5) Slide 1 Beautiful Web Typography (#5) Slide 2 Beautiful Web Typography (#5) Slide 3 Beautiful Web Typography (#5) Slide 4 Beautiful Web Typography (#5) Slide 5 Beautiful Web Typography (#5) Slide 6 Beautiful Web Typography (#5) Slide 7 Beautiful Web Typography (#5) Slide 8 Beautiful Web Typography (#5) Slide 9 Beautiful Web Typography (#5) Slide 10 Beautiful Web Typography (#5) Slide 11 Beautiful Web Typography (#5) Slide 12 Beautiful Web Typography (#5) Slide 13 Beautiful Web Typography (#5) Slide 14 Beautiful Web Typography (#5) Slide 15 Beautiful Web Typography (#5) Slide 16 Beautiful Web Typography (#5) Slide 17 Beautiful Web Typography (#5) Slide 18 Beautiful Web Typography (#5) Slide 19 Beautiful Web Typography (#5) Slide 20 Beautiful Web Typography (#5) Slide 21 Beautiful Web Typography (#5) Slide 22 Beautiful Web Typography (#5) Slide 23 Beautiful Web Typography (#5) Slide 24 Beautiful Web Typography (#5) Slide 25 Beautiful Web Typography (#5) Slide 26 Beautiful Web Typography (#5) Slide 27 Beautiful Web Typography (#5) Slide 28 Beautiful Web Typography (#5) Slide 29 Beautiful Web Typography (#5) Slide 30 Beautiful Web Typography (#5) Slide 31 Beautiful Web Typography (#5) Slide 32 Beautiful Web Typography (#5) Slide 33 Beautiful Web Typography (#5) Slide 34 Beautiful Web Typography (#5) Slide 35 Beautiful Web Typography (#5) Slide 36 Beautiful Web Typography (#5) Slide 37 Beautiful Web Typography (#5) Slide 38 Beautiful Web Typography (#5) Slide 39 Beautiful Web Typography (#5) Slide 40 Beautiful Web Typography (#5) Slide 41 Beautiful Web Typography (#5) Slide 42 Beautiful Web Typography (#5) Slide 43 Beautiful Web Typography (#5) Slide 44 Beautiful Web Typography (#5) Slide 45 Beautiful Web Typography (#5) Slide 46 Beautiful Web Typography (#5) Slide 47 Beautiful Web Typography (#5) Slide 48 Beautiful Web Typography (#5) Slide 49 Beautiful Web Typography (#5) Slide 50 Beautiful Web Typography (#5) Slide 51 Beautiful Web Typography (#5) Slide 52 Beautiful Web Typography (#5) Slide 53 Beautiful Web Typography (#5) Slide 54 Beautiful Web Typography (#5) Slide 55 Beautiful Web Typography (#5) Slide 56 Beautiful Web Typography (#5) Slide 57 Beautiful Web Typography (#5) Slide 58 Beautiful Web Typography (#5) Slide 59 Beautiful Web Typography (#5) Slide 60 Beautiful Web Typography (#5) Slide 61 Beautiful Web Typography (#5) Slide 62 Beautiful Web Typography (#5) Slide 63 Beautiful Web Typography (#5) Slide 64 Beautiful Web Typography (#5) Slide 65 Beautiful Web Typography (#5) Slide 66 Beautiful Web Typography (#5) Slide 67 Beautiful Web Typography (#5) Slide 68 Beautiful Web Typography (#5) Slide 69 Beautiful Web Typography (#5) Slide 70 Beautiful Web Typography (#5) Slide 71 Beautiful Web Typography (#5) Slide 72 Beautiful Web Typography (#5) Slide 73 Beautiful Web Typography (#5) Slide 74 Beautiful Web Typography (#5) Slide 75 Beautiful Web Typography (#5) Slide 76 Beautiful Web Typography (#5) Slide 77 Beautiful Web Typography (#5) Slide 78 Beautiful Web Typography (#5) Slide 79 Beautiful Web Typography (#5) Slide 80 Beautiful Web Typography (#5) Slide 81 Beautiful Web Typography (#5) Slide 82 Beautiful Web Typography (#5) Slide 83 Beautiful Web Typography (#5) Slide 84 Beautiful Web Typography (#5) Slide 85 Beautiful Web Typography (#5) Slide 86 Beautiful Web Typography (#5) Slide 87 Beautiful Web Typography (#5) Slide 88 Beautiful Web Typography (#5) Slide 89 Beautiful Web Typography (#5) Slide 90 Beautiful Web Typography (#5) Slide 91 Beautiful Web Typography (#5) Slide 92 Beautiful Web Typography (#5) Slide 93 Beautiful Web Typography (#5) Slide 94 Beautiful Web Typography (#5) Slide 95 Beautiful Web Typography (#5) Slide 96 Beautiful Web Typography (#5) Slide 97 Beautiful Web Typography (#5) Slide 98 Beautiful Web Typography (#5) Slide 99 Beautiful Web Typography (#5) Slide 100 Beautiful Web Typography (#5) Slide 101 Beautiful Web Typography (#5) Slide 102 Beautiful Web Typography (#5) Slide 103 Beautiful Web Typography (#5) Slide 104 Beautiful Web Typography (#5) Slide 105 Beautiful Web Typography (#5) Slide 106 Beautiful Web Typography (#5) Slide 107 Beautiful Web Typography (#5) Slide 108 Beautiful Web Typography (#5) Slide 109 Beautiful Web Typography (#5) Slide 110 Beautiful Web Typography (#5) Slide 111 Beautiful Web Typography (#5) Slide 112 Beautiful Web Typography (#5) Slide 113 Beautiful Web Typography (#5) Slide 114 Beautiful Web Typography (#5) Slide 115 Beautiful Web Typography (#5) Slide 116 Beautiful Web Typography (#5) Slide 117 Beautiful Web Typography (#5) Slide 118 Beautiful Web Typography (#5) Slide 119 Beautiful Web Typography (#5) Slide 120 Beautiful Web Typography (#5) Slide 121 Beautiful Web Typography (#5) Slide 122 Beautiful Web Typography (#5) Slide 123 Beautiful Web Typography (#5) Slide 124 Beautiful Web Typography (#5) Slide 125 Beautiful Web Typography (#5) Slide 126 Beautiful Web Typography (#5) Slide 127 Beautiful Web Typography (#5) Slide 128 Beautiful Web Typography (#5) Slide 129 Beautiful Web Typography (#5) Slide 130 Beautiful Web Typography (#5) Slide 131 Beautiful Web Typography (#5) Slide 132 Beautiful Web Typography (#5) Slide 133 Beautiful Web Typography (#5) Slide 134 Beautiful Web Typography (#5) Slide 135 Beautiful Web Typography (#5) Slide 136 Beautiful Web Typography (#5) Slide 137 Beautiful Web Typography (#5) Slide 138 Beautiful Web Typography (#5) Slide 139 Beautiful Web Typography (#5) Slide 140 Beautiful Web Typography (#5) Slide 141 Beautiful Web Typography (#5) Slide 142 Beautiful Web Typography (#5) Slide 143 Beautiful Web Typography (#5) Slide 144 Beautiful Web Typography (#5) Slide 145 Beautiful Web Typography (#5) Slide 146 Beautiful Web Typography (#5) Slide 147 Beautiful Web Typography (#5) Slide 148 Beautiful Web Typography (#5) Slide 149 Beautiful Web Typography (#5) Slide 150 Beautiful Web Typography (#5) Slide 151 Beautiful Web Typography (#5) Slide 152 Beautiful Web Typography (#5) Slide 153 Beautiful Web Typography (#5) Slide 154 Beautiful Web Typography (#5) Slide 155 Beautiful Web Typography (#5) Slide 156 Beautiful Web Typography (#5) Slide 157 Beautiful Web Typography (#5) Slide 158 Beautiful Web Typography (#5) Slide 159 Beautiful Web Typography (#5) Slide 160 Beautiful Web Typography (#5) Slide 161 Beautiful Web Typography (#5) Slide 162 Beautiful Web Typography (#5) Slide 163 Beautiful Web Typography (#5) Slide 164 Beautiful Web Typography (#5) Slide 165 Beautiful Web Typography (#5) Slide 166 Beautiful Web Typography (#5) Slide 167 Beautiful Web Typography (#5) Slide 168 Beautiful Web Typography (#5) Slide 169 Beautiful Web Typography (#5) Slide 170 Beautiful Web Typography (#5) Slide 171 Beautiful Web Typography (#5) Slide 172 Beautiful Web Typography (#5) Slide 173 Beautiful Web Typography (#5) Slide 174 Beautiful Web Typography (#5) Slide 175 Beautiful Web Typography (#5) Slide 176 Beautiful Web Typography (#5) Slide 177 Beautiful Web Typography (#5) Slide 178 Beautiful Web Typography (#5) Slide 179 Beautiful Web Typography (#5) Slide 180 Beautiful Web Typography (#5) Slide 181 Beautiful Web Typography (#5) Slide 182 Beautiful Web Typography (#5) Slide 183 Beautiful Web Typography (#5) Slide 184 Beautiful Web Typography (#5) Slide 185 Beautiful Web Typography (#5) Slide 186 Beautiful Web Typography (#5) Slide 187 Beautiful Web Typography (#5) Slide 188 Beautiful Web Typography (#5) Slide 189 Beautiful Web Typography (#5) Slide 190 Beautiful Web Typography (#5) Slide 191 Beautiful Web Typography (#5) Slide 192 Beautiful Web Typography (#5) Slide 193 Beautiful Web Typography (#5) Slide 194 Beautiful Web Typography (#5) Slide 195 Beautiful Web Typography (#5) Slide 196 Beautiful Web Typography (#5) Slide 197 Beautiful Web Typography (#5) Slide 198 Beautiful Web Typography (#5) Slide 199 Beautiful Web Typography (#5) Slide 200 Beautiful Web Typography (#5) Slide 201 Beautiful Web Typography (#5) Slide 202 Beautiful Web Typography (#5) Slide 203 Beautiful Web Typography (#5) Slide 204 Beautiful Web Typography (#5) Slide 205 Beautiful Web Typography (#5) Slide 206 Beautiful Web Typography (#5) Slide 207 Beautiful Web Typography (#5) Slide 208 Beautiful Web Typography (#5) Slide 209 Beautiful Web Typography (#5) Slide 210 Beautiful Web Typography (#5) Slide 211 Beautiful Web Typography (#5) Slide 212 Beautiful Web Typography (#5) Slide 213 Beautiful Web Typography (#5) Slide 214 Beautiful Web Typography (#5) Slide 215 Beautiful Web Typography (#5) Slide 216 Beautiful Web Typography (#5) Slide 217 Beautiful Web Typography (#5) Slide 218 Beautiful Web Typography (#5) Slide 219 Beautiful Web Typography (#5) Slide 220 Beautiful Web Typography (#5) Slide 221 Beautiful Web Typography (#5) Slide 222 Beautiful Web Typography (#5) Slide 223 Beautiful Web Typography (#5) Slide 224 Beautiful Web Typography (#5) Slide 225 Beautiful Web Typography (#5) Slide 226 Beautiful Web Typography (#5) Slide 227 Beautiful Web Typography (#5) Slide 228 Beautiful Web Typography (#5) Slide 229 Beautiful Web Typography (#5) Slide 230 Beautiful Web Typography (#5) Slide 231 Beautiful Web Typography (#5) Slide 232 Beautiful Web Typography (#5) Slide 233 Beautiful Web Typography (#5) Slide 234 Beautiful Web Typography (#5) Slide 235 Beautiful Web Typography (#5) Slide 236 Beautiful Web Typography (#5) Slide 237 Beautiful Web Typography (#5) Slide 238 Beautiful Web Typography (#5) Slide 239 Beautiful Web Typography (#5) Slide 240 Beautiful Web Typography (#5) Slide 241 Beautiful Web Typography (#5) Slide 242 Beautiful Web Typography (#5) Slide 243 Beautiful Web Typography (#5) Slide 244 Beautiful Web Typography (#5) Slide 245 Beautiful Web Typography (#5) Slide 246 Beautiful Web Typography (#5) Slide 247 Beautiful Web Typography (#5) Slide 248 Beautiful Web Typography (#5) Slide 249 Beautiful Web Typography (#5) Slide 250 Beautiful Web Typography (#5) Slide 251 Beautiful Web Typography (#5) Slide 252
Nächste SlideShare
Influências Africanas na Culinária Brasileira
Weiter
Herunterladen, um offline zu lesen und im Vollbildmodus anzuzeigen.

52 Gefällt mir

Teilen

Herunterladen, um offline zu lesen

Beautiful Web Typography (#5)

Herunterladen, um offline zu lesen

The fifth rendition of my Beautiful Web Typography with some updates, additional info, more links and whatnot. A new section has been added focusing on webfonts (font linking and embedding) with the recent developments in that regard.

Kudos should go out to the chaps listed in the end as well as inspirational peeps like Ellen Lupton, whose categorisation of things type into letter, text, grid I’ve used to structure this talk.

Ähnliche Bücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Beautiful Web Typography (#5)

  1. Beautiful Web Typography ❦ Letter, text, & page Simon Pascal Klein — @klepas Version 5
  2. Beautiful Web Typography
  3. Beautiful Web Typography Intro…
  4. Beautiful Web Typography I’m Pascal Klein.
  5. Beautiful Web Typography I’m…
  6. Beautiful Web Typography I’m… 1. a graphic & web designer;
  7. Beautiful Web Typography I’m… 1. a graphic & web designer; 2. a bit of a UI and UX aficionado;
  8. Beautiful Web Typography I’m… 1. a graphic & web designer; 2. a bit of a UI and UX aficionado; 3. and, incurably, a rampant ‘typophile’.
  9. Beautiful Web Typography ‘Typophiles’ are über gεεks who typography.
  10. Beautiful Web Typography ‘Typophiles’ are über gεεks who typography. Hands up and make yourselves known.
  11. Beautiful Web Typography ty•pog•ra•phy | tīˈpägrəfē | •n
  12. Beautiful Web Typography ty•pog•ra•phy | tīˈpägrəfē | •n Typography is the art of creating and setting type with the purpose of honoring the text it sets.
  13. Beautiful Web Typography
  14. Beautiful Web Typography Typography can bring aesthetic order to information, helping users read & navigate.
  15. Beautiful Web Typography
  16. Beautiful Web Typography i.e. make textual stuff look pretty. ☻
  17. Beautiful Web Typography
  18. Beautiful Web Typography premise:
  19. Beautiful Web Typography premise: The intertubes today are info-heavy.
  20. Beautiful Web Typography premise: The intertubes today are info-heavy. Much of it is textual.
  21. Beautiful Web Typography premise: The intertubes today are info-heavy. Much of it is textual. Much of it is a pain to read.
  22. Beautiful Web Typography
  23. Beautiful Web Typography Assumptions?
  24. Beautiful Web Typography Assumptions? It sucks? It’s boring?
  25. Beautiful Web Typography Assumptions? It sucks? It’s boring? 1. Limited to sans-serif only for readability?
  26. Beautiful Web Typography Assumptions? It sucks? It’s boring? 1. Limited to sans-serif only for readability? 2. Only ‘web-safe’ fonts?
  27. Beautiful Web Typography Assumptions? It sucks? It’s boring? 1. Limited to sans-serif only for readability? 2. Only ‘web-safe’ fonts? 3. Limited control—resort to Flash and other non- standard technologies?
  28. Beautiful Web Typography
  29. Beautiful Web Typography Not quite.
  30. Beautiful Web Typography Not quite. (Yay!)
  31. Beautiful Web Typography
  32. Beautiful Web Typography 1. Letter (micro)
  33. Beautiful Web Typography 1. Letter (micro) 3. Page or grid (macro)
  34. Beautiful Web Typography 1. Letter (micro) 2. Text 3. Page or grid (macro)
  35. Beautiful Web Typography
  36. Beautiful Web Typography 0. Reset
  37. Beautiful Web Typography 0. Reset All the browsers have their own default styling for various (x)HTML elements. This makes it a pain for cross-browser consistency.
  38. Beautiful Web Typography body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,in put,textarea,p,blockquote,th,td {margin:0;padding:0;} table {border-collapse:collapse;border-spacing:0;} fieldset,img {border:0;} address,caption,cite,code,dfn,em,strong,th,var {font-style: normal;font-weight:normal;} ul,ol {list-style:none;} caption,th {text-align:left;} h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;} q:before,q:after {content:'';} abbr,acronym {border:0;} Googling “CSS reset stylesheets” should land you with numerous examples. This one above is from the Yahoo! UI library.
  39. Beautiful Web Typography
  40. Beautiful Web Typography Letter & Text
  41. Beautiful Web Typography Letter & Text • typeface (font) and style
  42. Beautiful Web Typography Letter & Text • typeface (font) and style • spacing (tracking/letter-spacing)
  43. Beautiful Web Typography Letter & Text • typeface (font) and style • spacing (tracking/letter-spacing) • individual glyphs
  44. Beautiful Web Typography
  45. Beautiful Web Typography serif
  46. Beautiful Web Typography serif sans serif
  47. Beautiful Web Typography serif sans serif script
  48. Beautiful Web Typography serif sans serif script blackletter
  49. Beautiful Web Typography serif sans serif script blackletter monospace
  50. Beautiful Web Typography
  51. Beautiful Web Typography Mixing typefaces requires special attention. Try to align x-heights and sizes. X-heights?
  52. Beautiful Web Typography Mixing typefaces requires special attention. Try to align x-heights and sizes. X-heights? x-height x-height Helvetica Regular 96pt & Minion Pro Regular 96pt.
  53. Beautiful Web Typography Mixing typefaces requires special attention. Try to align x-heights and sizes. X-heights? x-height x-height Helvetica Regular 96pt & Minion Pro Regular 96pt. x-height x-height Helvetica Regular 96pt & Minion Pro Regular 114pt.
  54. Beautiful Web Typography
  55. Beautiful Web Typography Use a limited palette of type families. A common and effective technique is to pair a serif and a sans serif face together. E.g.:
  56. Beautiful Web Typography Use a limited palette of type families. A common and effective technique is to pair a serif and a sans serif face together. E.g.: 1. one sets the body, the other the headings;
  57. Beautiful Web Typography Use a limited palette of type families. A common and effective technique is to pair a serif and a sans serif face together. E.g.: 1. one sets the body, the other the headings; 2. one sets primary content, the other UI controls.
  58. Beautiful Web Typography Use a limited palette of type families. A common and effective technique is to pair a serif and a sans serif face together. E.g.: 1. one sets the body, the other the headings; 2. one sets primary content, the other UI controls. We do this with the font-family property.
  59. Beautiful Web Typography
  60. Beautiful Web Typography …but only ‘web safe’ fonts?
  61. Beautiful Web Typography
  62. Beautiful Web Typography Arial Verdana Courier New Times New Roman Georgia Trebuchet MS
  63. Beautiful Web Typography Options for setting fonts:
  64. Beautiful Web Typography Options for setting fonts: 1. Installed fonts (mostly web-safe)
  65. Beautiful Web Typography Options for setting fonts: 1. Installed fonts (mostly web-safe) 2. sIFR or other JS and Flash replacement
  66. Beautiful Web Typography Options for setting fonts: 1. Installed fonts (mostly web-safe) 2. sIFR or other JS and Flash replacement 3. Cufón et al. (http://tinyurl.com/git-cufon)
  67. Beautiful Web Typography Options for setting fonts: 1. Installed fonts (mostly web-safe) 2. sIFR or other JS and Flash replacement 3. Cufón et al. (http://tinyurl.com/git-cufon) 4. webfonts: EOT /EOT Lite via @font-face
  68. Beautiful Web Typography Options for setting fonts: 1. Installed fonts (mostly web-safe) 2. sIFR or other JS and Flash replacement 3. Cufón et al. (http://tinyurl.com/git-cufon) 4. webfonts: EOT /EOT Lite via @font-face 5. webfonts: OT /TTF via @font-face
  69. Beautiful Web Typography Options for setting fonts: 1. Installed fonts (mostly web-safe) 2. sIFR or other JS and Flash replacement 3. Cufón et al. (http://tinyurl.com/git-cufon) 4. webfonts: EOT /EOT Lite via @font-face 5. webfonts: OT /TTF via @font-face 6. Typekit, Fontdeck, Kernest, et al.
  70. Beautiful Web Typography Options for setting fonts: 1. Installed fonts (mostly web-safe) 2. sIFR or other JS and Flash replacement 3. Cufón et al. (http://tinyurl.com/git-cufon) 4. webfonts: EOT /EOT Lite via @font-face 5. webfonts: OT /TTF via @font-face 6. Typekit, Fontdeck, Kernest, et al. 7. OpenType permissions extension?
  71. Beautiful Web Typography Options for setting fonts: 1. Installed fonts (mostly web-safe) 2. sIFR or other JS and Flash replacement 3. Cufón et al. (http://tinyurl.com/git-cufon) 4. webfonts: EOT /EOT Lite via @font-face 5. webfonts: OT /TTF via @font-face 6. Typekit, Fontdeck, Kernest, et al. 7. OpenType permissions extension? 8. .webfont proposal?
  72. Beautiful Web Typography . Installed or web-safe fonts
  73. Beautiful Web Typography . Installed or web-safe fonts Simply call upon them directly in your font stack declarations, e.g.:
  74. Beautiful Web Typography . Installed or web-safe fonts Simply call upon them directly in your font stack declarations, e.g.: font-family: Baskerville, Times, 'Times New Roman', serif;
  75. Beautiful Web Typography . Installed or web-safe fonts Simply call upon them directly in your font stack declarations, e.g.: font-family: Baskerville, Times, 'Times New Roman', serif; font-family: 'Helvetica Neue', Helvetica, 'Arial', sans-serif;
  76. Beautiful Web Typography Font stacks:
  77. Beautiful Web Typography Font stacks: • desired
  78. Beautiful Web Typography Font stacks: • desired • fallback
  79. Beautiful Web Typography Font stacks: • desired • fallback • generic (e.g. serif, sans-serif, monospace)
  80. Beautiful Web Typography . s et al. Flash text replacement that in unison with JS replaces type using type from a Flash file.
  81. Beautiful Web Typography . s et al. Flash text replacement that in unison with JS replaces type using type from a Flash file. Not a feasible solution long-term:
  82. Beautiful Web Typography . s et al. Flash text replacement that in unison with JS replaces type using type from a Flash file. Not a feasible solution long-term: 1. does subsetting;
  83. Beautiful Web Typography . s et al. Flash text replacement that in unison with JS replaces type using type from a Flash file. Not a feasible solution long-term: 1. does subsetting; 2. non-standard solution—relies on both Flash and JS ;
  84. Beautiful Web Typography . s et al. Flash text replacement that in unison with JS replaces type using type from a Flash file. Not a feasible solution long-term: 1. does subsetting; 2. non-standard solution—relies on both Flash and JS ; 3. high page load time—not feasible for body copy.
  85. Beautiful Web Typography . Cufón & other  implementations These were the first JS -only implementations. Cufón converts font paths to VML paths stored in JSON , then rendering the font paths using JS .
  86. Beautiful Web Typography . Cufón & other  implementations These were the first JS -only implementations. Cufón converts font paths to VML paths stored in JSON , then rendering the font paths using JS . Various thoughts and concerns:
  87. Beautiful Web Typography . Cufón & other  implementations These were the first JS -only implementations. Cufón converts font paths to VML paths stored in JSON , then rendering the font paths using JS . Various thoughts and concerns: 1. not accessible but works in most browsers;
  88. Beautiful Web Typography . Cufón & other  implementations These were the first JS -only implementations. Cufón converts font paths to VML paths stored in JSON , then rendering the font paths using JS . Various thoughts and concerns: 1. not accessible but works in most browsers; 2. type foundries are/were skeptical—not a ‘service’; limited palette of typefaces;
  89. Beautiful Web Typography . Cufón & other  implementations These were the first JS -only implementations. Cufón converts font paths to VML paths stored in JSON , then rendering the font paths using JS . Various thoughts and concerns: 1. not accessible but works in most browsers; 2. type foundries are/were skeptical—not a ‘service’; limited palette of typefaces; 3. converter is often proprietary;
  90. Beautiful Web Typography . webfonts: / Lite Developed by Microsoft, Embedded OpenType subsets, compresses, and encrypts OT and TTF . Can be restricted a list of trusted roots. Uses webfonts. Described as ‘DRM icing on an OpenType cake’.
  91. Beautiful Web Typography . webfonts: / Lite Developed by Microsoft, Embedded OpenType subsets, compresses, and encrypts OT and TTF . Can be restricted a list of trusted roots. Uses webfonts. Described as ‘DRM icing on an OpenType cake’. Not feasible as-is currently:
  92. Beautiful Web Typography . webfonts: / Lite Developed by Microsoft, Embedded OpenType subsets, compresses, and encrypts OT and TTF . Can be restricted a list of trusted roots. Uses webfonts. Described as ‘DRM icing on an OpenType cake’. Not feasible as-is currently: 1. non-standard, proprietary solution;
  93. Beautiful Web Typography . webfonts: / Lite Developed by Microsoft, Embedded OpenType subsets, compresses, and encrypts OT and TTF . Can be restricted a list of trusted roots. Uses webfonts. Described as ‘DRM icing on an OpenType cake’. Not feasible as-is currently: 1. non-standard, proprietary solution; 2. requires a proprietary converter (WEFT ) to use;
  94. Beautiful Web Typography . webfonts: / Lite Developed by Microsoft, Embedded OpenType subsets, compresses, and encrypts OT and TTF . Can be restricted a list of trusted roots. Uses webfonts. Described as ‘DRM icing on an OpenType cake’. Not feasible as-is currently: 1. non-standard, proprietary solution; 2. requires a proprietary converter (WEFT ) to use; 3. proposal rejected by W 3C & only supported by IE .
  95. Beautiful Web Typography . webfonts: / Also uses webfonts CSS @font-face and links directly via the src: declaration to an OT /TTF file which is downloaded and used to render the type.
  96. Beautiful Web Typography . webfonts: / Also uses webfonts CSS @font-face and links directly via the src: declaration to an OT /TTF file which is downloaded and used to render the type. Feasible but:
  97. Beautiful Web Typography . webfonts: / Also uses webfonts CSS @font-face and links directly via the src: declaration to an OT /TTF file which is downloaded and used to render the type. Feasible but: 1. OT /TTF files can easily be downloaded;
  98. Beautiful Web Typography . webfonts: / Also uses webfonts CSS @font-face and links directly via the src: declaration to an OT /TTF file which is downloaded and used to render the type. Feasible but: 1. OT /TTF files can easily be downloaded; 2. supported in Safari 3.1+, Firefox 3.5+ (planned for Opera 10 and Chrome 2.0 beta);
  99. Beautiful Web Typography . webfonts: / Also uses webfonts CSS @font-face and links directly via the src: declaration to an OT /TTF file which is downloaded and used to render the type. Feasible but: 1. OT /TTF files can easily be downloaded; 2. supported in Safari 3.1+, Firefox 3.5+ (planned for Opera 10 and Chrome 2.0 beta); 3. subsetting or compression comes down to author.
  100. Beautiful Web Typography . Typekit, Fontdeck, Kernetst, et al. Generally foundry initiatives that are JS -based (though not exclusively) and hosted, paid subscription models: select, pay, inject; done.
  101. Beautiful Web Typography . Typekit, Fontdeck, Kernetst, et al. Generally foundry initiatives that are JS -based (though not exclusively) and hosted, paid subscription models: select, pay, inject; done. Thoughts:
  102. Beautiful Web Typography . Typekit, Fontdeck, Kernetst, et al. Generally foundry initiatives that are JS -based (though not exclusively) and hosted, paid subscription models: select, pay, inject; done. Thoughts: 1. deemed ‘the solution’ (though still in-the-works);
  103. Beautiful Web Typography . Typekit, Fontdeck, Kernetst, et al. Generally foundry initiatives that are JS -based (though not exclusively) and hosted, paid subscription models: select, pay, inject; done. Thoughts: 1. deemed ‘the solution’ (though still in-the-works); 2. standards-based, good browser support, and easy;
  104. Beautiful Web Typography . Typekit, Fontdeck, Kernetst, et al. Generally foundry initiatives that are JS -based (though not exclusively) and hosted, paid subscription models: select, pay, inject; done. Thoughts: 1. deemed ‘the solution’ (though still in-the-works); 2. standards-based, good browser support, and easy; 3. subsetting and/or compression service-side.
  105. Beautiful Web Typography
  106. Beautiful Web Typography . OpenType permissions extension? Proposed by David Burlow from Font Bureau as a simple permissions table extension for OpenType with a perm tag.
  107. Beautiful Web Typography . OpenType permissions extension? Proposed by David Burlow from Font Bureau as a simple permissions table extension for OpenType with a perm tag. Thoughts:
  108. Beautiful Web Typography . OpenType permissions extension? Proposed by David Burlow from Font Bureau as a simple permissions table extension for OpenType with a perm tag. Thoughts: 1. simple: no change in the OT format, no wrapper;
  109. Beautiful Web Typography . OpenType permissions extension? Proposed by David Burlow from Font Bureau as a simple permissions table extension for OpenType with a perm tag. Thoughts: 1. simple: no change in the OT format, no wrapper; 2. standards-based, but no compression;
  110. Beautiful Web Typography . OpenType permissions extension? Proposed by David Burlow from Font Bureau as a simple permissions table extension for OpenType with a perm tag. Thoughts: 1. simple: no change in the OT format, no wrapper; 2. standards-based, but no compression; 3. reverse-engineer-able (just edit the XML );
  111. Beautiful Web Typography . .webfont proposal Proposed by Tal Leming & Erik van Blokland as an alternative to EOT , compressing the font and an accompanying meta-data XML file. Uses webfonts.
  112. Beautiful Web Typography . .webfont proposal Proposed by Tal Leming & Erik van Blokland as an alternative to EOT , compressing the font and an accompanying meta-data XML file. Uses webfonts. Considerations:
  113. Beautiful Web Typography . .webfont proposal Proposed by Tal Leming & Erik van Blokland as an alternative to EOT , compressing the font and an accompanying meta-data XML file. Uses webfonts. Considerations: 1. compact, simple, elegant, easily standards-based;
  114. Beautiful Web Typography . .webfont proposal Proposed by Tal Leming & Erik van Blokland as an alternative to EOT , compressing the font and an accompanying meta-data XML file. Uses webfonts. Considerations: 1. compact, simple, elegant, easily standards-based; 2. reverse-engineer-able; CORS in discussion;
  115. Beautiful Web Typography . .webfont proposal Proposed by Tal Leming & Erik van Blokland as an alternative to EOT , compressing the font and an accompanying meta-data XML file. Uses webfonts. Considerations: 1. compact, simple, elegant, easily standards-based; 2. reverse-engineer-able; CORS in discussion; 3. …but (surprisingly) gaining huge support from type designers and foundries alike.
  116. Beautiful Web Typography <fontdata> name, file name, format <creationdate> creation data stamp of font file <vendor> vendor info; attr.: name, URL <designer> designer info; attr.: name, URL , role <license> license; attr.: URL , ID <licenseename> name for the licensee of the font <description> description for the font <copyright> copyright for the font <trademark> trademark for the font <privatedata> additional arbitrary, private info.
  117. Beautiful Web Typography
  118. Beautiful Web Typography Meanwhile:
  119. Beautiful Web Typography Meanwhile: Webfonts aren’t the holy grail of web typography problems…
  120. Beautiful Web Typography Meanwhile: Webfonts aren’t the holy grail of web typography problems… “Typography is not picking a ‘cool’ font.” – Jeff Cro
  121. Beautiful Web Typography
  122. Beautiful Web Typography Also remember, most fonts available from type foundries are not optimised for screen usage; they’re for print.
  123. Beautiful Web Typography
  124. Beautiful Web Typography Use a combination of families, styles, weights and to breath some fresh air into your web type.
  125. Beautiful Web Typography Use a combination of families, styles, weights and to breath some fresh air into your web type. • font-weight controls weight and accepts numerical and descriptive (e.g. normal) values.
  126. Beautiful Web Typography Use a combination of families, styles, weights and to breath some fresh air into your web type. • font-weight controls weight and accepts numerical and descriptive (e.g. normal) values. • font-style controls… style. Accepts the descrip- tive values (normal, italic, and oblique).
  127. Beautiful Web Typography Use a combination of families, styles, weights and to breath some fresh air into your web type. • font-weight controls weight and accepts numerical and descriptive (e.g. normal) values. • font-style controls… style. Accepts the descrip- tive values (normal, italic, and oblique). • font-variant controls case and accepts the values normal and small-caps.
  128. Beautiful Web Typography
  129. Beautiful Web Typography roman (‘normal’)
  130. Beautiful Web Typography roman (‘normal’)
  131. Beautiful Web Typography roman (‘normal’) italic
  132. Beautiful Web Typography roman (‘normal’) italic ≠ oblique
  133. Beautiful Web Typography roman (‘normal’) italic ≠ oblique
  134. Beautiful Web Typography roman (‘normal’) italic ≠ oblique
  135. Beautiful Web Typography roman (‘normal’) italic ≠ oblique ultralight regular bold
  136. Beautiful Web Typography roman (‘normal’) italic ≠ oblique ultralight regular bold
  137. Beautiful Web Typography roman (‘normal’) italic ≠ oblique ultralight regular bold & bold italic condensed
  138. Beautiful Web Typography roman (‘normal’) italic ≠ oblique ultralight regular bold & bold italic condensed
  139. Beautiful Web Typography roman (‘normal’) italic ≠ oblique ultralight regular bold & bold italic condensed S MALL - CAPITALS
  140. Beautiful Web Typography roman (‘normal’) italic ≠ oblique ultralight regular bold & bold italic condensed S MALL - CAPITALS
  141. Web Typography
  142. Web Typography TRACKING
  143. Web Typography TRACKING T RACKING
  144. Web Typography TRACKING T RACKING Letter-spacing
  145. Web Typography TRACKING T RACKING Letter-spacing Letter-spacing
  146. Beautiful Web Typography
  147. Beautiful Web Typography Letʼs see some loose word- spacing in action…
  148. Beautiful Web Typography Letʼs see some loose word- spacing in action… And now both loose word-spacing and tracking featured together.
  149. Beautiful Web Typography
  150. Beautiful Web Typography And finally, the recent popular trend of negative tracking.
  151. Beautiful Web Typography
  152. Beautiful Web Typography Tracking and word-spacing can help differentiate, aiding readability by removing disruption.
  153. Beautiful Web Typography Tracking and word-spacing can help differentiate, aiding readability by removing disruption. E.g. setting acronyms or numerical tabular data.
  154. Beautiful Web Typography
  155. Beautiful Web Typography Full-capital acronyms, along with other full-cap- sized glyphs can disturb the flow of the text:
  156. Beautiful Web Typography Full-capital acronyms, along with other full-cap- sized glyphs can disturb the flow of the text: Lorem ipsum dolor sit amet, NASA consectetur adipiscing et. Vestibulum elit pellentesque; habitant orci tristique senectus et 4,962 malesuada fames ac turpis egestas HTML sit lectus.
  157. Beautiful Web Typography Full-capital acronyms, along with other full-cap- sized glyphs can disturb the flow of the text: Lorem ipsum dolor sit amet, NASA consectetur adipiscing et. Vestibulum elit pellentesque; habitant orci tristique senectus et 4,962 malesuada fames ac turpis egestas HTML sit lectus. Lorem ipsum dolor sit amet, NASA consectetur adipiscing et. Vestibulum elit pellentesque; habitant orci tristique senectus et , malesuada fames ac turpis egestas HTML sit lectus.
  158. Beautiful Web Typography
  159. Beautiful Web Typography • letter-spacing and word-spacing controls tracking and word-spacing respectively. Both take numerical values and normal.
  160. Beautiful Web Typography • letter-spacing and word-spacing controls tracking and word-spacing respectively. Both take numerical values and normal. Sadly no property for controlling figure variants— hopes set for CSS 3. For now use Georgia which (only) features hanging or ‘old-style’ figures.
  161. Beautiful Web Typography
  162. Beautiful Web Typography • font-size controls… font sizes. Takes numerical and descriptive values. Most user agents (browsers) set default value at 16px.
  163. Beautiful Web Typography • font-size controls… font sizes. Takes numerical and descriptive values. Most user agents (browsers) set default value at 16px. Size font sizes relatively using ems or %.
  164. Beautiful Web Typography • font-size controls… font sizes. Takes numerical and descriptive values. Most user agents (browsers) set default value at 16px. Size font sizes relatively using ems or %. An em is a relative unit best to be thought of as a box. It is relative to the point size of a specific font (i.e. 1 em in a 12 point typeface is 12 point).
  165. Beautiful Web Typography Why?
  166. Beautiful Web Typography Why? • Some UA s don’t support font-resizing (Ctrl + +/-) or page scaling when measurements are defined in absolute terms.
  167. Beautiful Web Typography Why? • Some UA s don’t support font-resizing (Ctrl + +/-) or page scaling when measurements are defined in absolute terms. • JS -based text resize widgets ≠ text accessibility.
  168. Beautiful Web Typography Why? • Some UA s don’t support font-resizing (Ctrl + +/-) or page scaling when measurements are defined in absolute terms. • JS -based text resize widgets ≠ text accessibility. • Many devices and many user agents—be careful in making assumptions.
  169. Beautiful Web Typography
  170. Beautiful Web Typography Key: remember font sizes are inherited: parents → children.
  171. Beautiful Web Typography Key: remember font sizes are inherited: parents → children. To calculate, find what one pixel is in ems and then multiply by the desired font size (in pixels):
  172. Beautiful Web Typography Key: remember font sizes are inherited: parents → children. To calculate, find what one pixel is in ems and then multiply by the desired font size (in pixels): 1 ÷ parent font-size × required pixel value = em value
  173. Beautiful Web Typography .% trick
  174. Beautiful Web Typography .% trick Simplify your calculations. Consider: p { font-size: 80%; } blockquote { font-size: 80%; }
  175. Beautiful Web Typography .% trick Simplify your calculations. Consider: p { font-size: 80%; } blockquote { font-size: 80%; } 80% of 16px is 12.8px, so p and blockquote elements will be that size, but what happens when we put a p element inside a blockquote element? The parent (blockquote) is 12.8px so the p will be rendered at 80% of that: 10.42px.
  176. Beautiful Web Typography .% trick (cont’d) In 2004 Richard Rutter wrote an article outlining a trick he used to make these calculations simpler:
  177. Beautiful Web Typography .% trick (cont’d) In 2004 Richard Rutter wrote an article outlining a trick he used to make these calculations simpler: • browsers have common default size of 16px; thus:
  178. Beautiful Web Typography .% trick (cont’d) In 2004 Richard Rutter wrote an article outlining a trick he used to make these calculations simpler: • browsers have common default size of 16px; thus: • set body to 62.5% and reset all to 10px; thus:
  179. Beautiful Web Typography .% trick (cont’d) In 2004 Richard Rutter wrote an article outlining a trick he used to make these calculations simpler: • browsers have common default size of 16px; thus: • set body to 62.5% and reset all to 10px; thus: • from here calculations are simpler for direct descendants of the body, e.g. 12px = 1.2em; 8px = 0.8em. Further nested elements are (still) relative.
  180. Beautiful Web Typography
  181. Beautiful Web Typography To find an element’s font size in absolute terms (e.g. pixels) you can use the Firefox Web Develop Extension, Information → Display Element Information.
  182. Beautiful Web Typography Stick it to a scale Don’t just arbitrarily set type; use a scale:
  183. Beautiful Web Typography Stick it to a scale Don’t just arbitrarily set type; use a scale: 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72. the “classic scale” 9, 10, 11, another scale 24,12, 13, 14, 18, 36, 48, 64, 72, 96. 8, 13, 21, 34, 55, scale based on the Fibonacci sequence 89.
  184. Beautiful Web Typography
  185. Beautiful Web Typography At small sizes font-decoration: underline; can render descender glyphs (g, j, p, q, y) difficult to read: use border-bottom: 1px solid;
  186. Beautiful Web Typography At small sizes font-decoration: underline; can render descender glyphs (g, j, p, q, y) difficult to read: use border-bottom: 1px solid; …consectetuer adipiscing elit… …adipiscing elit…
  187. Beautiful Web Typography At small sizes font-decoration: underline; can render descender glyphs (g, j, p, q, y) difficult to read: use border-bottom: 1px solid; …consectetuer adipiscing elit… …adipiscing elit… …consectetuer adipiscing elit… …adipiscing elit…
  188. Beautiful Web Typography
  189. Beautiful Web Typography Correct glyphs
  190. Beautiful Web Typography Correct glyphs Consider: ' "
  191. Beautiful Web Typography Correct glyphs Consider: 1'61" ' "
  192. Beautiful Web Typography "is is a group of words surrounded by a bunch of tick marks."
  193. Beautiful Web Typography “is is a quotation!” - Jeff Cro
  194. Beautiful Web Typography ‘’ “”
  195. Beautiful Web Typography
  196. Beautiful Web Typography - hyphen Mary-Anne, Dominique Strauss-Kahn – en dash April–May, ages –, pp. – — em dash Phrase marker—not spaced—like this. – minus 5–4=1
  197. Beautiful Web Typography “ opening double quote &ldquo; ” closing double quote &rdquo; ‘ opening single quote &lsquo; ’ closing single quote &rsquo; – en dash &ndash; — em dash &mdash; − minus &minus; × multiplication &times; … ellipsis &hellip;
  198. Beautiful Web Typography Smartypants et al.
  199. Beautiful Web Typography Smartypants et al. ‘Doing something repetitive? Likely you’re doing it wrong.’
  200. Beautiful Web Typography Smartypants et al. ‘Doing something repetitive? Likely you’re doing it wrong.’ Smartypants et al. are scripts that translate plain ASCII characters into “smart” typographic (x)HTML entities (not just for punctuation).
  201. Beautiful Web Typography Smartypants et al. ‘Doing something repetitive? Likely you’re doing it wrong.’ Smartypants et al. are scripts that translate plain ASCII characters into “smart” typographic (x)HTML entities (not just for punctuation). • Smartypants (PHP , Perl, & Movable Type);
  202. Beautiful Web Typography Smartypants et al. ‘Doing something repetitive? Likely you’re doing it wrong.’ Smartypants et al. are scripts that translate plain ASCII characters into “smart” typographic (x)HTML entities (not just for punctuation). • Smartypants (PHP , Perl, & Movable Type); • Typogrify (Python/Django);
  203. Beautiful Web Typography Smartypants et al. ‘Doing something repetitive? Likely you’re doing it wrong.’ Smartypants et al. are scripts that translate plain ASCII characters into “smart” typographic (x)HTML entities (not just for punctuation). • Smartypants (PHP , Perl, & Movable Type); • Typogrify (Python/Django); • wp-typogrify (WordPress);
  204. Beautiful Web Typography Smartypants et al. ‘Doing something repetitive? Likely you’re doing it wrong.’ Smartypants et al. are scripts that translate plain ASCII characters into “smart” typographic (x)HTML entities (not just for punctuation). • Smartypants (PHP , Perl, & Movable Type); • Typogrify (Python/Django); • wp-typogrify (WordPress); • Markdown et al., …
  205. Beautiful Web Typography
  206. Beautiful Web Typography Give ampersands love
  207. Beautiful Web Typography Give ampersands love Italic ampersand variants are often much prettier than their common roman counterparts:
  208. Beautiful Web Typography Give ampersands love Italic ampersand variants are often much prettier than their common roman counterparts: &&&&&
  209. Beautiful Web Typography Give ampersands love Italic ampersand variants are often much prettier than their common roman counterparts: &&&&& &&&&&
  210. Beautiful Web Typography Marking paragraphs
  211. Beautiful Web Typography Marking paragraphs Don’t be afraid to mark new paragraphs with indents, outdents, a plain white-line, a pilcrow (¶) or other ornament, versal and/or headers…
  212. Beautiful Web Typography Marking paragraphs Don’t be afraid to mark new paragraphs with indents, outdents, a plain white-line, a pilcrow (¶) or other ornament, versal and/or headers… …or a combination thereof.
  213. Beautiful Web Typography Marking paragraphs Don’t be afraid to mark new paragraphs with indents, outdents, a plain white-line, a pilcrow (¶) or other ornament, versal and/or headers… …or a combination thereof. See: http://tinyurl.com/para-typography.
  214. Beautiful Web Typography Measures The measure is the length of a single line. It is important to select a good measure for running text. Do this with the width property.
  215. Beautiful Web Typography Measures The measure is the length of a single line. It is important to select a good measure for running text. Do this with the width property. Ideally these should be relative to the font size, such that the type scales proportionately to the measure; use ems or percentages.
  216. Beautiful Web Typography Measures (cont’d)
  217. Beautiful Web Typography Measures (cont’d) Web type generally benefits from smaller measures than those in print. A good ballpark is 10–15 words/75–100 characters per line for body copy, single column.
  218. Beautiful Web Typography Measures (cont’d) Web type generally benefits from smaller measures than those in print. A good ballpark is 10–15 words/75–100 characters per line for body copy, single column. Generally use flush-left (text-align: left;) for running text, particularly when set in a narrow measure. Justification can work at ample measures and better with serif typefaces.
  219. Beautiful Web Typography Leading (line-height)
  220. Beautiful Web Typography Leading (line-height) Don’t forget to set an ample leading for running text! Done using the line-height property and you can use a unit-less number (e.g. 1.5 which acts as a multiplier of the font size);
  221. Beautiful Web Typography Leading (line-height) Don’t forget to set an ample leading for running text! Done using the line-height property and you can use a unit-less number (e.g. 1.5 which acts as a multiplier of the font size); Leading spans from baseline to baseline… and I need some more text to illustrate the point. :)
  222. Beautiful Web Typography Hanging punctuation Traditionally punctuation marks, bullets, lists, hyphens, and brackets all hang in the margin.
  223. Beautiful Web Typography Hanging punctuation Traditionally punctuation marks, bullets, lists, hyphens, and brackets all hang in the margin. “Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer a odio. Vivamus placerat felis id risus. Cras mollis est. Suspendisse molestie et imperdiet libero. Etiam mollis libero vulputate lorem nullam ut leo. Etiam (at turpis non massa rhoncus sodales.)”
  224. Beautiful Web Typography Hanging punctuation (cont’d) Simply with lists by setting their margins to zero.
  225. Beautiful Web Typography Hanging punctuation (cont’d) Simply with lists by setting their margins to zero. Possible for opening punctuation marks using background-image or a negative text-indent. CSS 3 will hopefully support hanging punctuation with a proposed hanging-punctuation property.
  226. Beautiful Web Typography Hanging punctuation (cont’d) Simply with lists by setting their margins to zero. Possible for opening punctuation marks using background-image or a negative text-indent. CSS 3 will hopefully support hanging punctuation with a proposed hanging-punctuation property. See: http://tinyurl.com/w3c-hanging-punct.
  227. Beautiful Web Typography Web: text = UI Distinguish content elements from application controls (e.g. a user’s username and description from a logout link or text-field title).
  228. Beautiful Web Typography Web: text = UI Distinguish content elements from application controls (e.g. a user’s username and description from a logout link or text-field title). Often done with colour (e.g. setting controls gray), size (making them smaller) and typefaces.
  229. Beautiful Web Typography
  230. Beautiful Web Typography
  231. Beautiful Web Typography
  232. Beautiful Web Typography Page (grid).
  233. Beautiful Web Typography Page (grid). Grids bring order to your page and help specify where things should go.
  234. Beautiful Web Typography Page (grid). Grids bring order to your page and help specify where things should go. Remember to put in apt “gutters” (margins between columns) to separate your columns.
  235. Beautiful Web Typography Page (grid). Grids bring order to your page and help specify where things should go. Remember to put in apt “gutters” (margins between columns) to separate your columns. Ruler guides help enormously: use the Web Developer extension for Firefox or ruler background images (also see the YUI library).
  236. Beautiful Web Typography
  237. Beautiful Web Typography
  238. Beautiful Web Typography
  239. Beautiful Web Typography Addendum
  240. Beautiful Web Typography Addendum Please don’t use Comic Sans unless you have a very, very good reason.
  241. : ---
  242. Beautiful Web Typography Inspirational typophiles • Cameron Moll: cameronmoll.com • Jeff Croft: jeffcroft.com • Jeffrey Zeldman: zeldman.com • Mark Boulton: markboulton.co.uk • Richard Rutter clagnut.com • Jon Tan: jontangerine.com
  243. Beautiful Web Typography Resources & reading • http://webtypography.net • http://alistapart.com/topics/design/typography • http://usabletype.org • http://ilovetypography.com • http://www.papress.com/other/thinkingwithtype/
  244. Thanks! klepas@klepas.org klepas.org @klepas Licensed CC BY -NC -ND http://creativecommons.org/licenses/by-nc-nd/2.5/au/
  • TeresaFrantz1

    Nov. 28, 2021
  • cliqtechno

    Apr. 12, 2019
  • muizibrahim

    Feb. 18, 2017
  • mythii

    Jan. 8, 2017
  • MdMahafuzurRahaman

    Jun. 21, 2016
  • hiTabs

    Jun. 2, 2016
  • rajkumarmagar

    Mar. 2, 2016
  • 3shao

    Sep. 23, 2015
  • shreysethi56

    Aug. 19, 2014
  • andreww2

    Apr. 17, 2014
  • akbarwibawa

    Feb. 18, 2014
  • mohamedminhaz

    Dec. 17, 2013
  • ochoto

    Nov. 8, 2012
  • PhiloCoddeau

    May. 3, 2012
  • raptup

    Mar. 12, 2012
  • yunaboelmans

    Feb. 3, 2012
  • itjil

    Aug. 22, 2011
  • imara0604

    Jun. 9, 2011
  • amyahya

    Mar. 26, 2011
  • srgsmms

    Jan. 13, 2011

The fifth rendition of my Beautiful Web Typography with some updates, additional info, more links and whatnot. A new section has been added focusing on webfonts (font linking and embedding) with the recent developments in that regard. Kudos should go out to the chaps listed in the end as well as inspirational peeps like Ellen Lupton, whose categorisation of things type into letter, text, grid I’ve used to structure this talk.

Aufrufe

Aufrufe insgesamt

89.117

Auf Slideshare

0

Aus Einbettungen

0

Anzahl der Einbettungen

3.936

Befehle

Downloads

827

Geteilt

0

Kommentare

0

Likes

52

×