web typography

Download Web Typography

Post on 27-Jan-2015

6.177 views

Category:

Technology

1 download

Embed Size (px)

DESCRIPTION

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

TRANSCRIPT

  • 1. WEB TYPOGRAPHYPresented by Matthew Buchananauckland web meetup, august af bjjg With acknowledgement to Jeff Croft, Mark Boulton, Richard Rutter

2. august af bjjg WEB TYPOGRAPHY auckland web meetupThe screen is not a place whereyou want to get fancy with fonts. john gruber, the talk show 3. august af bjjg WEB TYPOGRAPHY auckland web meetupTYPOGRAPHic UniTs The em * when type is distance(ie, with no leading) An em is the between baselinesset 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 meetupTYPOGRAPHic 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 meetupTYPOGRAPHic 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/* IE7s PageZoom circumvents problem 6. august af bjjg WEB TYPOGRAPHY auckland web meetupTYPOGRAPHic 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 meetupTYPOGRAPHic UniTs* Relative sizes are based on the current font size:Either browser default (16 pixels); orInherited value from parent elementExAmPlE Of nEsTEd RElATivE sizinG p { font-size: 120%; } strong { font-size: 120%; }

How big is my text?

8. august af bjjg WEB TYPOGRAPHY auckland web meetupTYPOGRAPHic 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 meetupTYPOGRAPHic 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 meetupTYPOGRAPHic 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 ofis scaled* Use min-width and max-width to constrain the measure within larger parent elements 11. august af bjjg WEB TYPOGRAPHY auckland web meetupTYPOGRAPHic UniTs* 45 75 characters (30 50 ems) per line is generally considered optimal for readabilityExAmPlE Of mEAsURE sizEd WiTH Ems #wrap { width: 40em; min-width: 300px; max-width: 500px; } 12. august af bjjg WEB TYPOGRAPHY auckland web meetupTYPOGRAPHic UniTswikipedia.orgGood measure,approximately 80characters per line 13. august af bjjg WEB TYPOGRAPHY auckland web meetupTYPOGRAPHic UniTswikipedia.orgUntil youdo this... 14. august af bjjg WEB TYPOGRAPHY auckland web meetupTYPOGRAPHic 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 meetupTYPOGRAPHic UniTs kstatecollegian.com, poor leadingnytimes.com, good leading 16. august af bjjg WEB TYPOGRAPHY auckland web meetupTYPOGRAPHic 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 meetupTYPOGRAPHic 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 meetupTYPOGRAPHic TEcHniqUEThe density of texture in a written or typesetpage is referred to as its color. This has nothingto do with red or green ink; it refers only to the darkness or blackness of the letterform in mass evenness of color is the typographers normal aim. robert bringhurst, the elements of typographic style 19. august af bjjg WEB TYPOGRAPHY auckland web meetupTYPOGRAPHic 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 meetupTYPOGRAPHic 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 meetupTYPOGRAPHic TEcHniqUE REsETTinG BROWsER dEfAUlTs* Reset all browser margins/padding to zero * perfectdependence on defaults and creates Breaksknowledge 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 meetupTYPOGRAPHic 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 meetupTYPOGRAPHic TEcHniqUEExample baselinegrid from SettingType on the Webby Wilson Mineralistapart.com 24. august af bjjg WEB TYPOGRAPHY auckland web meetupTYPOGRAPHic 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 Bjrky code.google.com/p/blueprintcss/ 25. august af bjjg WEB TYPOGRAPHY auckland web meetupTYPOGRAPHic TEcHniqUE29 Digitals CSSGrid Calculatorwww.29digital.net/grid/ 26. august af bjjg WEB TYPOGRAPHY auckland web meetupTYPOGRAPHic 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 meetupTYPOGRAPHic TEcHniqUE Entities * Some typographic elements you may be familiar with from the web: 'quot;- 28. august af bjjg WEB TYPOGRAPHY auckland web meetupTYPOGRAPHic TEcHniqUE* Those are primes and the hyphen* Often used when typographers quote marks or a dash would be more appropriate: 29. august af bjjg WEB TYPOGRAPHY auckland web meetupTYPOGRAPHic TEcHniqUE* Examples: Quoted text6' 10quot;6:007:00am Phrase break with spacesor without Catherine Zeta-Jones 102=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 meetupTYPOGRAPHic TEcHniqUE nAmEd And dEcimAl EnTiTiEs opening double quote closing double quote opening single quote closing single quote en dash em dash minus multiplication symbol copyright symbol trademark symbol (horizontal) ellipsis 31. august af bjjg WEB TYPOGRAPHY auckland web meetupTYPOGRAPHic 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 meetupTYPOGRAPHic TEcHniqUE fROm THE smARTYPAnTs mAnUAl* curly quote HTML entitiesStraight 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 meetupTYPOGRAPHic TEcHniqUE Because proper typographicpunctuation looks sharp. john gruber, creator of smartypants 34. august af bjjg WEB TYPOGRAPHY auckland web meetupTYPOGRAPHic 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 meetupTYPOGRAPHic TEcHniqUE SimpleBits ampersand: & span.amp { font-family: Baskerville, quot;Goudy Old Stylequot;,quot;Palatinoquot;, quot;Book Antiquaquot;, serif; } 36. august af bjjg WEB TYPOGRAPHY auckland web meetupTYPOGRAPHic 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 delib