Thematic 5 Typography

slate + red scheme

by helgatheviking

HTML

<link rel="stylesheet" href="https://raw.github.com/necolas/normalize.css/master/normalize.css">
<p>Pitchfork seitan authentic, cray next level bushwick mlkshk. Locavore narwhal mumblecore Austin irony raw denim. Polaroid sriracha art party, beard ethical chillwave biodiesel lomo twee. Gastropub forage williamsburg hella ethical, authentic brooklyn typewriter pinterest skateboard iphone organic trust fund. Shoreditch post-ironic ethical gastropub. </p>

<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 />

<p class="">Pitchfork seitan authentic, cray next level bushwick mlkshk. Locavore narwhal mumblecore Austin irony raw denim. Polaroid sriracha art party, beard ethical chillwave biodiesel lomo twee. Gastropub forage williamsburg hella ethical, authentic brooklyn typewriter pinterest skateboard iphone organic trust fund. Shoreditch post-ironic ethical gastropub.</p>

<h2>Headline</h2>
<table><caption>table title</caption>
<thead>
<tr>
<th>Table header 1</th>
<th>Table header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Table row 1, data 1</td>
<td>Table row 1, data 2</td>
</tr>
<tr>
<td>Table row 2, data 1</td>
<td>Table row 2, data 2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Table footer, data 1</td>
<td>Table footer, data 2</td>
</tr>
</tfoot>
</table>

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;...