Beautiful Web
Typography
 tips on de-sucking the web

Simon Pascal Klein
Web Typography             1




            Introduction
Web Typography                 2




            I’m Pascal Klein
Web Typography     3




            I...
Web Typography                                                3




            I...
         • work for a small web-dev c...
Web Typography                                                3




            I...
         • work for a small web-dev c...
Web Typography                                                3




            I...
         • work for a small web-dev c...
Web Typography   4
Web Typography                    4




            What is typography?
Web Typography                                                   4




            What is typography?
            ty•pog•...
Web Typography                   4




            serif   sans-serif
Web Typography                    4




            e difference


            serif    sans-serif
Web Typography                    5




            e Intertubes today
Web Typography                     5




            e Intertubes today
            Lots of information.
Web Typography                                         5




            e Intertubes today
            Lots of informati...
Web Typography                                         5




            e Intertubes today
            Lots of informati...
Web Typography   5
Web Typography                                                5




            Typography exists to bring order to inform...
Web Typography                                         6




          “Typography is not picking a ‘cool’ font.”
        ...
Web Typography                          7




             tips to de-suck the web
Web Typography                                                8




       . Starting out: reset
            All the brow...
Web Typography                                                8




       . Starting out: reset
            All the brow...
Web Typography                                                                  9




            body,div,dl,dt,dd,ul,ol,...
Web Typography                                                     10




       . Font sizing
            Font sizing is...
Web Typography                                                     11




     . Use ems
            An em is a relative...
Web Typography                                                     11




     . Use ems
            An em is a relative...
Web Typography                                                     11




     . Use ems
            An em is a relative...
Web Typography                                               12




 .. e . trick
            Relative font sizes ...
Web Typography                                                 12




 .. e . trick
            Relative font size...
Web Typography                                                   




 .. e . trick (cont’d)
            In 2004...
Web Typography                          14




 .. Differences in browser rounding
Web Typography                                                  14




 .. Differences in browser rounding
            M...
Web Typography                                                  14




 .. Differences in browser rounding
            M...
Web Typography                                                                             15




     . Stick it to a s...
Web Typography                                                     16




       . Use Smartypants or similar
           ...
Web Typography                           17




     . Quotation marks & apostrophes



                  ‘’ “”
        ...
Web Typography         18




                 ' "
Web Typography           19




                 1'61"
Web Typography                            20




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




                 “is is a quotation!”
                              ...
Web Typography    22




     . Dashes
Web Typography                                                       22




     . Dashes
                  - hyphen    ...
Web Typography                                                                          23




     . Advanced: hanging ...
