A Pen by Melanie Sumner.

index.html

<script type="text/javascript" src="//use.typekit.net/rwr4msa.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3">
      <p class="page-header source-sans source-sans-bold caps space-medium">Font Choices</p>
      <ul class="nav nav-pills nav-stacked proxima caps space-little">
        <li><a href="#mont">Montserrat</a></li>
        <li><a href="#museo">The Museos</a></li>
        <li><a href="#source-sans">Sans Source Pro</a></li>
      </ul>
      
    </div>
    <div class="col-sm-9">
      <div>
        <a name="mont" id="mont"></a>
  <h1 class="page-header mont">Montserrat</h1>
 <nav class="navbar navbar-default">
   <ul class="nav navbar-nav mont caps space-little">
     <li><a href="#">Home</a></li>
     <li><a href="#">Nav item</a></li>
     <li><a href="#">Nav Item</a></li>
   </ul>
  </nav>
  <div class="panel panel-info">
    <div class="panel-heading">
      <h3 class="panel-title mont mont-bold">
        Panel Title</h3>
    </div>
    <div class="panel-body mont mont-normal">
      <p>Some panel text that demonstrates how a paragraph would render using a specific font. In this demo, the fonts are added to elements as their own class; weights are also their own class.</p>
    </div>
  </div>
  <h2 class="mont">Hello! I'm an h2.</h2>
  <p class="mont mont-normal">For this font, I would use it all on its own! This font is definitely strong enough to hold its own and I like the way the all-caps look for things like menu items or h3 elements. It benefits from being open source (free) and has a great readability score across all devices. It also comes in with a decent web-font weight, which is an important consideration. </p>
</div>
      <hr/>
    <div>
      <a name="museo" id="museo"></a>
      <h1 class="page-header museo-serif museo-serif-bold">The Museos</h1>
 <nav class="navbar navbar-default">
   <ul class="nav navbar-nav museo caps space-little">
     <li><a href="#">Home</a></li>
     <li><a href="#">Nav item</a></li>
     <li><a href="#">Nav Item</a></li>
   </ul>
  </nav>
  <div class="panel panel-info">
    <div class="panel-heading">
      <h3 class="panel-title museo museo-bold">
        Panel Title | |<span class="panel-title museo-serif museo-bold">
        Panel Title</span></h3>
    </div>
    <div class="panel-body museo">
      <p>Some panel text that demonstrates how a paragraph would render using a specific font. In this demo, the fonts are added to elements as their own class; weights are also their own class.</p>
    </div>
  </div>
  <h2 class="museo-serif museo-serif-bold">Hello! I'm an h2.</h2>
  <p class="museo">
    I like this pairing- the same family (Museo), but pairing up the slab serif font along with the sans-serif font. The slab-serifs are great for title elements, and the sans-serif has an easy readability. I get this pairing from Typekit, though, and the font weight seems a little heavier than I'd like. I wouldn't use this pairing unless they were going to be the only two fonts on my site. This is a good pairing for clean designs that are otherwise flat- the slab serif lends something interesting to what might be an otherwise boring design. I think the slab-serif might also look interesting if given an embossed look...
  </p>
    </div>
      <hr/>
    <div>
      <a name="source-sans" id="source-sans"></a>
      <h1 class="page-header source-sans source-sans-bold">Source Sans Pro</h1>
 <nav class="navbar navbar-default">
   <ul class="nav navbar-nav proxima caps space-little">
     <li><a href="#">Home</a></li>
     <li><a href="#">Nav item</a></li>
     <li><a href="#">Nav Item</a></li>
   </ul>
  </nav>
  <div class="panel panel-info">
    <div class="panel-heading">
      <h3 class="panel-title proxima space-medium">
        Panel Title</h3>
    </div>
    <div class="panel-body source-sans">
      <p>Some panel text that demonstrates how a paragraph would render using a specific font. In this demo, the fonts are added to elements as their own class; weights are also their own class.</p>
    </div>
  </div>
  <h2 class="source-sans source-sans-bold">Hello! I'm an h2.</h2>
  <p class="source-sans">This is my go-to default font these days. It's easy to read, enjoyable to look at, and you can download it to your computer and use it just as easily for things like...oh, making Microsoft Outlook more bearable. It's a fantastic sans-serif humanist font, and one that I will be enjoying for many more years to come! I don't like it for small title elements or all-caps though; I think it looks too narrow. So here I've paired it up with the all famous Proxima Nova (or try Open Sans if you're looking for a free imposter!) for all-caps/h3 type elements.</p>
    </div>
    
  </div>
</div>
  <div class="container">
    <footer>
    <p class="text-center museo">Footer because I have to end things. I'm ocd like that.
    </p>
    </footer>
  </div>

Just-some-Fonts.markdown

Just some Fonts

Just some fonts/font-pairings I enjoy.

A Pen by Melanie Sumner on CodePen.

License.

style.css

@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,400italic,700italic);

body {
  font-size: 16px;
}
.mont {
  font-family: 'Montserrat', sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke: 0.5px;
}
.mont-bold {
  font-weight: 700/bold;
}
.mont-normal {
  font-weight: 400/normal;
}
.caps {
  text-transform: uppercase;
}
.space-little {
  letter-spacing: 0.1em;
}
.space-medium {
  letter-spacing: 0.25em;
}
h1,.h1, h2, .h2 {
  -webkit-text-rendering: optimizeLegibility;
}
h3, .h3 {
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.museo-serif {
  font-family: "museo-slab",serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke: 0.5px;
  font-weight: 500;
  font-style: normal;
}
.museo-serif-bold {
  font-weight: 700;
}
.museo {
    font-family: "museo-sans",sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke: 0.5px;
  font-weight: 300;
  font-style: normal;
}
.museo-bold { 
  font-weight: 500;
}
.source-sans {
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 400;
  font-style: normal;
}
.source-sans-bold {
  font-weight: 700;
}
.proxima {
  font-family: "proxima-nova", 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: 700;
}
footer {
  padding-top: 1em;
  border-top: 1px dotted #56A0d3;
}