SlideShare ist ein Scribd-Unternehmen logo
1 von 252
Downloaden Sie, um offline zu lesen
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 aficionado;
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’.
Beautiful Web Typography




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




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

                       Hands up and make yourselves known.
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 and setting type
             with the purpose of honoring the text it sets.
Beautiful Web Typography
Beautiful Web Typography




             Typography can bring aesthetic order to
             information, helping users read & navigate.
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 today are
                                 info-heavy.
Beautiful Web Typography




                                       premise:


                           The intertubes today are
                                 info-heavy.

                                Much of it is textual.
Beautiful Web Typography




                                       premise:


                           The intertubes today are
                                  info-heavy.

                                Much of it is textual.
                             Much of it is a pain to read.
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-serif only for readability?
Beautiful Web Typography




             Assumptions?
             It sucks? It’s boring?
         1. Limited to sans-serif only for readability?
        2. Only ‘web-safe’ fonts?
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?
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
             various (x)HTML elements. This makes it a pain for
             cross-browser consistency.
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.
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 (tracking/letter-spacing)
Beautiful Web Typography




             Letter & Text
          • typeface (font) and style
          • spacing (tracking/letter-spacing)
          • individual glyphs
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
             monospace
Beautiful Web Typography
Beautiful Web Typography




             Mixing typefaces requires special attention. Try to
             align x-heights and sizes. X-heights?
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.
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.
Beautiful Web Typography
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.:
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;
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.
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.
Beautiful Web Typography
Beautiful Web Typography




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




             Arial
             Verdana
             Courier New
             Times New Roman
             Georgia
             Trebuchet MS
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)
        2. sIFR or other JS and Flash replacement
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)
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
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
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.
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?
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?
Beautiful Web Typography




       . Installed or web-safe fonts
Beautiful Web Typography




       . Installed or web-safe fonts
             Simply call upon them directly in your font stack
             declarations, e.g.:
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;
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;
Beautiful Web Typography (#5)
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. serif, sans-serif, monospace)
Beautiful Web Typography




       . s et al.
             Flash text replacement that in unison with JS
             replaces type using type from a Flash file.
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:
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;
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 ;
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.
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 .
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:
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;
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;
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;
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’.
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:
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;
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;
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 .
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.
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:
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;
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);
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.
Beautiful Web Typography (#5)
Beautiful Web Typography (#5)
Beautiful Web Typography (#5)
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.
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:
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);
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;
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.
Beautiful Web Typography (#5)
Beautiful Web Typography (#5)
Beautiful Web Typography
Beautiful Web Typography (#5)
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.
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:
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;
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;
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 );
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.
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:
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;
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;
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.
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.
Beautiful Web Typography
Beautiful Web Typography




                           Meanwhile:
Beautiful Web Typography




                               Meanwhile:

                     Webfonts aren’t the holy grail of web
                            typography problems…
Beautiful Web Typography




                               Meanwhile:

                     Webfonts aren’t the holy grail of web
                            typography problems…


         “Typography is not picking a ‘cool’ font.”
                                              – Jeff Cro
Beautiful Web Typography
Beautiful Web Typography




             Also remember, most fonts available from
             type foundries are not optimised for screen
             usage; they’re for print.
Beautiful Web Typography
Beautiful Web Typography




             Use a combination of families, styles, weights and
             to breath some fresh air into your web type.
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.
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).
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.
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 bold
Beautiful Web Typography




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




             roman (‘normal’)
             italic ≠ oblique
             ultralight regular bold
             & bold italic condensed
Beautiful Web Typography




             roman (‘normal’)
             italic ≠ oblique
             ultralight regular bold
             & bold italic condensed
Beautiful Web Typography




             roman (‘normal’)
             italic ≠ oblique
             ultralight regular bold
             & bold italic condensed
             S MALL - CAPITALS
Beautiful Web Typography




             roman (‘normal’)
             italic ≠ oblique
             ultralight regular bold
             & bold italic condensed
             S MALL - CAPITALS
Beautiful Web Typography (#5)
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 both loose word-spacing
             and tracking featured together.
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 by removing disruption.
Beautiful Web Typography




             Tracking and word-spacing can help differentiate,
             aiding readability by removing disruption.

             E.g. setting acronyms or numerical tabular data.
Beautiful Web Typography
Beautiful Web Typography




             Full-capital acronyms, along with other full-cap-
             sized glyphs can disturb the flow of the text:
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.
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.
Beautiful Web Typography
Beautiful Web Typography




          • letter-spacing and word-spacing controls
             tracking and word-spacing respectively. Both take
             numerical values and normal.
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.
Beautiful Web Typography
Beautiful Web Typography




          • font-size controls… font sizes. Takes numerical
             and descriptive values. Most user agents
             (browsers) set default value at 16px.
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 %.
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).
Beautiful Web Typography




             Why?
Beautiful Web Typography




             Why?
          • Some UA s don’t support font-resizing (Ctrl + +/-) or
             page scaling when measurements are defined in
             absolute terms.
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.
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.
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.

             To calculate, find what one pixel is in ems and
             then multiply by the desired font size (in pixels):
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
Beautiful Web Typography




             .% trick
Beautiful Web Typography




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

             p { font-size: 80%; }
             blockquote { font-size: 80%; }
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.
Beautiful Web Typography




             .% trick (cont’d)
             In 2004 Richard Rutter wrote an article outlining a
             trick he used to make these calculations simpler:
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:
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:
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.
Beautiful Web Typography
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.
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:


               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.
Beautiful Web Typography
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;
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…
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…
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 by a
                           bunch of tick marks."
Beautiful Web Typography




                           “is is a quotation!”
                                           - Jeff Cro
Beautiful Web Typography




                           ‘’ “”
                              ’
Beautiful Web Typography
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
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;
Beautiful Web Typography




             Smartypants et al.
Beautiful Web Typography




             Smartypants et al.
            ‘Doing something repetitive? Likely you’re doing it wrong.’
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).
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);
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);
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);
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., …
Beautiful Web Typography
Beautiful Web Typography




             Give ampersands love
