Beautiful Web Typography (#4)


Published on

The fourth rendition of my Beautiful Web Typography with some updates, additional info, more links and whatnot.

Kudos should go out to the chaps listed in the end as well as inspirational peeps like Ellen Lupton, whose categorisation of things type into letter, text, grid I’ve used to structure this talk.

Published in: Technology, Design
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Beautiful Web Typography (#4)

  1. Beautiful Web Typography Letter, text, & page Simon Pascal Klein Version 4 Monday, 30 March 2009
  2. Beautiful Web Typography Intro… Monday, 30 March 2009
  3. Beautiful Web Typography I’m Pascal Klein. Monday, 30 March 2009
  4. 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’. Monday, 30 March 2009
  5. Beautiful Web Typography ‘Typophiles’ are über gεεks who typography. Hands up and make yourselves known. Monday, 30 March 2009
  6. Beautiful Web Typography premise: The intertubes today are info-heavy. Much of it is textual. Much of it is a pain to read. Monday, 30 March 2009
  7. 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. Monday, 30 March 2009
  8. Beautiful Web Typography Typography exists to bring order to information by dividing and organizing — aiding readers in finding what they are looking for. Monday, 30 March 2009
  9. Beautiful Web Typography i.e. make textual stuff look pretty. ☻ Monday, 30 March 2009
  10. Beautiful Web Typography Assumptions. It sucks? 1. Limited to sans-serif only for readability? 2. Only ‘web-safe’ fonts? 3. Limited control—resort to Flash and other technologies? Monday, 30 March 2009
  11. Beautiful Web Typography Not quite. (Yay!) Monday, 30 March 2009
  12. Beautiful Web Typography 1. Letter (micro) 2. Text 3. Page or grid (macro) Monday, 30 March 2009
  13. 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. Monday, 30 March 2009
  14. 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;} 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. This one above is from the Yahoo! UI library. Monday, 30 March 2009
  15. Beautiful Web Typography Letter & Text • typeface (font) and style • spacing (tracking/letter-spacing) • individual glyphs Monday, 30 March 2009
  16. Beautiful Web Typography serif sanserif script blackletter monospace Monday, 30 March 2009
  17. 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. Monday, 30 March 2009
  18. Beautiful Web Typography Use a limited palette of type families. A common and effective technique is to pair a serif and a sanserif 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. Monday, 30 March 2009
  19. Beautiful Web Typography roman (‘normal’) italic ≠ oblique ultralight regular bold & bold italic condensed S MALL - CAPITALS Monday, 30 March 2009
  20. Beautiful Web Typography Arial Verdana Courier New Times New Roman Georgia Trebuchet MS Monday, 30 March 2009
  21. Beautiful Web Typography “Typography is not picking a ‘cool’ font.” – Jeff Cro Monday, 30 March 2009
  22. Beautiful Web Typography Options for web fonts: • Installed fonts—mostly web-safe • sIFR —JS and Flash replacement • Other js—Cufón! Monday, 30 March 2009
  23. Monday, 30 March 2009
  24. Beautiful Web Typography Font stacks: • desired • fallback • generic (e.g. serif, sans-serif, monospace) Monday, 30 March 2009
  25. 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. ‘black’) 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. Monday, 30 March 2009
  26. Monday, 30 March 2009
  27. Web Typography 1.1 TRACKING T RACKING Letter-spacing Letter-spacing Monday, 30 March 2009
  28. Beautiful Web Typography Letʼs see some loose word- spacing in action… And now both loose word-spacing and tracking featured together. Monday, 30 March 2009
  29. Beautiful Web Typography And finally, the recent popular trend of negative tracking. Monday, 30 March 2009
  30. Beautiful Web Typography Tracking and word-spacing can help differentiate, aiding readability by removing disruption. Examples might include spacing acronyms or setting numerical tabular data. Monday, 30 March 2009
  31. Beautiful Web Typography Full-capital acronyms, along with other full-cap- sized glyphs can disturb the flow of the text. E.g. 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 lectus vestibulum aenean; luctus posuere cubilia. Lorem ipsum dolor sit amet, NASA consectetur adipiscing et. Vestibulum elit pellentesque habitant orci tristique senectus et , malesuada fames ac turpis egestas HTML lectus vestibulum aenean; luctus posuere cubilia. Monday, 30 March 2009
  32. 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. Monday, 30 March 2009
  33. 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). Monday, 30 March 2009
  34. Beautiful Web Typography Why? Old UA s don’t support font-resizing (Ctrl + +/-) or page zooming/scaling when measurements are defined in absolute terms. The web is increasingly being accessed by a number of different devices and user agents—be careful of assumptions. Monday, 30 March 2009
  35. Beautiful Web Typography Key: remember font sizes are inherited from 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 Monday, 30 March 2009
  36. 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. Monday, 30 March 2009
  37. Beautiful Web Typography .% trick (cont’d) In 2004 Richard Rutter wrote an article outlining a trick 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. Monday, 30 March 2009
  38. 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. Monday, 30 March 2009
  39. 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. Monday, 30 March 2009
  40. Beautiful Web Typography At small font sizes text-decoration: underline; can render descender glyphs (g, j, p, q, y) difficult to read: use border-bottom: 1px solid; Monday, 30 March 2009
  41. Beautiful Web Typography Correct glyphs Consider: 1'61quot; ' quot; Monday, 30 March 2009
  42. Beautiful Web Typography quot;is is a group of words surrounded by a bunch of tick marks.quot; Monday, 30 March 2009
  43. Beautiful Web Typography “is is a quotation!” - Jeff Cro Monday, 30 March 2009
  44. Beautiful Web Typography ‘’ “” ’ Monday, 30 March 2009
  45. 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 Monday, 30 March 2009
  46. Beautiful Web Typography “ opening double quote “ ” closing double quote ” ‘ opening single quote ‘ ’ closing single quote ’ – en dash – — em dash — − minus − × multiplication × … ellipsis … Monday, 30 March 2009
  47. Beautiful Web Typography Smartypants et al. Let scripts do the conversion for you. Smartypants et al. are scripts that translates plain ASCII punctuation characters into “smart” typographic punctuation HTML entities. • Smartypants (PHP , Perl, & Movable Type); • Typogrify (Python/Django); • wp-typogrify (WordPress); • … Monday, 30 March 2009
  48. Beautiful Web Typography Giving ampersands some love &&&& &&&& Monday, 30 March 2009
  49. 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, drop cap and/or headers. Monday, 30 March 2009
  50. 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. Monday, 30 March 2009
  51. Beautiful Web Typography Measures (cont’d) An apt measure for running text ranges from about 45-75 characters for serif type set in a single column on a page (print). On the web, type generally benefits from a smaller measure. 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. Monday, 30 March 2009
  52. 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. :) Monday, 30 March 2009
  53. 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 imperdiet libero. Etiam mollis libero vulputate lorem nullam ut leo. Etiam (at turpis non massa rhoncus sodales.)” Monday, 30 March 2009
  54. Beautiful Web Typography 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. CSS3 will hopefully support hanging punctuation with the proposed hanging-punctuation property. → Monday, 30 March 2009
  55. 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 (i.e. setting controls gray), size (making them smaller) and typefaces. Monday, 30 March 2009
  56. Beautiful Web Typography Monday, 30 March 2009
  57. Beautiful Web Typography Monday, 30 March 2009
  58. Beautiful Web Typography Page (grid). 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. Monday, 30 March 2009
  59. Beautiful Web Typography Monday, 30 March 2009
  60. Beautiful Web Typography Monday, 30 March 2009
  61. Beautiful Web Typography Addendum • Please don’t use Comic Sans unless you have a very, very good reason. • For the free desktop: stick fonts into ~/.fonts and to reload your font cache: fc-cache -fv Monday, 30 March 2009
  62. ISBN : --- Monday, 30 March 2009
  63. Beautiful Web Typography Resources & reading • • • • • Ta. Monday, 30 March 2009
  64. Beautiful Web Typography Inspirational type nuts • • http://jeffcro.com • • Monday, 30 March 2009