Your SlideShare is downloading. ×
Web Typography
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Web Typography

6,342
views

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.

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,342
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
239
Comments
0
Likes
20
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. WEB TYPOGRAPHY Presented by Matthew Buchanan auckland web meetup, august af bjjg With acknowledgement to Jeff Croft, Mark Boulton, Richard Rutter
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. august af bjjg WEB TYPOGRAPHY auckland web meetup TYPOGRAPHic UniTs wikipedia.org Good measure, approximately 80 characters per line
  • 13. august af bjjg WEB TYPOGRAPHY auckland web meetup TYPOGRAPHic UniTs wikipedia.org Until you do this...
  • 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. august af bjjg WEB TYPOGRAPHY auckland web meetup TYPOGRAPHic UniTs kstatecollegian.com, poor leading nytimes.com, good leading
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. august af bjjg WEB TYPOGRAPHY auckland web meetup TYPOGRAPHic TEcHniqUE 29 Digital’s CSS Grid Calculator www.29digital.net/grid/
  • 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. august af bjjg WEB TYPOGRAPHY auckland web meetup TYPOGRAPHic TEcHniqUE Entities * Some typographic elements you may be familiar with from the web: 'quot;-
  • 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. 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. august af bjjg WEB TYPOGRAPHY auckland web meetup TYPOGRAPHic TEcHniqUE nAmEd And dEcimAl EnTiTiEs “ opening double quote &ldquo; &#8220; ” closing double quote &rdquo; &#8221; ‘ opening single quote &lsquo; &#8216; ’ closing single quote &rsquo; &#8217; – en dash &ndash; &#8211; — em dash &mdash; &#8212; − minus &minus; &#8722; × multiplication symbol &times; &#215; © copyright symbol &copy; &#169; ™ trademark symbol &trade; &#8482; … (horizontal) ellipsis &hellip; &#8230;
  • 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. 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. august af bjjg WEB TYPOGRAPHY auckland web meetup TYPOGRAPHic TEcHniqUE “Because proper typographic punctuation looks sharp.” — john gruber, creator of smartypants
  • 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. 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. 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. 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. 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. 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. 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. 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. 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

×