Default typographic styles I use for any blog article.

blog-article-styles-boilerplate.scss

body
{
  color:$body-text-color;
  line-height: 1.4em;
  font-size: 1em;
  
  article
  {
    /* text and media */
    p,
    ol,
    ul,
    blockquote,
    pre,
    form,
    fieldset,
    figure,
    .row
    {
      position: relative;
      margin: .875em 0 0 0;
    }
    
    p,
    ol,
    ul,
    blockquote,
    form,
    figure,
    .row
    {
      @extend %clearfix;
    }
    
    p.intro
    {
      color: $gray-regular;
      font-size: 1.25em;
    }
    
    p.small
    {
      line-height: 1.25em;
      font-size: .75em;
    }
    
    h1
    {
      margin: 1em 0 -.25em 0;
      
      @include bp-desktop
      {
        font-size: 2.25em;
      }
    
      @include bp-mobile
      {
        font-size: 2em;
      }
    }
    
    h2
    {
      margin: 1.25em 0 -.25em 0;
      
      @include bp-desktop
      {
        font-size: 1.75em;
      }
      
      @include bp-mobile
      {
        font-size: 1.5em;
      }
    }
    
    h3
    {
      margin: 1.5em 0 -.25em 0;
      
      @include bp-desktop
      {
        font-size: 1.5em;
      }
      
      @include bp-mobile
      {
        font-size: 1.25em;
      }
    }
    
    h4,
    h5,
    h6
    {
      margin: 1.625em 0 -.25em 0;
      
      @include bp-desktop
      {
        font-size: 1.25em;
      }
      
      @include bp-mobile
      {
        font-size: 1.125em;
      }
    }
    
    h1,
    h2,
    h3,
    h4,
    h5,
    h6
    {
      color: $heading-color;
      letter-spacing: -1px;
      line-height: 1.125em;
      font-family: $heading-font;
      
      @include ligatures;
    }
    
    h1 + h2, 
    h1 + h3, 
    h1 + h4, 
    h1 + h5, 
    h1 + h6,
    h3 + h4, 
    h3 + h5, 
    h3 + h6
    {
      margin-top: .5em;
    }
    
    h2 + h3, 
    h2 + h4, 
    h2 + h5, 
    h2 + h6
    {
      margin-top: .375em;
    }
    
    h1 + p.intro,
    h2 + p.intro,
    h3 + p.intro,
    h4 + p.intro
    {
      margin: .75em 0 0 0;
    }
    
    ol,ul
    {
      padding: 0;
      
      &:not([class])
      {
          padding: 0 0 0 1.25em;
      }
    }
    
    ul
    {
     list-style: circle;
    }
    
    blockquote,pre
    {
      padding: 1em 1.75em;
      border: 1px solid $gray-lighter;
      border-left: 3px solid $valid-green;
      border-radius: $border-radius;
    }
    
    blockquote
    {
      overflow: hidden;
      background-color: white;
    }
    
    pre
    {
      display: block;
      font-size: .8125em;
      background-color: $highlight-blue;
      @include horizontal-scroll;
    }
    
    code
    {
      display: inline-block;
      max-width: 100%;
      overflow: auto;
      padding: 0 .125em;
      vertical-align: middle;
      white-space: nowrap;
      font-size: .8125em;
      border: $input-border;
      border-radius: $border-radius;
      background: $highlight-blue;
    }
    
    img
    {
      max-width: 100%;
      height: auto !important;
    }
    
    .video-container
    {
      position: relative;
      padding-bottom: 56.25%;
      padding-top: 30px;
      height: 0;
      overflow: hidden;
      iframe,object,embed
      {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    }
    
    :first-child
    {
      margin-top:0;
    }
  }
}