Web Typography                                                       24




      . Advanced: hanging punctuation (cont’...
Web Typography                                                   25




       . Select a good measure

            e me...
Web Typography                                               26




       . Select a good measure (cond’t)
            A...
Web Typography                                                  26




       . Select a good measure (cond’t)
          ...
Web Typography                                                 27




       . Treat text as part of the UI
            D...
Web Typography   28
Web Typography   29
Web Typography                                                30




       . Use grids
            Grids bring order to ...
Web Typography   30
Web Typography   30
Web Typography               31




       . e little things
Web Typography                                                 31




       . e little things
         • Setting the bo...
Web Typography                                                 31




       . e little things
         • Setting the bo...
Web Typography                                                 31




       . e little things
         • Setting the bo...
Web Typography                                                 31




       . e little things
         • Setting the bo...
Web Typography                                                     32




       . e little things (cond’t)
         • D...
Web Typography                                                33




       . e little things (cond’t)
         • Don’t ...
Web Typography                                                33




       . e little things (cond’t)
         • Don’t ...
Web Typography                                                33




       . e little things (cond’t)
         • Don’t ...
Web Typography                34




       . I lied – one more
Web Typography                                              34




       . I lied – one more
            Please don’t us...
Web Typography                                                  25




            Free desktop specific
            Stick ...
ISBN : ---
Web Typography                                               KLEPAS @ KLEPAS . ORG




            Other reading & referen...
Web Typography                         KLEPAS @ KLEPAS . ORG




            Inspirational type nuts
          • http://ca...
Upcoming SlideShare
Loading in...5
×

Beautiful Web Typography: 7 tips on de-sucking the web

16,137

Published on

Beautiful Web Typography is possible. This presentation looked at 7 tips at how to make the Internet a lovelier and more beautiful place using simple typographic conventions through CSS and general practice.

Published in: Technology, Design
8 Comments
45 Likes
Statistics
Notes
No Downloads
Views
Total Views
16,137
On Slideshare
0
From Embeds
0
Number of Embeds
39
Actions
Shares
0
Downloads
670
Comments
8
Likes
45
Embeds 0
No embeds

No notes for slide

Transcript of "Beautiful Web Typography: 7 tips on de-sucking the web"

  1. 1. Beautiful Web Typography  tips on de-sucking the web Simon Pascal Klein
  2. 2. Web Typography 1 Introduction
  3. 3. Web Typography 2 I’m Pascal Klein
  4. 4. Web Typography 3 I...
  5. 5. Web Typography 3 I... • work for a small web-dev company based in Canberra and also operate on a free-lance basis;
  6. 6. Web Typography 3 I... • work for a small web-dev company based in Canberra and also operate on a free-lance basis; • try to use, and support Open Source soware;
  7. 7. Web Typography 3 I... • work for a small web-dev company based in Canberra and also operate on a free-lance basis; • try to use, and support Open Source soware; • write about typography and whatever else strikes me at the time on klepas.org.
  8. 8. Web Typography 4
  9. 9. Web Typography 4 What is typography?
  10. 10. Web Typography 4 What is 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.
  11. 11. Web Typography 4 serif sans-serif
  12. 12. Web Typography 4 e difference serif sans-serif
  13. 13. Web Typography 5 e Intertubes today
  14. 14. Web Typography 5 e Intertubes today Lots of information.
  15. 15. Web Typography 5 e Intertubes today Lots of information. Information Architecture deals with this primarily but there is another:
  16. 16. Web Typography 5 e Intertubes today Lots of information. Information Architecture deals with this primarily but there is another: Typography.
  17. 17. Web Typography 5
  18. 18. Web Typography 5 Typography exists to bring order to information by dividing and organizing – aiding readers in finding what they are looking for.
  19. 19. Web Typography 6 “Typography is not picking a ‘cool’ font.” – Jeff Cro
  20. 20. Web Typography 7  tips to de-suck the web
  21. 21. Web Typography 8 . Starting out: reset All the browsers have their own default styling for various ( X ) HTML elements. is makes it a pain for cross-browser consistency.
  22. 22. Web Typography 8 . Starting out: reset All the browsers have their own default styling for various ( X ) HTML elements. is makes it a pain for cross-browser consistency. Fix? Simply reset everything.
  23. 23. Web Typography 9 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;} ol,ul {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. is one above is from the Yahoo! UI library.
  24. 24. Web Typography 10 . Font sizing Font sizing is done using font-size. It uses any of the CSS numerical measurements and is either done in absolute or relative terms. Sizing in pixels is absolute whilst sizing in ems or percentages are an example of relative terms.
  25. 25. Web Typography 11 . Use ems 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.  em in a  point typeface is  point).
  26. 26. Web Typography 11 . Use ems 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.  em in a  point typeface is  point). 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
  27. 27. Web Typography 11 . Use ems 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.  em in a  point typeface is  point). 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 Note this means sizing in ems can easily have you using values with three decimal places.
  28. 28. Web Typography 12 .. e . trick Relative font sizes are either relative to the browser default font size (commonly  pixels) or their parent element. Consider: p { font-size: 80%; } blockquote { font-size: 80%; }
  29. 29. Web Typography 12 .. e . trick Relative font sizes are either relative to the browser default font size (commonly  pixels) or their parent element. 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? e parent (blockquote) is 12.8px so the p will be rendered at 80% of that – 10.42px.
  30. 30. Web Typography  .. e . trick (cont’d) In 2004 Richard Rutter wrote an article outlining a trick used to make these calculations simpler: because browsers have a common default font size of 16px we can set the body font size to be 62.5%, resetting the default value to 10px. From here on, using ems is much easier: px in ems is .em, px is .em. Remember this only holds up for direct child elements of the body; nested elements will be relative to their parents.
  31. 31. Web Typography 14 .. Differences in browser rounding
  32. 32. Web Typography 14 .. Differences in browser rounding Make sure your actual font size in absolute terms is either an integer or half-way in between (i.e. 13px, 13.5px or 14px).
  33. 33. Web Typography 14 .. Differences in browser rounding Make sure your actual font size in absolute terms is either an integer or half-way in between (i.e. 13px, 13.5px or 14px). To find an element’s font size in absolute terms (i.e. pixels) you can use the Firefox Web Develop Extension, Information → Display Element Information.
  34. 34. Web Typography 15 . Stick it to a scale Use a scale when setting type. Find what suits you best for a given project and stick to it. 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.
  35. 35. Web Typography 16 . Use Smartypants or similar Smartypants is a script that translates plain ASCII punctuation characters into “smart” typographic punctuation HTML entities. • Smartypants (PHP, PERL, & Movable Type); • Typogrify (Python/Django); • wp-typogrify (WordPress); • …?
  36. 36. Web Typography 17 . Quotation marks & apostrophes ‘’ “” ’
  37. 37. Web Typography 18 ' "
  38. 38. Web Typography 19 1'61"
  39. 39. Web Typography 20 "is is a group of words surrounded by a bunch of tick marks."
  40. 40. Web Typography 21 “is is a quotation!” - Jeff Cro
  41. 41. Web Typography 22 . Dashes
  42. 42. Web Typography 22 . Dashes - hyphen Mary-Anne, Dominique Strauss-Kahn – en dash April–May, ages –, pp. – — em dash Phrase marker—not spaced—like this.* – minus 5–4=1
  43. 43. Web Typography 23 . Advanced: 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 imperdiet libero. Etiam mollis libero vulputate lorem. Nullam ut leo. (Etiam at turpis non massa rhoncus sodales.)”
  44. 44. Web Typography 24 . Advanced: hanging punctuation (cont’d) Easily done with lists by just 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 the proposed hanging-punctuation property. [http://www.w3.org/TR/css3-text/#hanging-punctuation]
  45. 45. Web Typography 25 . Select a good measure e 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.
  46. 46. Web Typography 26 . Select a good measure (cond’t) An apt measure for running text ranges from about - characters for serif type set in a single column on a page (print). On the web, type generally benefits from a smaller measure. When using multi-column you’ll need to go even smaller.
  47. 47. Web Typography 26 . Select a good measure (cond’t) An apt measure for running text ranges from about - characters for serif type set in a single column on a page (print). On the web, type generally benefits from a smaller measure. When using multi-column you’ll need to go even smaller. Characters average at around two thirds of an em, so a width of  to  ems matches the above.
  48. 48. Web Typography 27 . Treat text as part of the UI Distinguish content elements from application controls (i.e. a user’s username and description from a logout link or text-field title). Oen done with colour (i.e. setting controls gray), size (making them smaller) and typefaces.
  49. 49. Web Typography 28
  50. 50. Web Typography 29
  51. 51. Web Typography 30 . Use grids Grids bring order to your page and help specify where things should go and their flow. Remember to put in apt “gutters” (margins between columns) to separate your columns particularly when neighbouring columns hold running text. Ruler guides help enormously – use the Web Developer extension for Firefox or ruler background images. Also see the YUI library.
  52. 52. Web Typography 30
  53. 53. Web Typography 30
  54. 54. Web Typography 31 . e little things
  55. 55. Web Typography 31 . e little things • Setting the body in a serif and headings in a san serif or visa-versa work to great effect;
  56. 56. Web Typography 31 . e little things • Setting the body in a serif and headings in a san serif or visa-versa work to great effect; • Set abbr and acronym elements in small caps (using the font-variant property);
  57. 57. Web Typography 31 . e little things • Setting the body in a serif and headings in a san serif or visa-versa work to great effect; • Set abbr and acronym elements in small caps (using the font-variant property); • For headings use the most stylish ampersand available (Typogrify wraps them with .amp);
  58. 58. Web Typography 31 . e little things • Setting the body in a serif and headings in a san serif or visa-versa work to great effect; • Set abbr and acronym elements in small caps (using the font-variant property); • For headings use the most stylish ampersand available (Typogrify wraps them with .amp); • At small font sizes text-decoration: underline; can render descender characters (g, j, p, q, y) difficult to read – use border-bottom: 1px solid;;
  59. 59. Web Typography 32 . e little things (cond’t) • Don’t forget to set an ample leading (line height) for running text! Done using the line-height property and you can use a unit-less number (i.e. . which acts as a multiplier of the font size (em if you’re font sizing in ems); e leading spans from the baseline (don’t worry about descenders or ascenders.
  60. 60. Web Typography 33 . e little things (cond’t) • Don’t be afraid to mark new paragraphs with indents, outdents, a plain white-line, a pilcrow (¶) or other ornament, drop cap and/or headers;
  61. 61. Web Typography 33 . e little things (cond’t) • Don’t be afraid to mark new paragraphs with indents, outdents, a plain white-line, a pilcrow (¶) or other ornament, drop cap and/or headers; • Generally use flush-le (text-align: left;) for running text, particularly when set in a narrow measure – justification can work at ample measures and better with serif typefaces.
  62. 62. Web Typography 33 . e little things (cond’t) • Don’t be afraid to mark new paragraphs with indents, outdents, a plain white-line, a pilcrow (¶) or other ornament, drop cap and/or headers; • Generally use flush-le (text-align: left;) for running text, particularly when set in a narrow measure – justification can work at ample measures and better with serif typefaces. • High-contrasting link colours in running text distract: use the smallest effective difference;
  63. 63. Web Typography 34 . I lied – one more
  64. 64. Web Typography 34 . I lied – one more Please don’t use Comic Sans unless you have a very, very good reason.
  65. 65. Web Typography 25 Free desktop specific Stick fonts into ~/.fonts To reload your font cache: fc-cache -fv Generally use a serif for printed type; make sure you grab a copy of the Liberation font package from Redhat! [https://www.redhat.com/promo/fonts/]
  66. 66. ISBN : ---
  67. 67. Web Typography KLEPAS @ KLEPAS . ORG Other reading & references • http://webtypography.net • http://alistapart.com/topics/design/typography • http://usabletype.org • http://ilovetypography.com Ta.
  68. 68. Web Typography KLEPAS @ KLEPAS . ORG Inspirational type nuts • http://cameronmoll.com • http://jeffcro.com • http://zeldman.com • http://markboulton.co.uk
  1. A particular slide catching your eye?

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

×