Lined Paper - A Micro Typography Framework

index.html

<div class = "container">
  <div class = "page">
		<div class = "header"> 
			<h1>Lined Paper</h1>
		</div>
		<div class = "lines">
			<div class = "margin">
				<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
				<h2>Subhead</h2>
				<p class = "quote">A quote by some dude:</p>
				<blockquote>
				Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
				</blockquote>
			</div>
		</div>
	</div>
</div>

Lined-Paper---A-Micro-Typography-Framework.markdown

Lined Paper - A Micro Typography Framework

A baseline grid for all of your modular typography needs. It uses 20px base font size, at scale factor of 1.333, math by gridlover.net.

A Pen by James Barnett on CodePen.

License.

script.js

/* Modular Typography

  body font size = 20px
  body line height = 1.5 
  scale = Musical Fourth 3:4 (1.333)

math by gridlover.net */

style.css

/***** Reset *****/

h1, h2, p, blockquote {
  margin: 0;
  padding: 0;
}

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

/****** Lined Paper ******/

.container { 
  margin: 4em auto;
  width: 800px;
}

.header { height: 100px; }
.lines, .margin { min-height: 925px; }

.margin { height: 100%; }
.margin, .header { 
  margin-left: 4em; 
  border-left:  2px solid #E0B8B8;
  padding-left: 0.5em;
  
  margin-right: 4em; 
  border-right:  2px solid #F3E2E2;
  padding-right: 0.5em;
}

.page { 
  color: #444;
  border: 1px solid #d2d2d2;
  background-color: #FFFFFA;
}

.lines {
    background: -webkit-linear-gradient(#d9eaf3, #FFFFFA 0.15em);
    background: linear-gradient(#d9eaf3, #FFFFFA 0.15em);
    background-size: 100% 1.5em;
}

body {
    font-size: 20px;
    line-height: 1.5;
}

h1 {
    font-size: 3.15000em;
    line-height: 1.42857em;
    padding-top: 0.25em;
}

h2 {
    font-size: 1.80000em;
    line-height: 1.66667em;
    margin-top: 0.8333em;
    margin-bottom: 0.8333em;
}

p, blockquote {  
    margin-top: 0em;
    margin-bottom: 1.5em; 
}

/***** Type Styles *****/

body { 
  font-family: Georgia, "Times New Roman", Times, serif;
  color: #1F1F1F;
}

h1, h2 { font-family: "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif; }

blockquote {
  font-style: italic;
  padding-left: 2em;
}