Blog/stylesheets/library/_typography.sass

!base_font_size ||= 14px
!base_font_size_small ||= 12px
!base_font_color ||= #333
!h6 = ceil(!base_font_size*1.3)
!h5 = ceil(!base_font_size*1.4)
!h4 = ceil(!base_font_size*1.7)
!h3 = ceil(!base_font_size*1.9)
!h2 = ceil(!base_font_size*2.2)
!h1 = ceil(!base_font_size*2.5)

=heading-font 
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
=sans-font
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Helvetica, Arial, Verdana, sans-serif
=serif-font
  font-family: Times, "Times New Roman" Georgia, serif
=fixed-font
  font-family: "Menlo", "Bitstream Vera Sans", Monaco, "Andale Mono", "Lucida Console", monospace

=general-typography(!font_size = !base_font_size)
  +set-heading-sizes(!font_size)
  +typography-defaults(!font_size)

=set-heading-sizes(!font_size = !base_font_size)
  !h6 = ceil(!font_size*1.3)
  !h5 = ceil(!font_size*1.4)
  !h4 = ceil(!font_size*1.7)
  !h3 = ceil(!font_size*1.9)
  !h2 = ceil(!font_size*2.2)
  !h1 = ceil(!font_size*2.5)
  h1, h2, h3, h4
    &:first-child
      margin-top: 0
  h1
    font-size= !h1
    margin-bottom= !font_size * .765
    line-height= !h1 * 1.625
  h2
    font-size= !h2
    margin-bottom= !font_size * .855
    line-height= !h2 * 1.625
  h3
    font-size= !h3
    margin-bottom= !font_size * .956
    line-height= !h3 * 1.625
  h4
    font-size= !h4
    margin-bottom= !font_size * 1.161
    line-height= !h4 * 1.625
  h5
    font-size= !h5
    margin-bottom= !font_size * 1.238
    line-height= !h5 * 1.625
  h6
    font-size= !h6
    margin-bottom= !font_size * 1.625
    line-height= !h6 * 1.625

=typography-defaults(!font_size = !base_font_size)
  body
    line-height= ceil(!font_size * 1.625)
    color= !base_font_color
  p
    +p-style(!font_size)
  table
    +table-style(!font_size)
  ol
    +ol-style(!font_size)
  ul
    +ul-style(!font_size)
  dl
    +dl-style(!font_size)
  blockquote
    +quote-style
  q
    font-style: italic
    &:before
      content: "\201C"
    &:after
      content: "\201D"
  em, dfn
    font-style: italic
  strong, dfn
    font-weight: bold
  del
    text-decoration: line-through
  span.highlight, em.highlight, strong.highlight
    background-color: #ff6
    padding: 2px
    margin: 0 -2px
  abbr, acronym
    border-bottom: 1px dotted
    cursor: help
  address
    margin-top= !font_size * 1.625
    font-style: italic
  pre, code
    margin= !font_size * 1.625 0
    white-space: pre
  pre, code, tt
    +fixed-font
    line-height= !font_size * 1.5
  tt
    display: block
    margin= !font_size * 1.625 0
  sub, sup
    line-height: 0
  hr
    margin-bottom= !font_size * 1.625
  
  small
    font-size= floor(!font_size * .85)
  big
    font-size= floor(!font_size * 1.25)

=ol-style(!font_size = !base_font_size)
  list-style: outside
  margin= 0 0 !font_size * 1.625
  li
    list-style: decimal
    ol
      margin= 0 0 !font_size * 1.625
      
=ul-style(!font_size = !base_font_size)
  list-style: outside
  margin= 0 0 !font_size * 1.625
  li ul
    margin= 0 0 !font_size * 1.625
    
=dl-style(!font_size = !base_font_size)
  margin= 0 0 !font_size * 1.625
  dt
    font-weight: bold
  dd
    margin-left= !font_size * 1.625

=quote-style(!font_size = !base_font_size)
  padding= !font_size !font_size !font_size * 1.625 !font_size * 1.4
  &:before
    content: "\201C"
    font-size= !font_size * 3
    margin= 0 0 0 -.625em
    position: absolute
    font-family: Times, Georgia, serif
    color: #aaa
    line-height: 0
  > p
    padding: 0
    margin: 0
    
=p-style(!font_size = !base_font_size)
  padding-bottom= !font_size * 0.8125
  img
    float: left
    margin:
      top= !font_size * .5
      right= !font_size * .8125
      bottom= !font_size* .8125
      left= 0
    padding: 0
    &.right
      margin:
        right= 0
        left= !font_size * .8125

=table-style(!font_size = !base_font_size)
  margin= 0 0 !font_size * 1.625
  border-collapse: collapse
  th
    font-weight: bold
  tr, th, td
    margin: 0
    padding= 0 !font_size * 1.625 0 !font_size
  tfoot
    font-style: italic
  caption
    text-align: center