#[1]rss [2]Jump to content Year * 1996 * 1997 * 1998 * 1999 * 2000 * 2001 * 2002 * 2003 * 2004 * [3]2005 * [4]2006 * [5]2007 * [6]2008 * [7]2009 * 2010 * 2011 * 2012 * 2013 * 2014 * 2015 * 2016 * 2017 * 2018 * 2019 Day * [8]24 * [9]23 * [10]22 * [11]21 * [12]20 * [13]19 * [14]18 * [15]17 * [16]16 * [17]15 * [18]14 * [19]13 * [20]12 * [21]11 * [22]10 * [23]09 * [24]08 * [25]07 * [26]06 * [27]05 * [28]04 * [29]03 * [30]02 * [31]01 [32]24 Ways to impress your friends * [33]Home * [34]Archives * [35]Authors * [36]Twitter * [37]RSS * ____________________ Go 12 12/2006 [38]Compose to a Vertical Rhythm by [39]Richard Rutter * [40]Article * [41]29 comments "Space in typography is like time in music. It is infinitely divisible, but a few proportional intervals can be much more useful than a limitless choice of arbitrary quantities." So says the typographer Robert Bringhurst, and just as regular use of time provides rhythm in music, so regular use of space provides rhythm in typography, and without rhythm the listener, or the reader, becomes disorientated and lost. On the Web, vertical rhythm - the spacing and arrangement of text as the reader descends the page - is contributed to by three factors: font size, line height and margin or padding. All of these factors must calculated with care in order that the rhythm is maintained. The basic unit of vertical space is line height. Establishing a suitable line height that can be applied to all text on the page, be it heading, body copy or sidenote, is the key to a solid dependable vertical rhythm, which will engage and guide the reader down the page. To see this in action, I've created [42]an example with headings, footnotes and sidenotes. Establishing a suitable line height The easiest place to begin determining a basic line height unit is with the font size of the body copy. For [43]the example I've chosen 12px. To ensure readability the body text will almost certainly need some leading, that is to say spacing between the lines. A line-height of 1.5em would give 6px spacing between the lines of body copy. This will create a total line height of 18px, which becomes our basic unit. Here's the CSS to get us to this point: 1. body { 2. font-size: 75%; 3. } 4. 5. html>body { 6. font-size: 12px; 7. } 8. 9. p { 10. line-height 1.5em; 11. } 12. Source: [44]/code/compose-to-a-vertical-rhythm/1.txt There are many ways to size text in CSS and the above approach provides and accessible method of achieving the pixel-precision solid typography requires. By way of explanation, the first font-size reduces the body text from the 16px default (common to most browsers and OS set-ups) down to the 12px we require. This rule is primarily there for Internet Explorer 6 and below on Windows: the percentage value means that the text will scale predictably should a user bump the text size up or down. The second font-size sets the text size specifically and is ignored by IE6, but used by Firefox, Safari, IE7, Opera and other modern browsers which allow users to resize text sized in pixels. Spacing between paragraphs With our rhythmic unit set at 18px we need to ensure that it is maintained throughout the body copy. A common place to lose the rhythm is the gaps set between margins. The default treatment by web browsers of paragraphs is to insert a top- and bottom-margin of 1em. In our case this would give a spacing between the paragraphs of 12px and hence throw the text out of rhythm. If the rhythm of the page is to be maintained, the spacing of paragraphs should be related to the basic line height unit. This is achieved simply by setting top- and bottom-margins equal to the line height. In order that typographic integrity is maintained when text is resized by the user we must use ems for all our vertical measurements, including line-height, padding and margins. 1. p { 2. font-size:1em; 3. margin-top: 1.5em; 4. margin-bottom: 1.5em; 5. } 6. Source: [45]/code/compose-to-a-vertical-rhythm/2.txt Browsers set margins on all block-level elements (such as headings, lists and blockquotes) so a way of ensuring that typographic attention is paid to all such elements is to reset the margins at the beginning of your style sheet. You could use a rule such as: 1. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,bl ockquote,th,td { 2. margin:0; 3. padding:0; 4. } 5. Source: [46]/code/compose-to-a-vertical-rhythm/3.txt Alternatively you could look into using the [47]Yahoo! UI Reset style sheet which removes most default styling, so providing a solid foundation upon which you can explicitly declare your design intentions. Variations in text size When there is a change in text size, perhaps with a heading or sidenotes, the differing text should also take up a multiple of the basic leading. This means that, in our example, every diversion from the basic text size should take up multiples of 18px. This can be accomplished by adjusting the line-height and margin accordingly, as described following. Headings Subheadings in the [48]example page are set to 14px. In order that the height of each line is 18px, the line-height should be set to 18 ÷ 14 = 1.286. Similarly the margins above and below the heading must be adjusted to fit. The temptation is to set heading margins to a simple 1em, but in order to maintain the rhythm, the top and bottom margins should be set at 1.286em so that the spacing is equal to the full 18px unit. 1. h2 { 2. font-size:1.1667em; 3. line-height: 1.286em; 4. margin-top: 1.286em; 5. margin-bottom: 1.286em; 6. } 7. Source: [49]/code/compose-to-a-vertical-rhythm/4.txt One can also set asymmetrical margins for headings, provided the margins combine to be multiples of the basic line height. In our example, a top margin of 1˝ lines is combined with a bottom margin of half a line as follows: 1. h2 { 2. font-size:1.1667em; 3. line-height: 1.286em; 4. margin-top: 1.929em; 5. margin-bottom: 0.643em; 6. } 7. Source: [50]/code/compose-to-a-vertical-rhythm/5.txt Also in our example, the main heading is given a text size of 18px, therefore the line-height has been set to 1em, as has the margin: 1. h1 { 2. font-size:1.5em; 3. line-height: 1em; 4. margin-top: 0; 5. margin-bottom: 1em; 6. } 7. Source: [51]/code/compose-to-a-vertical-rhythm/6.txt Sidenotes Sidenotes (and other supplementary material) are often set at a smaller size to the basic text. To keep the rhythm, this smaller text should still line up with body copy, so a calculation similar to that for headings is required. In our example, the sidenotes are set at 10px and so their line-height must be increased to 18 ÷ 10 = 1.8. 1. .sidenote { 2. font-size:0.8333em; 3. line-height:1.8em; 4. } 5. Source: [52]/code/compose-to-a-vertical-rhythm/7.txt Borders One additional point where vertical rhythm is often lost is with the introduction of horizontal borders. These effectively act as shims pushing the subsequent text downwards, so a two pixel horizontal border will throw out the vertical rhythm by two pixels. A way around this is to specify horizontal lines using background images or, as in our example, specify the width of the border in ems and adjust the padding to take up the slack. The design of the footnote in our example requires a 1px horizontal border. The footnote contains 12px text, so 1px in ems is 1 ÷ 12 = 0.0833. I have added a margin of 1˝ lines above the border (1.5 × 18 ÷ 12 = 2.5ems), so to maintain the rhythm the border + padding must equal a ˝ (9px). We know the border is set to 1px, so the padding must be set to 8px. To specify this in ems we use the familiar calculation: 8 ÷ 12 = 0.667. Hit me with your rhythm stick Composing to a vertical rhythm helps engage and guide the reader down the page, but it takes typographic discipline to do so. It may seem like a lot of fiddly maths is involved (a few divisions and multiplications never hurt anyone) but good type setting is all about numbers, and it is this attention to detail which is the key to success. Like what you read? * [53]Tweet this article * or * [54]Leave a comment Comments * [55]12/12/2006 [56]Julian Bennett Holmes http://julianbh.com/ Wow this is a good article. * [57]12/12/2006 [58]Will thanks so much, this is great. * [59]12/12/2006 [60]Peter Gasston http://www.css3.info/blog/ Interesting stuff. Also worth reading Eric Meyer's post on unitless line-heights: http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/ * [61]12/12/2006 [62]Jake Archibald http://www.jakearchibald.com It's worth mentioning that IE6 and below can go a bit extreme when resizing fonts set as ems. You can fix this by applying font-size: 100% to html. Don't know why this works, it just does. Oh, if you're working in quirks mode you'll also need to apply it to thead, tbody and tfoot, beacuse the fix doesn't inherit (don't apply it to table unless you want table to inherit font-sizes). You don't need thead, tbody or tfoot in your tables as tbody is implied. Obviously, you can't then apply your own font-sizes to html or tbody etc, else you'll overwrite the fix, which is why I chose those particular elements as they're rarely used for font-sizes. Jake. * [63]12/12/2006 [64]Mike Stenhouse donotremove.co.uk Hmmmmm, interesting! I've not tried this but I think there might be an easier way to set those heights... What if the line-height is set to, say, 1.5em on the body and 1 (unit-less - it's valid!) on each descendant element? Or maybe some variation on that. It might force the 18px to inherit into the children without awkward calculations. * [65]12/12/2006 [66]Rob Weychert http://www.robweychert.com/ Great article, Richard! Web typography--like all typography--deserves this level of detailed thinking, and I hope to see more designers embracing it. * [67]12/12/2006 [68]michael h Good introduction to typography theory, but I am convinced that the Owen Briggs method is the best approach to sizing. http://thenoodleincident.com/tutorials/box_lesson/font/index.html * [69]13/12/2006 [70]Wilson Miner http://www.wilsonminer.com/ I've been working on something similar recently, and I've discovered that if you set the line-height in pixels, most browsers will still scale it proportionally along with the text. As IE6's numbers fall off, I hope we can leave all this black magic scaling math behind and go back to setting font sizes in pixels and letting the browsers handle the scaling. * [71]13/12/2006 [72]Richard Rutter http://clagnut.com/ Mike - you're right about being able to simplify the line-height specifications, but it doesn't require setting unitless line-heights. In the example I use, I've set the font-size to be 12px on the body and calculated line-heights for all the subsequent elements. As I required one line height - 18px - for all elements I can remove the multiple statements and simply set line-height:1.5em on the body. The calculated line-height of 18px is inherited by all elements on the page. I've modifed the example to show this (checked in Firefox, Safari and IE6): http://webtypography.net/24ways2006/24ways-v2.html However the maths would still need to be performed to calculate the correct margins, so while the extra line-height specifications are not strictly necessary (at least while the same line height for all text is required) you unfortunately don't save much on the calculations. * [73]13/12/2006 [74]Richard Rutter http://clagnut.com/ Jake - the extreme text sizing in IE can be fixed by applying any percentage font size to the body - it doesn't have to be 100% (hence my use of 75% fixed this too). You're right about the tables though. This rule does the job nicely to inherit the text size: table, thead, tbody, tr, th, td {font-size:1em} * [75]13/12/2006 [76]GreLI In the article next rule is used to reset margins: body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,bl ockquote,th,td { margin:0; padding:0; } I think it easier to use universal selector (* { margin: 0; padding: 0 }) instead. To fix table font-size inheritance it's enough to set table { font-size: 1em } Opera AFAIK don't change font-size if it set in pixels, but it can zoom pages (so does IE7). * [77]13/12/2006 [78]Matthew Pennell http://www.thewatchmakerproject.com/ GreLI - using the universal selector like that to zero all margins and padding can cause unpredictable results in some form controls (e.g. SELECT elements) in certain browsers. Rich - great article; now all someone needs to do is knock up a nice little app that spits out the right line-heights and margins for the elements you tell it... :) * [79]13/12/2006 [80]Theodore Rosendorf http://blogdorf.com It's unfortunate that pretty much no one composes with a scale when publishing for the web. Your article is a great step forward. Also overlooked are line lengths. Since the beginning of the web, It has been a standard practice to expand the line lengths out with the width of the browser (like your site is currently :), causing line lengths to expand way too long. If an optimal line length for print is 66 characters, line lengths for web should be even smaller. * [81]14/12/2006 [82]Jeff L http://www.bogglethemind.com/ I don't see it mentioned in the comments yet, but your quote above: "...Firefox, Safari, IE7, Opera and other modern browsers which allow users to resize text sized in pixels." is not correct, as IE7 does not allow users to resize text sized in pixels. The layout can be zoomed, but the text can not be resized. * [83]18/12/2006 [84]Richard Rutter http://clagnut.com/ If an optimal line length for print is 66 characters, line lengths for web should be even smaller. You're right to mention line length as something that is overlooked, but on the screen it is not as simple as setting the measure in ems as their are more factors involved (screen size, liquid layouts, etc). Also I'd disagree that web line lengths should be shorter on the web. My personal preference would be for them to be longer - I find short line lengths on screen extremely hard work to read. That's just my opinion though. IE7 does not allow users to resize text sized in pixels. The layout can be zoomed, but the text can not be resized. If you think of the reasons for changing text size then zooming a layout is just another form of resizing text and achieves the same goal. * [85]20/12/2006 [86]Steve C. http://www.stevecochrane.com Theodore, I think you would enjoy Richard's article entitled "Choose a comfortable measure" over at webtypography.net :) http://webtypography.net/Rhythm_and_Proportion/Horizontal_Motion/2. 1.2/ * [87]22/12/2006 [88]Rachel Maxim You've said in a few pages what has taken me years to figure out and refine :) - great info! * [89]23/12/2006 [90]Nate K http://nateklaiber.com I really enjoyed this article. I have read your Elements of....for the web, as well as your blog about sizing text in ems. I have really been looking in to using this and getting the best `flow' with my typography. I also ordered the book Elements of Typographic Style just to give a better understanding. I think its a common misconception that text on the web will always look bland, and you have proved that it can have rhythm and style. * [91]02/01/2007 [92]Paul Bell http://www.boilerroomdigital.co.uk I've just been using some of these techniques on a client's site who needed 8 tabs all the same width, which fill the available space - I had it working fine in Firefox, but the tabs didn't fill the space in Safari or IE. I found that you really have to do the maths, rather than just use trial and error - they all round the numbers slightly differently. Once I'd checked my calculations, rather than tinkered with the numbers, it works fine everywhere, at least at standard font size. One other correction from someone's comment earlier on - you can resize text in IE7 - click the page icon at top right. Why you need both this and the ability to zoom, I'm not sure, but it's there at any rate. * [93]03/01/2007 [94]Ben G Can you set the margin above or below headings or paragraphs to less than your 18px base measurement? Won't margin collapsing cause whichever the largest margin is to take effect? Ben * [95]31/01/2009 [96]Daniel I've been using this article as the basis for designing my site with some "vertical rhythm". Everything is going well except with forms (input, textarea, etc.). I just haven't been able to use css to maintain the vertical rhythm (based on total line height of 18px). Any advise or insight as to how to get forms to play nicely? * [97]15/02/2009 [98]Silver Firefly I wanted to clarify something about the default browser text size and using the em unit. The article was a tad misleading when it covered the default browser text size and the em unit. A lot of designers have it in their heads that an em is equivalent to 16 pixels. An em is not equivalent to 16 pixels. It is equivalent to whatever is set in the user's browser, which is commonly 16px but depending on the user, it can be 20px or 12px or whatever they have set in their browser's settings. I hope after reading that statement, designers will start to realise that they have little control over how their website appears in other users' browsers. The majority of the control lies in the user's hands. Other than that, the article was very good. * [99]17/04/2009 [100]VardenRhode http://tr.im/VRdesign Great article... and AWESOME site design. Inspirational! * [101]27/04/2009 [102]Adam http://www.finestfolkart.com Typesetting for websites is the future, like all things content-related. The Google knows it :). Thank you for that useful post. You webdesigners take care of your text! * [103]05/06/2009 [104]bonfield Inline bolding of elements (I'm using Helvetica, e.g.) seems to add a px of height on any line that uses it, and that subtly throws off the vertical rhythm for each line and it can add up depending -- anybody else run into this and solve it? * [105]18/06/2009 [106]Anonymous Does this truly keep the vertical rhythm? If you zoom in on the example, you'll see that the descender of the letter g in the H1 header "New England" crosses your rhythm marker's background line, while a lowercase g in the following paragraph does not. There appears to be some fudging going on. * [107]08/07/2009 [108]Wade http://voltagecreative.com I find it humorous that this site itself does not compose to a vertical rhythm. I've seen very few online that do. It's so difficult to implement across browsers it is usually brushed aside except for in the most simple design schemes. * [109]03/08/2009 [110]eric I've yet to see any empirical evidence that "vertical rhythm" applied to this degree has any impact on how well a reader is able to extract signal from the noise of the page. Meanwhile, I've seen many, many examples of mis-applied "vertical rhythms" resulting in squashed headings where the underlning on a link impinges on the text below. Which just looks clunky. When you've got something other than an aesthetic opinion from the margins -- maybe some actual data -- then I'll be interested in expending the effort needed to support real vertical rhythm. Until then, I just don't see how it's cost-effective. * [111]02/09/2009 [112]Darren Roberts http://www.pureandsimpleweb.co.uk/ Now, that was the kind of article I was looking for. That goes a lot deeper than I've been into the realms of line-spacing, leading (no kerning here though - can we do kerning with css?). I love the analogy to musical rhythym > therefore probably following on to mathematics/geometry/proportion. That is a great lead-in. Is there any room for the `golden ratio' in web design? Do graphic designers use it with/without realising it? Just that I haven't seen it discussed in the myriad pages concerning page layout/design that I've read so far... Thanks, Darren Impress us Name _________________________ Email _________________________ Website _________________________ Message _________________________ _________________________ _________________________ _________________________ _________________________ Be friendly / use [113]Textile Preview Submit About the author [114]Richard Rutter Richard Rutter is a user experience consultant and director of [115]Clearleft. He runs an ongoing project called [116]The Elements of Typographic Style Applied to the Web, where he extols the virtues of good web typography. Richard occasionally blogs at [117]Clagnut, where he writes about design, accessibility and web standards issues, as well as his passion for music and mountain biking. [118]More information Related articles * [119]Real Fonts and Rendering: The New Elephant in the Room 22/12/2009 by [120]Jeffrey Zeldman * [121]Spruce It Up 19/12/2009 by [122]Jonathan Snook * [123]Designing For The Switch 16/12/2009 by [124]Mark Boulton * [125]Type-Inspired Interfaces 07/12/2009 by [126]Dan Mall * [127]A Festive Type Folly 17/12/2008 by [128]Jon Tan * [129]Increase Your Font Stacks With Font Matrix 17/12/2007 by [130]Richard Rutter * [131]Typesetting Tables 07/12/2007 by [132]Mark Boulton * [133]Knockout Type - Thin Is Always In 17/12/2006 by [134]Shaun Inman * [135]An Explanation of Ems 02/12/2005 by [136]Richard Rutter [137]Article archives... In association with: [138]Perch - a really little cms * 24 ways is an [139]edgeofmyseat.com production. * Edited by [140]Drew McLellan and [141]Brian Suda. * Design delivered by [142]Made by Elephant. * Possible only with the help of [143]our terrific authors. * Grab our [144]RSS feed and follow us on [145]Twitter for daily updates. * Hosted by [146]Memset. * * * * RĂ©fĂ©rences 1. http://feeds.feedburner.com/24ways 2. http://24ways.org/2006/compose-to-a-vertical-rhythm#content 3. http://24ways.org/2005 4. http://24ways.org/2006 5. http://24ways.org/2007 6. http://24ways.org/2008 7. http://24ways.org/2009 8. http://24ways.org/2006/gravity-defying-page-corners 9. http://24ways.org/2006/cheating-color 10. http://24ways.org/2006/photographic-palettes 11. http://24ways.org/2006/a-scripting-carol 12. http://24ways.org/2006/intricate-fluid-layouts 13. http://24ways.org/2006/the-mobile-web-simplified 14. http://24ways.org/2006/boost-your-hyperlink-power 15. http://24ways.org/2006/knockout-type 16. http://24ways.org/2006/fast-and-simple-usability-testing 17. http://24ways.org/2006/css-production-notes 18. http://24ways.org/2006/styling-hcards-with-css 19. http://24ways.org/2006/revealing-relationships-can-be-good-form 20. http://24ways.org/2006/compose-to-a-vertical-rhythm 21. http://24ways.org/2006/showing-good-form 22. http://24ways.org/2006/writing-responsible-javascript 23. http://24ways.org/2006/marking-up-a-tag-cloud 24. http://24ways.org/2006/random-lines-made-with-mesh 25. http://24ways.org/2006/beautiful-xml-with-xsl 26. http://24ways.org/2006/hide-and-seek-in-the-head 27. http://24ways.org/2006/accessible-dynamic-links 28. http://24ways.org/2006/rounded-corner-boxes-the-css3-way 29. http://24ways.org/2006/flickr-photos-on-demand 30. http://24ways.org/2006/faster-development-with-css-constants 31. http://24ways.org/2006/tasty-text-trimmer 32. http://24ways.org/ 33. http://24ways.org/ 34. http://24ways.org/2009 35. http://24ways.org/authors 36. http://twitter.com/24ways 37. http://feeds.feedburner.com/24ways 38. http://24ways.org/2006/compose-to-a-vertical-rhythm 39. http://clagnut.com/ 40. http://24ways.org/2006/compose-to-a-vertical-rhythm#article 41. http://24ways.org/2006/compose-to-a-vertical-rhythm#comments 42. http://24ways.org/examples/compose-to-a-vertical-rhythm/example.html 43. http://24ways.org/examples/compose-to-a-vertical-rhythm/example.html 44. http://24ways.org/code/compose-to-a-vertical-rhythm/1.txt 45. http://24ways.org/code/compose-to-a-vertical-rhythm/2.txt 46. http://24ways.org/code/compose-to-a-vertical-rhythm/3.txt 47. http://developer.yahoo.com/yui/reset/ 48. http://24ways.org/examples/compose-to-a-vertical-rhythm/example.html 49. http://24ways.org/code/compose-to-a-vertical-rhythm/4.txt 50. http://24ways.org/code/compose-to-a-vertical-rhythm/5.txt 51. http://24ways.org/code/compose-to-a-vertical-rhythm/6.txt 52. http://24ways.org/code/compose-to-a-vertical-rhythm/7.txt 53. http://twitter.com/?status=Compose+to+a+Vertical+Rhythm+http://24ways.org/200612 54. http://24ways.org/2006/compose-to-a-vertical-rhythm#comments 56. http://julianbh.com/ 58. http://24ways.org/2006/compose-to-a-vertical-rhythm 60. http://www.css3.info/blog/ 62. http://www.jakearchibald.com/ 64. http://24ways.org/2006/donotremove.co.uk 66. http://www.robweychert.com/ 68. http://24ways.org/2006/compose-to-a-vertical-rhythm 70. http://www.wilsonminer.com/ 72. http://clagnut.com/ 74. http://clagnut.com/ 76. http://24ways.org/2006/compose-to-a-vertical-rhythm 78. http://www.thewatchmakerproject.com/ 80. http://blogdorf.com/ 82. http://www.bogglethemind.com/ 84. http://clagnut.com/ 86. http://www.stevecochrane.com/ 88. http://24ways.org/2006/compose-to-a-vertical-rhythm 90. http://nateklaiber.com/ 92. http://www.boilerroomdigital.co.uk/ 94. http://24ways.org/2006/compose-to-a-vertical-rhythm 96. http://24ways.org/2006/compose-to-a-vertical-rhythm 98. http://24ways.org/2006/compose-to-a-vertical-rhythm 100. http://tr.im/VRdesign 102. http://www.finestfolkart.com/ 104. http://24ways.org/2006/compose-to-a-vertical-rhythm 106. http://24ways.org/2006/compose-to-a-vertical-rhythm 108. http://voltagecreative.com/ 110. http://24ways.org/2006/compose-to-a-vertical-rhythm 112. http://www.pureandsimpleweb.co.uk/ 113. http://www.textism.com/tools/textile/ 114. http://24ways.org/authors/richardrutter 115. http://clearleft.com/ 116. http://webtypography.net/ 117. http://clagnut.com/ 118. http://24ways.org/authors/richardrutter 119. http://24ways.org/2009/real-fonts-and-rendering 120. http://24ways.org/authors/jeffreyzeldman 121. http://24ways.org/2009/spruce-it-up 122. http://24ways.org/authors/jonathansnook 123. http://24ways.org/2009/designing-for-the-switch 124. http://24ways.org/authors/markboulton 125. http://24ways.org/2009/type-inspired-interfaces 126. http://24ways.org/authors/danmall 127. http://24ways.org/2008/a-festive-type-folly 128. http://24ways.org/authors/jontan 129. http://24ways.org/2007/increase-your-font-stacks-with-font-matrix 130. http://24ways.org/authors/richardrutter 131. http://24ways.org/2007/typesetting-tables 132. http://24ways.org/authors/markboulton 133. http://24ways.org/2006/knockout-type 134. http://24ways.org/authors/shauninman 135. http://24ways.org/2005/an-explanation-of-ems 136. http://24ways.org/authors/richardrutter 137. http://24ways.org/2008 138. http://grabaperch.com/ 139. http://edgeofmyseat.com/ 140. http://allinthehead.com/ 141. http://suda.co.uk/ 142. http://madebyelephant.com/ 143. http://24ways.org/authors 144. http://feeds.feedburner.com/24ways 145. http://twitter.com/24ways 146. http://www.memset.com/?source=mclelaa