WEB TYPOGRAPHY
 Presented by Matthew Buchanan
 auckland web meetup, august af bjjg

 With acknowledgement to Jeff Croft, M...
august af bjjg
WEB TYPOGRAPHY auckland web meetup




     “The screen is not a place where
     you want to get fancy wit...
august af bjjg
WEB TYPOGRAPHY auckland web meetup



TYPOGRAPHic UniTs
      The em
  * when type is distance(ie, with no ...
august af bjjg
WEB TYPOGRAPHY auckland web meetup



TYPOGRAPHic UniTs
      In CSS, the em square is set using
      the ...
august af bjjg
WEB TYPOGRAPHY auckland web meetup



TYPOGRAPHic UniTs
      WHicH is BETTER?

  *   Pixel sizing better f...
august af bjjg
WEB TYPOGRAPHY auckland web meetup



TYPOGRAPHic UniTs



     “As IE7 takes over more and more of the IE/...
august af bjjg
WEB TYPOGRAPHY auckland web meetup



TYPOGRAPHic UniTs

  *   Relative sizes are based on the current font...
august af bjjg
WEB TYPOGRAPHY auckland web meetup



TYPOGRAPHic UniTs

  *   Richard Rutter suggests resetting browser
  ...
august af bjjg
WEB TYPOGRAPHY auckland web meetup



TYPOGRAPHic UniTs
      The Measure
  *   The measure is the length o...
august af bjjg
WEB TYPOGRAPHY auckland web meetup



TYPOGRAPHic UniTs
      In CSS, the measure is specified using
      ...
august af bjjg
WEB TYPOGRAPHY auckland web meetup



TYPOGRAPHic UniTs

  *   45 – 75 characters (30 – 50 ems) per line is...
august af bjjg
WEB TYPOGRAPHY auckland web meetup



TYPOGRAPHic UniTs
                                     wikipedia.org
...
august af bjjg
WEB TYPOGRAPHY auckland web meetup



TYPOGRAPHic UniTs
                                     wikipedia.org
...
august af bjjg
WEB TYPOGRAPHY auckland web meetup



TYPOGRAPHic UniTs
      Leading
  *   Leading is the distance between...
august af bjjg
WEB TYPOGRAPHY auckland web meetup



TYPOGRAPHic UniTs




kstatecollegian.com, poor leading    nytimes.co...
august af bjjg
WEB TYPOGRAPHY auckland web meetup



TYPOGRAPHic UniTs
      In CSS, leading is specified using
      the ...
august af bjjg
WEB TYPOGRAPHY auckland web meetup



TYPOGRAPHic UniTs

  *   Calculate line-height as rhythm
      (or ba...
august af bjjg
WEB TYPOGRAPHY auckland web meetup



TYPOGRAPHic TEcHniqUE


     “The density of texture in a written or ...
august af bjjg
WEB TYPOGRAPHY auckland web meetup



TYPOGRAPHic TEcHniqUE
      Baseline grids
  *   Establish a typograp...
august af bjjg
WEB TYPOGRAPHY auckland web meetup



TYPOGRAPHic TEcHniqUE
      ExAmPlE Of A BAsElinE GRid

  *   11-pixe...
august af bjjg
WEB TYPOGRAPHY auckland web meetup



TYPOGRAPHic TEcHniqUE
      REsETTinG BROWsER dEfAUlTs

  * Reset all...
august af bjjg
WEB TYPOGRAPHY auckland web meetup



TYPOGRAPHic TEcHniqUE
      REsOURcEs — BAsElinE GRids

  *   “Settin...
august af bjjg
WEB TYPOGRAPHY auckland web meetup



TYPOGRAPHic TEcHniqUE
                                     Example ba...
august af bjjg
WEB TYPOGRAPHY auckland web meetup



TYPOGRAPHic TEcHniqUE
      REsOURcEs — TYPOGRAPHic GRids

  *   “Gri...
august af bjjg
WEB TYPOGRAPHY auckland web meetup



TYPOGRAPHic TEcHniqUE
                                     29 Digital...
august af bjjg
WEB TYPOGRAPHY auckland web meetup



TYPOGRAPHic TEcHniqUE
      REsOURcEs — fURTHER REAdinG

  *   Read M...
august af bjjg
WEB TYPOGRAPHY auckland web meetup



TYPOGRAPHic TEcHniqUE
      Entities
  *   Some typographic elements ...
august af bjjg
WEB TYPOGRAPHY auckland web meetup



TYPOGRAPHic TEcHniqUE

  *   Those are “primes” and the “hyphen”

  *...
august af bjjg
WEB TYPOGRAPHY auckland web meetup



TYPOGRAPHic TEcHniqUE

  *   Examples:       “Quoted text”    6' 10qu...
august af bjjg
WEB TYPOGRAPHY auckland web meetup



TYPOGRAPHic TEcHniqUE
      nAmEd And dEcimAl EnTiTiEs
      “     op...
august af bjjg
WEB TYPOGRAPHY auckland web meetup



TYPOGRAPHic TEcHniqUE
      UsEfUl TOOls

  *   SmartyPants and Texti...
august af bjjg
WEB TYPOGRAPHY auckland web meetup



TYPOGRAPHic TEcHniqUE
      fROm THE smARTYPAnTs mAnUAl

  * “curly” ...
august af bjjg
WEB TYPOGRAPHY auckland web meetup



TYPOGRAPHic TEcHniqUE



     “Because proper typographic
     punctu...
august af bjjg
WEB TYPOGRAPHY auckland web meetup



TYPOGRAPHic TEcHniqUE
      Ampersands
  *   Elements of Typographic ...
august af bjjg
WEB TYPOGRAPHY auckland web meetup



TYPOGRAPHic TEcHniqUE




SimpleBits ampersand: <span class=quot;ampq...
august af bjjg
WEB TYPOGRAPHY auckland web meetup



TYPOGRAPHic TEcHniqUE
      Typefaces
  *   Client-side rendering mea...
august af bjjg
WEB TYPOGRAPHY auckland web meetup



TYPOGRAPHic TEcHniqUE
      cOmmOn issUEs

  *   Font stacks only spe...
august af bjjg
WEB TYPOGRAPHY auckland web meetup



TYPOGRAPHic TEcHniqUE
      nEW OPTiOns — visTA fOnTs

  * New fonts ...
august af bjjg
WEB TYPOGRAPHY auckland web meetup



TYPOGRAPHic TEcHniqUE
      visTA fOnTs & GOOd mATcHEs

      Calibri...
august af bjjg
WEB TYPOGRAPHY auckland web meetup



TRicks & TREATs

  *   Negative text indent – image replacement techn...
august af bjjg
WEB TYPOGRAPHY auckland web meetup



TRicks & TREATs

  * TextPattern, Joomla, evenInman for WordPress,
  ...
august af bjjg
WEB TYPOGRAPHY auckland web meetup



THE End


     “95% of information on the web is written
     languag...
Upcoming SlideShare
Loading in...5
×

Web Typography

6,515

Published on

A presentation I gave to the Auckland Web Meetup on 16 August 2007, covering a raft of topics around good typography on the web.

Published in: Technology, Design
0 Comments
20 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,515
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
240
Comments
0
Likes
20
Embeds 0
No embeds

No notes for slide

Web Typography

  1. 1. WEB TYPOGRAPHY Presented by Matthew Buchanan auckland web meetup, august af bjjg With acknowledgement to Jeff Croft, Mark Boulton, Richard Rutter
  2. 2. august af bjjg WEB TYPOGRAPHY auckland web meetup “The screen is not a place where you want to get fancy with fonts.” — john gruber, the talk show
  3. 3. august af bjjg WEB TYPOGRAPHY auckland web meetup TYPOGRAPHic UniTs The em * when type is distance(ie, with no leading) An em is the between baselines set solid * Relative unit equivalent to type size * Generally treated as a square entity * An en is half the width of an em
  4. 4. august af bjjg WEB TYPOGRAPHY auckland web meetup TYPOGRAPHic UniTs In CSS, the em square is set using the font-size property * Can be set in a variety of units: Absolute (pixels) Relative (ems, percentages) * Absolute sizes do not rely on inheritance * Type with size specified in pixels cannot be resized using browser controls in IE6 or below
  5. 5. august af bjjg WEB TYPOGRAPHY auckland web meetup TYPOGRAPHic UniTs WHicH is BETTER? * Pixel sizing better for maths * Em sizing more flexible as margins grow as text size increases * Sizing text in pixels is an IE problem, not a CSS problem jeffcroft.com/sidenotes/2007/mar/13/clarifying- comments-i-made-typography-panel-sxsw/ * IE7’s PageZoom circumvents problem
  6. 6. august af bjjg WEB TYPOGRAPHY auckland web meetup TYPOGRAPHic UniTs “As IE7 takes over more and more of the IE/ Win browser share, the decision to avoid pixel sizing becomes less and less of a sealed tomb.” www.wilsonminer.com/posts/2007/mar/16/problem-pixels/
  7. 7. august af bjjg WEB TYPOGRAPHY auckland web meetup TYPOGRAPHic UniTs * Relative sizes are based on the current font size: Either browser default (16 pixels); or Inherited value from parent element ExAmPlE Of nEsTEd RElATivE sizinG p { font-size: 120%; } strong { font-size: 120%; } <p><strong>How big is my text?</strong></p>
  8. 8. august af bjjg WEB TYPOGRAPHY auckland web meetup TYPOGRAPHic UniTs * Richard Rutter suggests resetting browser default font size to 10px using percentages body { font-size: 62.5%; } * Then size text in relative units from that base: eg, 1.2em or 120% to obtain 12px * Downside: inheritance means more complex calculations required for nested elements www.clagnut.com/blog/348/
  9. 9. august af bjjg WEB TYPOGRAPHY auckland web meetup TYPOGRAPHic UniTs The Measure * The measure is the length of a single line of text * Choosing an appropriate measure for text blocks is important for maintaining readability
  10. 10. august af bjjg WEB TYPOGRAPHY auckland web meetup TYPOGRAPHic UniTs In CSS, the measure is specified using one of the width properties * It is ideal to set the measure in ems, so it is directly proportional to the size of the type * words per line even when font sizecharacters/ Maintains a consistent number of is scaled * Use min-width and max-width to constrain the measure within larger parent elements
  11. 11. august af bjjg WEB TYPOGRAPHY auckland web meetup TYPOGRAPHic UniTs * 45 – 75 characters (30 – 50 ems) per line is generally considered optimal for readability ExAmPlE Of mEAsURE sizEd WiTH Ems #wrap { width: 40em; min-width: 300px; max-width: 500px; }
  12. 12. august af bjjg WEB TYPOGRAPHY auckland web meetup TYPOGRAPHic UniTs wikipedia.org Good measure, approximately 80 characters per line
  13. 13. august af bjjg WEB TYPOGRAPHY auckland web meetup TYPOGRAPHic UniTs wikipedia.org Until you do this...
  14. 14. august af bjjg WEB TYPOGRAPHY auckland web meetup TYPOGRAPHic UniTs Leading * Leading is the distance between baselines of type * Originates from traditional typesetting methods, use of lead strips to separate type * Establishing a vertical rhythm and appropriate leading improves overall appearance and readability * Single easiest way to make your page look more professional
  15. 15. august af bjjg WEB TYPOGRAPHY auckland web meetup TYPOGRAPHic UniTs kstatecollegian.com, poor leading nytimes.com, good leading
  16. 16. august af bjjg WEB TYPOGRAPHY auckland web meetup TYPOGRAPHic UniTs In CSS, leading is specified using the line-height property * Can be specified in absolute or relative units * Better to provide a unitless value to ensure line-height scales when text is resized p { line-height: 1.5; }
  17. 17. august af bjjg WEB TYPOGRAPHY auckland web meetup TYPOGRAPHic UniTs * Calculate line-height as rhythm (or baseline) divided by text size 16 ÷ 11 = 1.455 * Body copy generally benefits from positive leading, while browser default is to set solid * Sans-serif faces, heavier faces and longer measures require more lead
  18. 18. august af bjjg WEB TYPOGRAPHY auckland web meetup TYPOGRAPHic TEcHniqUE “The density of texture in a written or typeset page is referred to as its color. This has nothing to do with red or green ink; it refers only to the darkness or blackness of the letterform in mass… evenness of color is the typographer’s normal aim.” — robert bringhurst, the elements of typographic style
  19. 19. august af bjjg WEB TYPOGRAPHY auckland web meetup TYPOGRAPHic TEcHniqUE Baseline grids * Establish a typographic grid as part of your design * Select an appropriate baseline value, generally matching the line-height of your body copy * Derive margins and leading for other elements as multiples of this baseline value * Image dimensions can be made to fit the grid also * An admirable goal, but not always achievable
  20. 20. august af bjjg WEB TYPOGRAPHY auckland web meetup TYPOGRAPHic TEcHniqUE ExAmPlE Of A BAsElinE GRid * 11-pixel body text with 16 pixels of leading (11/16) * Headings at 24/32 * Sub-headings at 13/16 with 8 pixels of margin above and below * Sidebar copy at 10/16 * Paragraphs and lists with 8 pixel margin below
  21. 21. august af bjjg WEB TYPOGRAPHY auckland web meetup TYPOGRAPHic TEcHniqUE REsETTinG BROWsER dEfAUlTs * Reset all browser margins/padding to zero * “perfectdependence on defaults and creates Breaks knowledge” about your styles * “Reset Reloaded” by Eric Meyer meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ * YUI (Yahoo! User Interface) Reset developer.yahoo.com/yui/reset/
  22. 22. august af bjjg WEB TYPOGRAPHY auckland web meetup TYPOGRAPHic TEcHniqUE REsOURcEs — BAsElinE GRids * “Setting Type on the Web” by Wilson Miner www.alistapart.com/articles/settingtypeontheweb/ * “Compose to a Vertical Rhythm” by Richard Rutter 24ways.org/2006/compose-to-a-vertical-rhythm/ * Syncotype by Rob Goodlatte robgoodlatte.com/2007/07/31/syncotype-your-baselines/ * Vertical Rhythm Calculator drewish.com/tools/vertical-rhythm/
  23. 23. august af bjjg WEB TYPOGRAPHY auckland web meetup TYPOGRAPHic TEcHniqUE Example baseline grid from “Setting Type on the Web” by Wilson Miner alistapart.com
  24. 24. august af bjjg WEB TYPOGRAPHY auckland web meetup TYPOGRAPHic TEcHniqUE REsOURcEs — TYPOGRAPHic GRids * “Gridding the 960” by Cameron Moll cameronmoll.com/archives/2006/12/gridding_the_960/ * CSS Grid Calculator www.29digital.net/grid/ * Blueprint CSS Framework by Olav Bjørkøy code.google.com/p/blueprintcss/
  25. 25. august af bjjg WEB TYPOGRAPHY auckland web meetup TYPOGRAPHic TEcHniqUE 29 Digital’s CSS Grid Calculator www.29digital.net/grid/
  26. 26. august af bjjg WEB TYPOGRAPHY auckland web meetup TYPOGRAPHic TEcHniqUE REsOURcEs — fURTHER REAdinG * Read Mark Boulton, Khoi Vinh et al for more on horizontal and vertical rhythm: www.markboulton.co.uk/journal/comments/five_ simple_steps_to_designing_grid_systems_part_1/ www.subtraction.com/archives/2007/0318_oh_yeeaahh.php webtypography.net
  27. 27. august af bjjg WEB TYPOGRAPHY auckland web meetup TYPOGRAPHic TEcHniqUE Entities * Some typographic elements you may be familiar with from the web: 'quot;-
  28. 28. august af bjjg WEB TYPOGRAPHY auckland web meetup TYPOGRAPHic TEcHniqUE * Those are “primes” and the “hyphen” * Often used when typographer’s quote marks or a dash would be more appropriate: ‘’“”–—
  29. 29. august af bjjg WEB TYPOGRAPHY auckland web meetup TYPOGRAPHic TEcHniqUE * Examples: “Quoted text” 6' 10quot; 6:00–7:00am Phrase break – with spaces—or without Catherine Zeta-Jones 10−2=8 * Convention changing as resolution increases * Use the correct entity notation where possible www.cookwood.com/html/extras/entities.html * Work best with UTF-8 page encoding
  30. 30. august af bjjg WEB TYPOGRAPHY auckland web meetup TYPOGRAPHic TEcHniqUE nAmEd And dEcimAl EnTiTiEs “ 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 symbol &times; × © copyright symbol &copy; © ™ trademark symbol &trade; ™ … (horizontal) ellipsis &hellip; …
  31. 31. august af bjjg WEB TYPOGRAPHY auckland web meetup TYPOGRAPHic TEcHniqUE UsEfUl TOOls * SmartyPants and Textile plugins daringfireball.net/projects/smartypants/ textism.com/tools/textile/ * Typogrify for Django code.google.com/p/typogrify/ * “The trouble with EM ’n EN” by Peter K Sheerin www.alistapart.com/articles/emen/
  32. 32. august af bjjg WEB TYPOGRAPHY auckland web meetup TYPOGRAPHic TEcHniqUE fROm THE smARTYPAnTs mAnUAl * “curly” quote HTML entities Straight quotes ( quot; and ' ) into * Backticks-style quotes ( `` like this ' ' ) into “curly” quote HTML entities * Dashes ( -- and --- ) into en- and em-dash entities * Three consecutive dots ( ... ) into an ellipsis entity
  33. 33. august af bjjg WEB TYPOGRAPHY auckland web meetup TYPOGRAPHic TEcHniqUE “Because proper typographic punctuation looks sharp.” — john gruber, creator of smartypants
  34. 34. august af bjjg WEB TYPOGRAPHY auckland web meetup TYPOGRAPHic TEcHniqUE Ampersands * Elements of Typographic Style 5.1.3: “In heads and titles, use the best available ampersand.” * SimpleBits specifies italic versions of Baskerville, Goudy Old Style, Palatino and Book Antiqua www.simplebits.com
  35. 35. august af bjjg WEB TYPOGRAPHY auckland web meetup TYPOGRAPHic TEcHniqUE SimpleBits ampersand: <span class=quot;ampquot;>&amp;</span> span.amp { font-family: Baskerville, quot;Goudy Old Stylequot;, quot;Palatinoquot;, quot;Book Antiquaquot;, serif; }
  36. 36. august af bjjg WEB TYPOGRAPHY auckland web meetup TYPOGRAPHic TEcHniqUE Typefaces * Client-side rendering means fonts must be installed on target computer for HTML pages * Common web faces are designed for the medium * Make deliberate choices for your defaults * Specify common system fonts such as Helvetica Neue (comes with OS X)
  37. 37. august af bjjg WEB TYPOGRAPHY auckland web meetup TYPOGRAPHic TEcHniqUE cOmmOn issUEs * Font stacks only specify a single size for all faces * Arial and Verdana not a good typographic match * The default font stack from applications such as Dreamweaver includes both Arial Verdana Arial is visually more compact than Verdana
  38. 38. august af bjjg WEB TYPOGRAPHY auckland web meetup TYPOGRAPHic TEcHniqUE nEW OPTiOns — visTA fOnTs * New fonts included with Windows Vista OS * Ligatures, lining figures * Size issues, better match with Arial than Verdana * withoutfor ClearType, look awful Tuned anti-aliasing
  39. 39. august af bjjg WEB TYPOGRAPHY auckland web meetup TYPOGRAPHic TEcHniqUE visTA fOnTs & GOOd mATcHEs Calibri Arial Myriad Corbel Cambria Georgia Verdana Candara Palatino, Book Antiqua Constantia Consolas Andale Mono
  40. 40. august af bjjg WEB TYPOGRAPHY auckland web meetup TRicks & TREATs * Negative text indent – image replacement technique by Mike Rundle, based on an idea by Todd Fahrner h1 { text-indent: -999em; overflow: hidden; } * sIFR for headings – unobtrusive JavaScript Flash replacement technique by Mike Davidson and Mark Wubben, based on an idea by Shaun Inman www.mikeindustries.com/sifr/
  41. 41. august af bjjg WEB TYPOGRAPHY auckland web meetup TRicks & TREATs * TextPattern, Joomla, evenInman for WordPress, Widon’t plugin by Shaun SlideShowPro! www.shauninman.com/archive/2007/01/03/ widont_2_1_wordpress_plugin/ * Use color: #333; for dark text on a light background and color: #ccc; for light text on a dark background * Don’t justify without reason until support for automatic hyphenation and resolution-independence improves
  42. 42. august af bjjg WEB TYPOGRAPHY auckland web meetup THE End “95% of information on the web is written language. It is only logical … that a web designer should get good training in the main discipline of shaping written information, in other words: Typography.” — oliver reichenstein
  1. A particular slide catching your eye?

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

×