Beautiful Web Typography




             Give ampersands love
             Italic ampersand variants are often much prettier
             than their common roman counterparts:
Beautiful Web Typography




             Give ampersands love
             Italic ampersand variants are often much prettier
             than their common roman counterparts:



                           &&&&&
Beautiful Web Typography




             Give ampersands love
             Italic ampersand variants are often much prettier
             than their common roman counterparts:



                     &&&&&
                     &&&&&
Beautiful Web Typography




             Marking paragraphs
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…
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.
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.
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.
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.
Beautiful Web Typography




             Measures (cont’d)
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.
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.
Beautiful Web Typography




             Leading (line-height)
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);
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. :)
Beautiful Web Typography




             Hanging punctuation
             Traditionally punctuation marks, bullets, lists,
             hyphens, and brackets all hang in the margin.
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.)”
Beautiful Web Typography




             Hanging punctuation (cont’d)
             Simply with lists by setting their margins to zero.
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.
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.
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).
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.
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
             where things should go.
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.
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).
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
             very, very good reason.
: ---
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
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/
Thanks!
            klepas@klepas.org

            klepas.org

            @klepas



Licensed CC BY -NC -ND
http://creativecommons.org/licenses/by-nc-nd/2.5/au/

Weitere ähnliche Inhalte

Was ist angesagt?

Open Standards in the Walled Garden
Open Standards in the Walled GardenOpen Standards in the Walled Garden
Open Standards in the Walled Gardendigitalbindery
 
Digital Publishing PDXDMC
Digital Publishing PDXDMCDigital Publishing PDXDMC
Digital Publishing PDXDMCdigitalbindery
 
Epub in the wild
Epub in the wildEpub in the wild
Epub in the wildliz_castro
 
Principles Of Web Design Workshop
Principles Of Web Design WorkshopPrinciples Of Web Design Workshop
Principles Of Web Design WorkshopGavin Elliott
 
Jsm2003 02-with-narration
Jsm2003 02-with-narrationJsm2003 02-with-narration
Jsm2003 02-with-narrationampersandmatt
 
Webtech ’09 – Die Zukunft des Webs beginnt jetzt
Webtech ’09 – Die Zukunft des Webs beginnt jetztWebtech ’09 – Die Zukunft des Webs beginnt jetzt
Webtech ’09 – Die Zukunft des Webs beginnt jetztEric Eggert
 
