67- 68:12 12/2006 [38]Compose to a Vertical Rhythm 69- -- 76- limitless choice of arbitrary quantities." So says the typographer 77: Robert Bringhurst, and just as regular use of time provides rhythm in 78: music, so regular use of space provides rhythm in typography, and 79: without rhythm the listener, or the reader, becomes disorientated and 80- lost. 81- 82: On the Web, vertical rhythm - the spacing and arrangement of text as 83- the reader descends the page - is contributed to by three factors: font 84- size, line height and margin or padding. All of these factors must 85: calculated with care in order that the rhythm is maintained. 86- -- 89- heading, body copy or sidenote, is the key to a solid dependable 90: vertical rhythm, which will engage and guide the reader down the page. 91- To see this in action, I've created [42]an example with headings, -- 113- 11. } 114: 12. Source: [44]/code/compose-to-a-vertical-rhythm/1.txt 115- -- 129- With our rhythmic unit set at 18px we need to ensure that it is 130: maintained throughout the body copy. A common place to lose the rhythm 131- is the gaps set between margins. The default treatment by web browsers -- 133- this would give a spacing between the paragraphs of 12px and hence 134: throw the text out of rhythm. If the rhythm of the page is to be 135- maintained, the spacing of paragraphs should be related to the basic -- 146- 5. } 147: 6. Source: [45]/code/compose-to-a-vertical-rhythm/2.txt 148- -- 157- 4. } 158: 5. Source: [46]/code/compose-to-a-vertical-rhythm/3.txt 159- -- 179- adjusted to fit. The temptation is to set heading margins to a simple 180: 1em, but in order to maintain the rhythm, the top and bottom margins 181- should be set at 1.286em so that the spacing is equal to the full 18px -- 188- 6. } 189: 7. Source: [49]/code/compose-to-a-vertical-rhythm/4.txt 190- -- 200- 6. } 201: 7. Source: [50]/code/compose-to-a-vertical-rhythm/5.txt 202- -- 210- 6. } 211: 7. Source: [51]/code/compose-to-a-vertical-rhythm/6.txt 212- -- 215- Sidenotes (and other supplementary material) are often set at a smaller 216: size to the basic text. To keep the rhythm, this smaller text should 217- still line up with body copy, so a calculation similar to that for -- 223- 4. } 224: 5. Source: [52]/code/compose-to-a-vertical-rhythm/7.txt 225- -- 227- 228: One additional point where vertical rhythm is often lost is with the 229- introduction of horizontal borders. These effectively act as shims 230- pushing the subsequent text downwards, so a two pixel horizontal border 231: will throw out the vertical rhythm by two pixels. A way around this is 232- to specify horizontal lines using background images or, as in our -- 238- = 0.0833. I have added a margin of 1½ lines above the border 239: (1.5 × 18 ÷ 12 = 2.5ems), so to maintain the rhythm the border + 240- padding must equal a ½ (9px). We know the border is set to 1px, so the -- 243- 244:Hit me with your rhythm stick 245- 246: Composing to a vertical rhythm helps engage and guide the reader down 247- the page, but it takes typographic discipline to do so. It may seem -- 430- I think its a common misconception that text on the web will always 431: look bland, and you have proved that it can have rhythm and style. 432- * [91]02/01/2007 -- 457- I've been using this article as the basis for designing my site 458: with some "vertical rhythm". Everything is going well except with 459- forms (input, textarea, etc.). I just haven't been able to use css 460: to maintain the vertical rhythm (based on total line height of 461- 18px). -- 492- a px of height on any line that uses it, and that subtly throws off 493: the vertical rhythm for each line and it can add up depending 494- -- anybody else run into this and solve it? -- 497-[106]Anonymous 498: Does this truly keep the vertical rhythm? If you zoom in on the 499- example, you'll see that the descender of the letter g in the H1 500: header "New England" crosses your rhythm marker's background line, 501- while a lowercase g in the following paragraph does not. There -- 506- I find it humorous that this site itself does not compose to a 507: vertical rhythm. I've seen very few online that do. It's so 508- difficult to implement across browsers it is usually brushed aside -- 512-[110]eric 513: I've yet to see any empirical evidence that "vertical rhythm" 514- applied to this degree has any impact on how well a reader is able -- 520- margins -- maybe some actual data -- then I'll be interested in 521: expending the effort needed to support real vertical rhythm. Until 522- then, I just don't see how it's cost-effective. -- 612- 1. http://feeds.feedburner.com/24ways 613: 2. http://24ways.org/2006/compose-to-a-vertical-rhythm#content 614- 3. http://24ways.org/2005 -- 630- 19. http://24ways.org/2006/revealing-relationships-can-be-good-form 631: 20. http://24ways.org/2006/compose-to-a-vertical-rhythm 632- 21. http://24ways.org/2006/showing-good-form -- 648- 37. http://feeds.feedburner.com/24ways 649: 38. http://24ways.org/2006/compose-to-a-vertical-rhythm 650- 39. http://clagnut.com/ 651: 40. http://24ways.org/2006/compose-to-a-vertical-rhythm#article 652: 41. http://24ways.org/2006/compose-to-a-vertical-rhythm#comments 653: 42. http://24ways.org/examples/compose-to-a-vertical-rhythm/example.html 654: 43. http://24ways.org/examples/compose-to-a-vertical-rhythm/example.html 655: 44. http://24ways.org/code/compose-to-a-vertical-rhythm/1.txt 656: 45. http://24ways.org/code/compose-to-a-vertical-rhythm/2.txt 657: 46. http://24ways.org/code/compose-to-a-vertical-rhythm/3.txt 658- 47. http://developer.yahoo.com/yui/reset/ 659: 48. http://24ways.org/examples/compose-to-a-vertical-rhythm/example.html 660: 49. http://24ways.org/code/compose-to-a-vertical-rhythm/4.txt 661: 50. http://24ways.org/code/compose-to-a-vertical-rhythm/5.txt 662: 51. http://24ways.org/code/compose-to-a-vertical-rhythm/6.txt 663: 52. http://24ways.org/code/compose-to-a-vertical-rhythm/7.txt 664: 53. http://twitter.com/?status=Compose+to+a+Vertical+Rhythm+http://24ways.org/200612 665: 54. http://24ways.org/2006/compose-to-a-vertical-rhythm#comments 666- 56. http://julianbh.com/ 667: 58. http://24ways.org/2006/compose-to-a-vertical-rhythm 668- 60. http://www.css3.info/blog/ -- 671- 66. http://www.robweychert.com/ 672: 68. http://24ways.org/2006/compose-to-a-vertical-rhythm 673- 70. http://www.wilsonminer.com/ -- 675- 74. http://clagnut.com/ 676: 76. http://24ways.org/2006/compose-to-a-vertical-rhythm 677- 78. http://www.thewatchmakerproject.com/ -- 681- 86. http://www.stevecochrane.com/ 682: 88. http://24ways.org/2006/compose-to-a-vertical-rhythm 683- 90. http://nateklaiber.com/ 684- 92. http://www.boilerroomdigital.co.uk/ 685: 94. http://24ways.org/2006/compose-to-a-vertical-rhythm 686: 96. http://24ways.org/2006/compose-to-a-vertical-rhythm 687: 98. http://24ways.org/2006/compose-to-a-vertical-rhythm 688- 100. http://tr.im/VRdesign 689- 102. http://www.finestfolkart.com/ 690: 104. http://24ways.org/2006/compose-to-a-vertical-rhythm 691: 106. http://24ways.org/2006/compose-to-a-vertical-rhythm 692- 108. http://voltagecreative.com/ 693: 110. http://24ways.org/2006/compose-to-a-vertical-rhythm 694- 112. http://www.pureandsimpleweb.co.uk/