Vertical Rhythm Check

index.html

<div id = "lines">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer consequat convallis mi, luctus imperdiet est imperdiet nec. Aenean quis felis mauris. Donec mauris sapien, ullamcorper quis viverra a, pharetra ut felis. Etiam rutrum condimentum mi, id feugiat purus egestas a. Phasellus massa mi, consectetur tincidunt facilisis eget, volutpat condimentum arcu. Praesent aliquet felis vitae nisi mattis gravida placerat odio facilisis. Cras ut nunc turpis. Nulla tellus nulla, vehicula non volutpat et, auctor eu turpis. Pellentesque eget euismod odio. Nunc porttitor dui quis neque adipiscing fermentum. Fusce arcu ipsum, rutrum ut interdum sed, porta eu augue. Integer vitae tellus id sapien volutpat sollicitudin eget ut leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi pretium diam id sem aliquam laoreet.</p>

<p>Donec id orci non augue gravida congue. Sed vulputate orci in neque faucibus tristique. Mauris eu lacinia est. Etiam metus quam, condimentum eget vehicula ultricies, mollis vel ipsum. Cras convallis, ligula vel suscipit auctor, massa mi sollicitudin metus, quis pulvinar orci lorem nec purus. Praesent ut dui neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut ac metus ut nulla ullamcorper feugiat eu et dolor.</p>

<p>Donec vehicula nisl sit amet dui feugiat at eleifend urna malesuada. Aliquam sit amet risus ut magna aliquet suscipit. Aenean imperdiet nisl sit amet nisi varius elementum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent dui ipsum, pretium vel feugiat a, ultricies ac nisi. Praesent a leo non enim venenatis condimentum eu ac mi. Nullam varius condimentum nulla, luctus dignissim lectus sollicitudin a. Nam tempor nisl eu dolor iaculis fringilla et nec dolor. In quis lorem eget justo sollicitudin fringilla. Sed vel elit nibh. Cras sit amet mattis odio. Duis lacinia dictum tellus, id fringilla velit congue et. Curabitur diam mauris, auctor in ullamcorper vel, interdum in ligula. Quisque vitae tortor est, quis vulputate nisi. In ut mi et orci laoreet gravida vel vel orci.</p>

<p>Praesent semper viverra turpis, non tempus metus iaculis in. Morbi at nibh sit amet ante commodo posuere. In non tortor urna, ac rhoncus leo. Vestibulum vitae tellus orci, vitae lobortis sapien. Etiam tempor orci id libero pulvinar viverra. Quisque quam massa, interdum at pellentesque eget, fringilla sed diam. Morbi posuere, ante a tristique vehicula, felis neque faucibus turpis, sit amet adipiscing est tortor eu nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dignissim velit non eros fringilla et aliquet sem tristique. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

<p>Sed at turpis nisi, vel placerat metus. Suspendisse mollis nibh nec orci bibendum convallis. Ut pretium, tortor a molestie tristique, augue velit facilisis diam, nec sollicitudin mauris felis lobortis metus. Quisque consequat libero non nunc mollis nec adipiscing sem dapibus. Aliquam sed consectetur lectus. Praesent sed purus vitae augue rhoncus venenatis. Aenean eget tortor est, id ultricies orci.</p>

<p>Fusce pellentesque, libero sit amet posuere rhoncus, magna dolor ullamcorper leo, in aliquam elit tellus non urna. Proin consequat aliquam vulputate. Mauris sed euismod erat. Maecenas dictum, enim dignissim adipiscing dapibus, tortor neque rutrum sapien, eget vulputate lectus tortor nec diam. Cras et elit eget lectus scelerisque accumsan. Mauris consectetur blandit magna, ac condimentum erat suscipit eu. Donec ac orci ultricies massa euismod iaculis eu vitae nunc.</p>

<p>Nullam in mauris ipsum. Nam vitae mi consectetur urna posuere scelerisque ut et risus. Curabitur eu justo congue mi iaculis mattis porttitor et metus. Sed quam augue, ornare et consectetur id, semper sit amet dui. In vel venenatis mauris. In mattis accumsan justo, in lacinia nisl varius a. Maecenas lectus turpis, interdum vel feugiat sed, imperdiet sit amet odio.</p>

<p>Mauris tempus, mi eu commodo mattis, nisl libero rhoncus urna, rhoncus venenatis sem risus sed leo. Nulla sollicitudin egestas dui non tempor. Nam luctus ultricies tellus vel lobortis. Mauris vehicula cursus est sit amet varius. Nunc placerat tempor nisl sit amet pretium. Morbi leo ante, fringilla ac commodo in, fringilla quis risus. Pellentesque rutrum, nunc at dignissim bibendum, diam libero sollicitudin felis, quis consectetur felis diam sed mi.</p>

<p>Donec eleifend nisi vel dolor dignissim vestibulum. Sed varius justo eu nulla convallis imperdiet. Aliquam et augue id ante viverra auctor. Cras a quam diam. Cras adipiscing tempor commodo. Aliquam vel ipsum ultricies neque faucibus volutpat. Donec eu rhoncus metus. Maecenas sodales magna non dui tempus et fringilla neque gravida. Donec quis justo velit, ut feugiat lacus. Mauris ut ligula in lacus condimentum ornare. Aenean nec magna leo. Donec varius nulla ac risus eleifend non consectetur velit semper. Aliquam non adipiscing nulla. Pellentesque consectetur tincidunt justo, dignissim porta libero tempus sed. Morbi vehicula, nisi sed eleifend scelerisque, velit tortor tincidunt sem, ut pellentesque lectus enim auctor mauris.</p>

<p>Aenean metus lectus, tristique interdum pretium eu, viverra vitae ligula. Suspendisse vel dolor in tortor malesuada hendrerit. Phasellus interdum, sapien suscipit vulputate pulvinar, lorem augue aliquam nulla, ac pellentesque nibh lacus ut dolor. Nullam tempus risus sit amet lorem tempus mollis. Vestibulum vitae elit orci, vel aliquet mi. Integer blandit, lectus sed porttitor faucibus, odio metus tincidunt nibh, elementum fermentum massa leo sed purus. Ut nibh urna, dictum ac congue nec, rhoncus vitae arcu.</p>
</div>

style.css

/* basic styles */
body { 
  background: #E0E0E0 url('http://subtlepatterns.com/patterns/creampaper.png');
}

div { 
  width: 1000px; 
  margin: 3em auto;
  padding: 1.5em; 
  background-color: #FFFFFA; 
}

p { 
  font-family: Georgia, "Times New Roman", Times, serif;
  color: #1F1F1F; 
  margin: 0; 
  padding: 0; 
}

/* modular scale */
body { 
  font-size: 18px; 
  line-height: 1.5em; 
}

p { margin-bottom: 1.5em; }

/* baselines */
#lines { 
  z-index: 2;
  background: -webkit-linear-gradient(bottom, #FF9999, #FFFFFA 2px); 
  background: -moz-linear-gradient(bottom, #FF9999, #FFFFFA 2px); 
  background: -o-linear-gradient(bottom, #FF9999, #FFFFFA 2px); 
  background: linear-gradient(bottom, #FF9999, #FFFFFA 2px); 
  background-size: 100% 1.5em; 
}

Vertical-Rhythm-Check.markdown

Vertical Rhythm Check

Using line-height, margin-bottom & linear-gradient to create baselines to check vertical rhythm

A Pen by James Barnett on CodePen.

License.