A CodePen by jakschu.

index.html

<h1><a href="http://blokkfont.com/" target="_blank">BLOKK font &rarr;</a></h1>

<section class="main-content" role="main">
  
  <article>
      
    <h2>Dogs and Cats, Living Together</h1>
    
    <p>Yep vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
    
  </article>
  
  <article>
      
    <h2>One More Time</h1>
    
    <p>Yep vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
    
  </article>
  
</section>

<aside class="main-sidebar" role="contentinfo">
  
  <div class="module">
    <h3>July 12, 2013</h3>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  </div>  
  
  <div class="module">
    <h3>August 12, 2013</h3>
    <p>Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  </div>  
  
</aside>

style.css

@font-face {
  font-family: 'BLOKK';
  src: url('http://cl.ly/N44i/BLOKKRegular.woff') format('woff'),
       url('http://cl.ly/N3cE/BLOKKRegular.ttf') format('truetype');
}

* {
  box-sizing: border-box;
}

body {
  font: 12px/1.4 'BLOKK'; 
  padding: 30px;
  background: tan;
  color: #222;
}

.main-content {
  width: 66.66%;
  float: left;
}
.main-sidebar {
  width: 33.33%;
  float: right;
  padding-left: 20px;
}
.module, article {
  background: rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin: 0 0 20px 0;
  overflow: hidden;
}

h1 {
  font: bold 32px Sans-Serif;
  margin: 0 0 10px 0;
}
h1 a {
  text-decoration: none; 
}
h2 {
  color: #3b7fa7; 
  margin: 0 0 10px 0;
}
h3 {
  color: #7d5cdc;
  margin: 0 0 10px 0;
}
p {
  margin: 0;
}