<aside>
  
  <p>One liner here for good measure.</p>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam risus dolor, vehicula sed vehicula vitae, semper in erat. Quisque placerat commodo semper. Proin iaculis bibendum tempor. Ut elementum dolor et quam mollis fermentum.Quisque sit amet pellentesque orci. Aliquam eget purus turpis, vel auctor elit. Aliquam placerat convallis iaculis. Nullam ultricies dui ac augue facilisis blandit.</p>
  
  <ul>
    <li>Proin ac condimentum mauris.</li>
    <li>Vivamus sagittis, nisi non venenatis molestie, massa elit tristique nisl, vitae porttitor metus mauris at dui.</li>
    <li>Quisque sit amet pellentesque orci.</li>
    <li>Aliquam eget purus turpis, vel auctor elit.</li>
    <li>Aliquam placerat convallis iaculis.</li>
</ul>
    
  <p>Nullam ultricies dui ac augue facilisis blandit.</p>
  
  

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam risus dolor, vehicula sed vehicula vitae, semper in erat. Quisque placerat commodo semper. Proin iaculis bibendum tempor. Ut elementum dolor et quam mollis fermentum.Quisque sit amet pellentesque orci. Aliquam eget purus turpis, vel auctor elit. Aliquam placerat convallis iaculis. Nullam ultricies dui ac augue facilisis blandit.</p>
</aside>
<section>
  <h1>Header One<br/>Multiline Works</h1>
  <h2>Header Two<br/>Multiline Works</h2>
  <h3>Header Three<br/>Multiline Works</h3>
  <h4>Header Four<br/>Multiline Works</h4>
  <h5>Header Five<br/>Multiline Works</h5>
  <h6>Header Six<br/>Multiline Works</h6>
</section>
body {
  
  /* Preserve default size */
  font-size: 1em; /* 16px */
  
  /* Set the vertical rhythm */
  /* Round, even numbers are best */
  line-height: 125%; /* 20px */
  font-family: sans-serif;
}

/* Here's the typography settings */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
}
h1 {
  /* Total Height: 100px */
  font-size: 400%; /* 64 */
  
  /* Below should be multiple 0f 20px */
  line-height: 94%; /* 60 */  
  padding: 0.3125em 0; /* 20 */
}
h2 {
  /* Total Height: 80px */
  font-size: 200%; /* 32 */
  
  /* Below should be multiple 0f 20px */
	line-height: 125%; /* 40 */  
	padding: 0.625em 0; /* 20 */
}
h3 {
	/* Total Height: 60px */
	font-size: 150%; /* 24 */
  
  /* Below should be multiple 0f 20px */
	line-height: 167%; /* 40 */
  padding: 0.833333333em 0; /* 20 */
}
h4 {
	/* Total Height: 60px */
	font-size: 132%; /* 21 */
  
  /* Below should be multiple 0f 20px */
	line-height: 96%; /* 20 */
	padding: 0.952380952em 0;  /* 20 */
}
h5 {
	/* Total Height: 80px */
	font-size: 113%; /* 18 */
  
  /* Below should be multiple 0f 20px */
	line-height: 112%; /* 20 */
	padding: 1.111111111em 0; /* 20 */
}
h6 {
	/* Total Height: 40px */
	font-size: 100%; /* 16 / 16 */
  
  /* Below should be multiple 0f 20px */
	line-height: 125%; /* 20 */  
	padding: 1.25em 0; /* 20 */
}
p, ul {
	font-size: 1em; /* 16 */
  margin: 1.25em 0; /* 20 */
}
li {
	margin-bottom: 0em;
}

/* JUST FOR DEMO PURPOSES */

html {
 /* Baseline grid stolen from http://jsfiddle.net/joshnh/GdAEf/ for example purposes only */
    background-image: -webkit-linear-gradient(hsla(0,0%,0%,0) 95%, hsla(0,25%,50%,.5) 95%);
    background-image:    -moz-linear-gradient(hsla(0,0%,0%,0) 95%, hsla(0,25%,50%,.5) 95%);
    background-image:     -ms-linear-gradient(hsla(0,0%,0%,0) 95%, hsla(0,25%,50%,.5) 95%);
    background-image:      -o-linear-gradient(hsla(0,0%,0%,0) 95%, hsla(0,25%,50%,.5) 95%);
    background-image:         linear-gradient(hsla(0,0%,0%,0) 95%, hsla(0,25%,50%,.5) 95%);
    background-position: 50% 0;
    background-size: 1.25em 1.25em;
    margin: 0;
    padding: 0.75em 3em;
}

/* Show element boundries */
h1, h3, h5 {
  background: rgba(0,0,0,0.2);
}

/* Position elements side by side for comparison */
aside, section {
  display: inline-block;
  vertical-align: top;
}
section {
  width: 74%;
}
aside {
  width: 25%;
}
Rerun