WordCamp 2012 - WordPress Webapps
WordCamp 2012 - WordPress WebappsWordCamp 2012 - WordPress Webapps
WordCamp 2012 - WordPress Webappstjasko
 
Website tips & tricks
Website tips & tricksWebsite tips & tricks
Website tips & tricksindianheadfls
 
Design and CSS
Design and CSSDesign and CSS
Design and CSSnolly00
 
Trendsetting: Web Design and Beyond
Trendsetting: Web Design and BeyondTrendsetting: Web Design and Beyond
Trendsetting: Web Design and BeyondAndy Stratton
 
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)Chris Mills
 
Selfish Accessibility: WordCamp London 2017
Selfish Accessibility: WordCamp London 2017Selfish Accessibility: WordCamp London 2017
Selfish Accessibility: WordCamp London 2017Adrian Roselli
 
Mobilizing wordpress WordCamp Edmonton 2011
Mobilizing wordpress WordCamp Edmonton 2011Mobilizing wordpress WordCamp Edmonton 2011
Mobilizing wordpress WordCamp Edmonton 2011Curtis McHale
 
Typography teaching presentation
Typography teaching presentationTypography teaching presentation
Typography teaching presentationBrianna Morris
 

Was ist angesagt? (16)

Open Standards in the Walled Garden
Open Standards in the Walled GardenOpen Standards in the Walled Garden
Open Standards in the Walled Garden
 
Digital Publishing PDXDMC
Digital Publishing PDXDMCDigital Publishing PDXDMC
Digital Publishing PDXDMC
 
Down and Dirty EPUB 3
Down and Dirty EPUB 3Down and Dirty EPUB 3
Down and Dirty EPUB 3
 
Epub in the wild
Epub in the wildEpub in the wild
Epub in the wild
 
Principles Of Web Design Workshop
Principles Of Web Design WorkshopPrinciples Of Web Design Workshop
Principles Of Web Design Workshop
 
Ebook bootcamp
Ebook bootcampEbook bootcamp
Ebook bootcamp
 
Jsm2003 02-with-narration
Jsm2003 02-with-narrationJsm2003 02-with-narration
Jsm2003 02-with-narration
 
Webtech ’09 – Die Zukunft des Webs beginnt jetzt
Webtech ’09 – Die Zukunft des Webs beginnt jetztWebtech ’09 – Die Zukunft des Webs beginnt jetzt
Webtech ’09 – Die Zukunft des Webs beginnt jetzt
 
WordCamp 2012 - WordPress Webapps
WordCamp 2012 - WordPress WebappsWordCamp 2012 - WordPress Webapps
WordCamp 2012 - WordPress Webapps
 
Website tips & tricks
Website tips & tricksWebsite tips & tricks
Website tips & tricks
 
Design and CSS
Design and CSSDesign and CSS
Design and CSS
 
Trendsetting: Web Design and Beyond
Trendsetting: Web Design and BeyondTrendsetting: Web Design and Beyond
Trendsetting: Web Design and Beyond
 
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
 
Selfish Accessibility: WordCamp London 2017
Selfish Accessibility: WordCamp London 2017Selfish Accessibility: WordCamp London 2017
Selfish Accessibility: WordCamp London 2017
 
Mobilizing wordpress WordCamp Edmonton 2011
Mobilizing wordpress WordCamp Edmonton 2011Mobilizing wordpress WordCamp Edmonton 2011
Mobilizing wordpress WordCamp Edmonton 2011
 
Typography teaching presentation
Typography teaching presentationTypography teaching presentation
Typography teaching presentation
 

