Playing w/ web Typography

index.html

<div class='issue'>
  <p>Issue <span>01</span></p>
</div>

<main>
  <header>
  <h1>Playing with fine web typography.</h1>
  <p class='author'><span>by Jonathan A. Doe.</span></p>
  </header>
<p class='intro'>
Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass.
</p>  

<h2>A Subheading</h2>

<p>Normally, <em>both your asses</em> would be dead as fucking fried chicken, but you happen to pull this shit while I'm in a transitional period so I don't wanna kill you, I wanna help you. But I can't give you this case, it don't belong to me. Besides, I've already been through too much shit this morning over this case to hand it over to your dumb ass. </p>

<p>
Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the <em>arch-villain's</em> going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back<sup>1</sup> when... You know why, David? Because of the kids. They called me Mr Glass.
</p>

<h2>Another Subheading</h2>
<p>
Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the <em>arch-villain's</em> going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back<sup>1</sup> when... You know why, David? Because of the kids. They called me Mr Glass.
</p>
</main>
<footer>
   <ol>
     <li>Some scientifical reference, John Doe, 1978</li>
  </ol>
</footer>

playing-w-web-typography.markdown

Playing w/ web Typography

Exploring web typography using the famous georgia. i used this tool for the dummy text as the hyphens-property(1) doesn't seem to work with latin. Browser support kinda sucks.(2)

1. http://www.w3.org/TR/css3-text/#hyphenation
2. http://caniuse.com/#feat=css-hyphens

A Pen by Max Kohler on CodePen.

License.

style.scss

@import "compass/css3";

$p: rgb(150,190,227);

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
h1, h2, p{
  text-redering: optimizeLegibillity;
  -moz-font-feature-settings: "dlig";
  color: rgb(30,30,30);
}
header {
  margin-top: 3em;
  margin-bottom: 2em;
}
body {
  border-top: 1em solid $p;
  background: rgb(250,250,250);
  font-family: georgia;
  padding: 0em 5%;
  @media (min-width: 30em){
    padding: 2em 20%;
  }
}
.issue {
  top: 0; 
  left: 0;
  position: absolute;
  width: 100%;
  
  @media (min-width: 30em){
 width: auto;
  border-left: 1px solid white;
  border-bottom: 1px solid white;
  border-right: 1px solid white;
  
  top: 1em;
  left: 2%;
  }
  background: $p;
  p {
    color: white;
    padding: .5em;
    font-style: italic;
  
  }
  span {
    @media (min-width: 30em){
      border-top: 2px dotted white;
      display: block;
      font-size: 2em;
      margin-top: .2em;
    }
    
    font-style: normal;
  }
}
.author {
  text-align: center;
  color: gray;
  span{
    padding-bottom: .2em;
    border-bottom: 1px solid lightgray;
  }
}
sup {
  vertical-align: super;
}
h1 {
  font-size: 2em;
  @media (min-width: 30em){
  font:{
    size: 2.5em;
  }
  }
  padding-bottom: .5em;
  text-align: center;
}
h2 {
  font:{
    size: 1.5em;
    variant: small-caps;
  }
letter-spacing: .04em;
  padding: .5em 0;
}
main p {
  line-height: 1.55em;
  padding-bottom: 1em;
  text-align: justify;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  
  
}
.intro:first-letter{
    font-size: 3em;
    float: left;
    display: block;
    line-height: 1;
    padding: .1em;
  }
em {
  font-style: italic;
}
footer {
  border-top: 5px solid rgb(240,240,240);
  color: gray;
  font-size: .8em;
  padding-top: 3em;
}

ol {
  list-style: decimal inside;
}