Brian's Test Typography

dabblet.css

/**
 * Brian's Test Typography
 */



::-moz-selection { background: #ffc000; }
::selection      { background: #ffc000; }

/************************/
/* For IE to render HTML5 elements properly */
header, footer, article, section, nav, menu {
  display: block;}
/*********/

body {
  /*
  color: #111;
  background: #E7E7E7;
  */
  color: #333;
  background: #F8F8F8;
  font-family: serif;
  font-size: 1em;
  line-height: 1.5;
  vertical-align: baseline;
}

html>body {
  font-size: 22px;
}

hr {
  height: 20px;
  max-width: 40%;
  min-width: 30%;
  background: #333;
}

strong {
  font-weight: bold;
}

h1 {
  font-size: 5em;
  line-height: 1;
  font-weight: normal;
}

h3 {
  background: #333;
  color: #F8F8F8;
  font-size: 1.25em;
  font-weight: normal;
  display: inline;
  padding: 3px 4px;
}

header p {
  font-size: 1.75em;
  line-height: 1.25;
}

#wrapper {
  max-width: 800px;
}

dabblet.html

  <div id="wrapper">
  <header>
    <h1>Simple rules for good typography</h1>
    <hr>
    <p>Here are some <strong>basic rules</strong> to <strong>improve your typography</strong> across either web or print. Of course, rules are only to start with, and are meant to be broken. But if you want something to look neat, clean and generally well-designed they are a good set to follow.</p>
  </header>
  <section>
    <h3>Don't use too many typefaces</h3>
    <p>Consistency throughout</p>
  </section>
  </div>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}