Ähnlich wie Beautiful Web Typography (#5)

Setting standards-friendly web type
Setting standards-friendly web typeSetting standards-friendly web type
Setting standards-friendly web typePascal Klein
 
Webfonts: Demystified
Webfonts: DemystifiedWebfonts: Demystified
Webfonts: DemystifiedMel Choyce
 
New Web Typography
New Web TypographyNew Web Typography
New Web TypographyMonotype
 
Controlling Web Typography
Controlling Web TypographyControlling Web Typography
Controlling Web TypographyTrent Walton
 
With Great Power, a lecture on web typography
With Great Power, a lecture on web typographyWith Great Power, a lecture on web typography
With Great Power, a lecture on web typographyErika Tarte
 
Typography For The Web
Typography For The WebTypography For The Web
Typography For The WebChristy Gurga
 
Web Fonts: Why Bother?
Web Fonts: Why Bother?Web Fonts: Why Bother?
Web Fonts: Why Bother?Greg Veen
 
Progressive Enhancement & Intentional Degradation 2
Progressive Enhancement & Intentional Degradation 2Progressive Enhancement & Intentional Degradation 2
Progressive Enhancement & Intentional Degradation 2elliotjaystocks
 
Font embedding for the web
Font embedding for the webFont embedding for the web
Font embedding for the webWojtek Zając
 
Solving the Challenges of Asian Web Fonts by Bill Davis
Solving the Challenges of Asian Web Fonts by Bill DavisSolving the Challenges of Asian Web Fonts by Bill Davis
Solving the Challenges of Asian Web Fonts by Bill DavisMonotype
 
Web Typography 101
Web Typography 101Web Typography 101
Web Typography 101breahnag
 
Web Typography Tips
Web Typography TipsWeb Typography Tips
Web Typography TipsSara Cannon
 
Fonts on the Web - a guide to web fonts
Fonts on the Web - a guide to web fontsFonts on the Web - a guide to web fonts
Fonts on the Web - a guide to web fontsPrototype Interactive
 
Web typography
Web typographyWeb typography
Web typographyglvsav37
 
Responsive Web Design & Typography
Responsive Web Design & TypographyResponsive Web Design & Typography
Responsive Web Design & TypographyDanny Calders
 
Making drupal beautiful with web fonts
Making drupal beautiful with web fontsMaking drupal beautiful with web fonts
Making drupal beautiful with web fontsFour Kitchens
 

Ähnlich wie Beautiful Web Typography (#5) (20)

Setting standards-friendly web type
Setting standards-friendly web typeSetting standards-friendly web type
Setting standards-friendly web type
 
Webfonts: Demystified
Webfonts: DemystifiedWebfonts: Demystified
Webfonts: Demystified
 
New Web Typography
New Web TypographyNew Web Typography
New Web Typography
 
Controlling Web Typography
Controlling Web TypographyControlling Web Typography
Controlling Web Typography
 
With Great Power, a lecture on web typography
With Great Power, a lecture on web typographyWith Great Power, a lecture on web typography
With Great Power, a lecture on web typography
 
new fonts for the web
new fonts for the webnew fonts for the web
new fonts for the web
 
Typography For The Web
Typography For The WebTypography For The Web
Typography For The Web
 
Web Fonts: Why Bother?
Web Fonts: Why Bother?Web Fonts: Why Bother?
Web Fonts: Why Bother?
 
(Web ) Typography
(Web ) Typography(Web ) Typography
(Web ) Typography
 
Progressive Enhancement & Intentional Degradation 2
Progressive Enhancement & Intentional Degradation 2Progressive Enhancement & Intentional Degradation 2
Progressive Enhancement & Intentional Degradation 2
 
Font embedding for the web
Font embedding for the webFont embedding for the web
Font embedding for the web
 
Solving the Challenges of Asian Web Fonts by Bill Davis
Solving the Challenges of Asian Web Fonts by Bill DavisSolving the Challenges of Asian Web Fonts by Bill Davis
Solving the Challenges of Asian Web Fonts by Bill Davis
 
Web Typography 101
Web Typography 101Web Typography 101
Web Typography 101
 
The Trouble With Type
The Trouble With TypeThe Trouble With Type
The Trouble With Type
 
Web Typography Tips
Web Typography TipsWeb Typography Tips
Web Typography Tips
 
Web Typography
Web TypographyWeb Typography
Web Typography
 
Fonts on the Web - a guide to web fonts
Fonts on the Web - a guide to web fontsFonts on the Web - a guide to web fonts
Fonts on the Web - a guide to web fonts
 
Web typography
Web typographyWeb typography
Web typography
 
Responsive Web Design & Typography
Responsive Web Design & TypographyResponsive Web Design & Typography
Responsive Web Design & Typography
 
Making drupal beautiful with web fonts
Making drupal beautiful with web fontsMaking drupal beautiful with web fonts
Making drupal beautiful with web fonts
 

Kürzlich hochgeladen

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

Kürzlich hochgeladen (20)

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

Beautiful Web Typography (#5)

  • 1. Beautiful Web Typography ❦ Letter, text, & page Simon Pascal Klein — @klepas Version 5
  • 4. Beautiful Web Typography I’m Pascal Klein.
  • 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.
  • 14. Beautiful Web Typography Typography can bring aesthetic order to information, helping users read & navigate.
  • 16. Beautiful Web Typography i.e. make textual stuff look pretty. ☻
  • 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.
  • 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?
  • 30. Beautiful Web Typography Not quite. (Yay!)
  • 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)
  • 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.
  • 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
  • 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
  • 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.
  • 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.
  • 60. Beautiful Web Typography …but only ‘web safe’ fonts?
  • 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;
  • 77. Beautiful Web Typography Font stacks:
  • 78. Beautiful Web Typography Font stacks: • desired
  • 79. Beautiful Web Typography Font stacks: • desired • fallback
  • 80. Beautiful Web Typography Font stacks: • desired • fallback • generic (e.g. serif, sans-serif, monospace)
  • 81. Beautiful Web Typography . s et al. Flash text replacement that in unison with JS replaces type using type from a Flash file.
  • 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:
  • 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;
  • 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 ;
  • 85. 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.
  • 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 .
  • 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:
  • 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;
  • 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;
  • 90. 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;
  • 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’.
  • 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:
  • 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;
  • 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;
  • 95. 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 .
  • 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.
  • 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:
  • 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;
  • 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);
  • 100. 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.
  • 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.
  • 105. 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:
  • 106. 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);
  • 107. 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;
  • 108. 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.
  • 113. 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.
  • 114. 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:
  • 115. 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;
  • 116. 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;
  • 117. 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 );
  • 118. 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.
  • 119. 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:
  • 120. 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;
  • 121. 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;
  • 122. 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.
  • 123. 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.
  • 126. Beautiful Web Typography Meanwhile: Webfonts aren’t the holy grail of web typography problems…
  • 127. Beautiful Web Typography Meanwhile: Webfonts aren’t the holy grail of web typography problems… “Typography is not picking a ‘cool’ font.” – Jeff Cro
  • 129. Beautiful Web Typography Also remember, most fonts available from type foundries are not optimised for screen usage; they’re for print.
  • 131. Beautiful Web Typography Use a combination of families, styles, weights and to breath some fresh air into your web type.
  • 132. 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.
  • 133. 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).
  • 134. 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.
  • 136. Beautiful Web Typography roman (‘normal’)
  • 137. Beautiful Web Typography roman (‘normal’)
  • 138. Beautiful Web Typography roman (‘normal’) italic
  • 139. Beautiful Web Typography roman (‘normal’) italic ≠ oblique
  • 140. Beautiful Web Typography roman (‘normal’) italic ≠ oblique
  • 141. Beautiful Web Typography roman (‘normal’) italic ≠ oblique
  • 142. Beautiful Web Typography roman (‘normal’) italic ≠ oblique ultralight regular bold
  • 143. Beautiful Web Typography roman (‘normal’) italic ≠ oblique ultralight regular bold
  • 144. Beautiful Web Typography roman (‘normal’) italic ≠ oblique ultralight regular bold & bold italic condensed
  • 145. Beautiful Web Typography roman (‘normal’) italic ≠ oblique ultralight regular bold & bold italic condensed
  • 146. Beautiful Web Typography roman (‘normal’) italic ≠ oblique ultralight regular bold & bold italic condensed S MALL - CAPITALS
  • 147. Beautiful Web Typography roman (‘normal’) italic ≠ oblique ultralight regular bold & bold italic condensed S MALL - CAPITALS
  • 150. Web Typography TRACKING
  • 151. Web Typography TRACKING T RACKING
  • 152. Web Typography TRACKING T RACKING Letter-spacing
  • 153. Web Typography TRACKING T RACKING Letter-spacing Letter-spacing
  • 155. Beautiful Web Typography Letʼs see some loose word- spacing in action…
  • 156. Beautiful Web Typography Letʼs see some loose word- spacing in action… And now both loose word-spacing and tracking featured together.
  • 158. Beautiful Web Typography And finally, the recent popular trend of negative tracking.
  • 160. Beautiful Web Typography Tracking and word-spacing can help differentiate, aiding readability by removing disruption.
  • 161. Beautiful Web Typography Tracking and word-spacing can help differentiate, aiding readability by removing disruption. E.g. setting acronyms or numerical tabular data.
  • 163. Beautiful Web Typography Full-capital acronyms, along with other full-cap- sized glyphs can disturb the flow of the text:
  • 164. 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.
  • 165. 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.
  • 167. Beautiful Web Typography • letter-spacing and word-spacing controls tracking and word-spacing respectively. Both take numerical values and normal.
  • 168. 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.
  • 170. Beautiful Web Typography • font-size controls… font sizes. Takes numerical and descriptive values. Most user agents (browsers) set default value at 16px.
  • 171. 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 %.
  • 172. 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).
  • 174. Beautiful Web Typography Why? • Some UA s don’t support font-resizing (Ctrl + +/-) or page scaling when measurements are defined in absolute terms.
  • 175. 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.
  • 176. 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.
  • 178. Beautiful Web Typography Key: remember font sizes are inherited: parents → children.
  • 179. 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):
  • 180. 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
  • 181. Beautiful Web Typography .% trick
  • 182. Beautiful Web Typography .% trick Simplify your calculations. Consider: p { font-size: 80%; } blockquote { font-size: 80%; }
  • 183. 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.
  • 184. Beautiful Web Typography .% trick (cont’d) In 2004 Richard Rutter wrote an article outlining a trick he used to make these calculations simpler:
  • 185. 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:
  • 186. 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:
  • 187. 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.
  • 189. 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.
  • 190. Beautiful Web Typography Stick it to a scale Don’t just arbitrarily set type; use a scale:
  • 191. 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.
  • 193. 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;
  • 194. 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…
  • 195. 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…
  • 197. Beautiful Web Typography Correct glyphs
  • 198. Beautiful Web Typography Correct glyphs Consider: ' "
  • 199. Beautiful Web Typography Correct glyphs Consider: 1'61" ' "
  • 200. Beautiful Web Typography "is is a group of words surrounded by a bunch of tick marks."
  • 201. Beautiful Web Typography “is is a quotation!” - Jeff Cro
  • 202. Beautiful Web Typography ‘’ “” ’
  • 204. 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
  • 205. 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;
  • 206. Beautiful Web Typography Smartypants et al.
  • 207. Beautiful Web Typography Smartypants et al. ‘Doing something repetitive? Likely you’re doing it wrong.’
  • 208. 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).
  • 209. 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);
  • 210. 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);
  • 211. 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);
  • 212. 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., …
  • 214. Beautiful Web Typography Give ampersands love
  • 215. Beautiful Web Typography Give ampersands love Italic ampersand variants are often much prettier than their common roman counterparts:
  • 216. Beautiful Web Typography Give ampersands love Italic ampersand variants are often much prettier than their common roman counterparts: &&&&&
  • 217. Beautiful Web Typography Give ampersands love Italic ampersand variants are often much prettier than their common roman counterparts: &&&&& &&&&&
  • 218. Beautiful Web Typography Marking paragraphs
  • 219. 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…
  • 220. 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.
  • 221. 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.
  • 222. 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.
  • 223. 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.
  • 224. Beautiful Web Typography Measures (cont’d)
  • 225. 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.
  • 226. 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.
  • 227. Beautiful Web Typography Leading (line-height)
  • 228. 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);
  • 229. 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. :)
  • 230. Beautiful Web Typography Hanging punctuation Traditionally punctuation marks, bullets, lists, hyphens, and brackets all hang in the margin.
  • 231. 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.)”
  • 232. Beautiful Web Typography Hanging punctuation (cont’d) Simply with lists by setting their margins to zero.
  • 233. 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.
  • 234. 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.
  • 235. 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).
  • 236. 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.
  • 240. Beautiful Web Typography Page (grid).
  • 241. Beautiful Web Typography Page (grid). Grids bring order to your page and help specify where things should go.
  • 242. 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.
  • 243. 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).
  • 248. Beautiful Web Typography Addendum Please don’t use Comic Sans unless you have a very, very good reason.
  • 250. 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
  • 251. 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/
  • 252. Thanks! klepas@klepas.org klepas.org @klepas Licensed CC BY -NC -ND http://creativecommons.org/licenses/by-nc-nd/2.5/au/