Thematic 5 Typography

slate + red scheme

by helgatheviking

HTML

<link rel="stylesheet" href="https://raw.github.com/necolas/normalize.css/master/normalize.css">
<h2>Blockquote</h2>
<blockquote cite="http://www.projeturbain.com">
<p>Duis autem vel eum iriure dolor in hendrerit in <q>vulputate velit esse molestie consequat</q>, vel illum dolore eu feugiat nulla facilisis.</p>
</blockquote>
    
<blockquote cite="http://www.projeturbain.com/"><p>Chambray sriracha 3 wolf moon artisan swag mumblecore authentic messenger bag truffaut leggings polaroid gentrify. Art party high life fap banksy, blog beard swag. Twee banh mi cardigan retro, raw denim lomo ethical. Hoodie ethnic twee quinoa single-origin coffee, PBR fixie lomo iphone.</p></blockquote>

<a class="new" href="http://www.fakelinktonowhere.com">hyperlink</a>
<a class="visited" href="http://www.google.com">Visited Link</a>

<ins>inserted text</ins>
<mark>marked (highlighted) text</mark>

<hr />

<h1>Title &mdash; h1</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

<h2>Subtitle &mdash; h2</h2>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>

<h3>Subtitle &mdash; h3</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<h4>Subtitle &mdash; h4</h4>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>

<h5>Subtitle &mdash; h5</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<h6>Subtitle &mdash; h6</h6>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation...

CSS

/*
 * Typography Styles
 */

 /* default font */
 /* 16px base font size with 162.5% (26px) golden-ish, unitless line height and margin for vertical rhythm 
 /* Font-size unit is based on 16px browser default size */

body, button, input, select, textarea {font: 1em/1.625em Georgia,Palatino,"Palatino Linotype",Times,"Times New Roman",serif; color: #262626} 
body {-webkit-font-smoothing:antialiased; font-smoothing:antialiased; text-rendering:optimizeLegibility;}

/* headings */
/* Composed to a scale of 12px, 14px, 16px, 18px, 21px, 24px, 36px, 48px, 60px and 72px */
h1, h2, h3, h4, h5, h6 {font-family:Futura, "Century Gothic", AppleGothic, sans-serif; color:#0f0f0f;text-shadow:1px 1px 1px rgba(0,0,0,.10)}

h1  {
    margin: 0 0 0.433em;
    font-size: 3.75em; /* 60px */
    line-height: 1.3em; /* 78px */
} 
h2 {
    margin: 0 0 0.5417em;
    font-size: 3em;  /* 48px */
    line-height: 1.0833em; /* 52px */
} 
h3 {
    margin: 0 0 0.7222em;
    font-size: 2.25em; /* 36px */
    line-height: 1.4444em; /* 52px */
} 
h4 {
    margin: 0 0 1.0833em;
    font-size: 1.5em; /* 24px */
    line-height: 1.0833em; /* 26px */
} 
h5 {
    margin: 0 0 1.2381em;
    font-size: 1.3125em; /* 21px */
    line-height: 1.2381em; /* 26px */
} 
h6 {
    margin: 0 0 1.4444em;
    font-size: 1.125em; /* 18px */
    line-height: 1.4444em; /* 26px */
} 

/* vertical rhythm on elements */
p, ul, ol, dl, pre, table, form {margin: 0 0 1.625em; }

/* quotes */
blockquote { margin:0 3em; font-style:italic; padding-left: 1.625em; border-left: .25em solid #0f0f0f}
blockquote em, blockquote i, blockquote cite { font-style:normal; }
blockquote.left { text-align:right; }
blockquote.right { text-align:left; }

/*lists*/
ul { list-style:disc; }
ol { list-style-type:decimal; }
ol ol { list-style:upper-alpha; }
ol ol ol { list-style:lower-roman; }
ol ol ol ol { list-style:lower-alpha; }
ul ul, ol ol, ul ol, ol ul { margin-bottom:0; }
dt { font-weight:bold; }

/* hyperlinks */
a { cursor: pointer;...