Control de tipografías con CSS

dabblet.css

/**
 * Control de tipografías con CSS
 */

/* incrustamos la tipografía que usaremos en el contenedor dos */
@import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic);

/* tipografías generales */
body {
  font-family: "American Typewriter",monospace;
  color: #12871E;
  background-color: rgba(245,245,240,1);
}
h1{}
h2{}
ul{}
li{}
hr{}
p{}
ins{}
del{}


/* tipografías del contenedor dos */
.contenedor.ejemplo-dos {
  font-family: 'PT Sans', sans-serif;
  color: #333;
}
.contenedor.ejemplo-dos h1 {
  font-weight: normal;
}
.contenedor.ejemplo-dos h2 {
  font-weight: normal;
}
.contenedor.ejemplo-dos ul {
  padding-left: 0;
}
.contenedor.ejemplo-dos li {
  list-style-type: none;
}
.contenedor.ejemplo-dos hr{border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, 
rgba(0,0,0,0), 
rgba(0,0,0,0.75), 
rgba(0,0,0,0));
background-image: -moz-linear-gradient(left, 
rgba(0,0,0,0), 
rgba(0,0,0,0.75), 
rgba(0,0,0,0));
background-image: -ms-linear-gradient(left, 
rgba(0,0,0,0), 
rgba(0,0,0,0.75), 
rgba(0,0,0,0));
background-image: -o-linear-gradient(left, 
rgba(0,0,0,0), 
rgba(0,0,0,0.75), 
rgba(0,0,0,0));
}
.contenedor.ejemplo-dos p {
}
.contenedor.ejemplo-dos a {
  color: #0082C6;
}
.contenedor.ejemplo-dos ins {
  text-decoration: none;
  background-color: #d4fcbc;
}
.contenedor.ejemplo-dos del {
  text-decoration: none;
  background-color: #fbb6c2;
  color: #555
}




/* estructura */
.contenedor{width: 37em;margin: 3em auto;padding: 2em;background-color: #fff;border-radius:7px;}

.contenedor.ejemplo-uno{}
.contenedor.ejemplo-dos{}

dabblet.html

<div class="contenedor ejemplo-uno">
  <h1>Un encabezado de primer nivel</h1>
  <h2>Un encabezado de segundo nivel</h2>
  <ul>
    <li>un ítem de un listado sin orden</li>
    <li>un ítem más de un listado sin orden</li>
    <li>otro ítem más un listado sin orden</li>
  </ul>
  <hr />
  <p>Lorem ipsum dolor sit amet, <em>un texto con énfasis</em> consectetur adipisicing elit, <a href="#">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a> <strong>Un texto con mayor énfasis</strong> ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p class="copyright">Copyright ©2013 <del datetime="2013-09-17T12:52:56-0500" cite="source">Alguna persona</del> <ins datetime="2013-09-17T12:52:32-0500">Roberto Valencia</ins></p>
</div><!-- .contenedor ejemplo-uno -->

<div class="contenedor ejemplo-dos">
  <h1>Un encabezado de primer nivel</h1>
  <h2>Un encabezado de segundo nivel</h2>
  <ul>
    <li>un ítem de un listado sin orden</li>
    <li>un ítem más de un listado sin orden</li>
    <li>otro ítem más un listado sin orden</li>
  </ul>
  <hr />
  <p>Lorem ipsum dolor sit amet, <em>un texto con énfasis</em> consectetur adipisicing elit, <a href="#">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a> <strong>Un texto con mayor énfasis</strong> ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p class="copyright">Copyright ©2013 <del datetime="2013-09-17T12:52:56-0500" cite="source">Alguna persona</del> <ins datetime="2013-09-17T12:52:32-0500">Roberto Valencia</ins></p>      
</div><!-- .contenedor ejemplo-dos -->

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"190","seethrough":"","prefixfree":"1","page":"all"}