Source on Github

Blueprint Typography

A base typography for your website that follows a typographic rhythm.

This file can be imported using: @import "blueprint/typography"

Imports

  1. Colors
  2. Link Colors – Easy assignment of colors to link states.
  3. Float – Mixins for cross-browser floats.

Configurable Variables help

"Helvetica Neue", Arial, Helvetica, sans-serif

"andale mono", "lucida console", monospace

12px

Mixins

view source 

=blueprint-typography($nested: false)
  @if $nested
    +blueprint-typography-body
    +blueprint-typography-defaults
  @else
    body
      +blueprint-typography-body
    +blueprint-typography-defaults

@mixin blueprint-typography($nested: false) {
  @if $nested {
    @include blueprint-typography-body;
    @include blueprint-typography-defaults;
  }
  @else {
    body {
      @include blueprint-typography-body;
    }
    @include blueprint-typography-defaults;
  }
}

Usage examples: As a top-level mixin, apply to any page that includes the stylesheet:

+blueprint-typography

Scoped by a presentational class:

body.blueprint
 +blueprint-typography(true)

Scoped by semantic selectors:

body#page-1, body#page-2, body.a-special-page-type
  +blueprint-typography(true)
view source 

=normal-text
  font-family: $blueprint-font-family
  color: $font-color

@mixin normal-text {
  font-family: $blueprint-font-family;
  color: $font-color;
}
view source 

=fixed-width-text
  font: 1em $blueprint-fixed-font-family
  line-height: 1.5

@mixin fixed-width-text {
  font: 1em $blueprint-fixed-font-family;
  line-height: 1.5;
}
view source 

=header-text
  font-weight: normal
  color: $header-color

@mixin header-text {
  font-weight: normal;
  color: $header-color;
}
view source 

=quiet
  color: $quiet-color

@mixin quiet {
  color: $quiet-color;
}
view source 

=loud
  color: $loud-color

@mixin loud {
  color: $loud-color;
}
view source 

=blueprint-typography-body($font-size: $blueprint-font-size)
  line-height: 1.5
  +normal-text
  font-size: 100% * $font-size / 16px

@mixin blueprint-typography-body($font-size: $blueprint-font-size) {
  line-height: 1.5;
  @include normal-text;
  font-size: 100% * $font-size / 16px;
}
view source 

=blueprint-typography-defaults
  #{headers(all)}
    +header-text
    img
      margin: 0
  h1
    font-size: 3em
    line-height: 1
    margin-bottom: 0.50em
  h2
    font-size: 2em
    margin-bottom: 0.75em
  h3
    font-size: 1.5em
    line-height: 1
    margin-bottom: 1.00em
  h4
    font-size: 1.2em
    line-height: 1.25
    margin-bottom: 1.25em
  h5
    font-size: 1em
    font-weight: bold
    margin-bottom: 1.50em
  h6
    font-size: 1em
    font-weight: bold
  p
    margin: 0 0 1.5em
    .left
      +float-left
      margin: 1.5em 1.5em 1.5em 0
      padding: 0
    .right
      +float-right
      margin: 1.5em 0 1.5em 1.5em
      padding: 0
  a
    text-decoration: underline
    +link-colors($link-color, $link-hover-color, $link-active-color, $link-visited-color, $link-focus-color)
  blockquote
    margin: 1.5em
    color: $alt-text-color
    font-style: italic
  strong, dfn
    font-weight: bold
  em, dfn
    font-style: italic
  sup, sub
    line-height: 0
  abbr, acronym
    border-bottom: 1px dotted #666666
  address
    margin: 0 0 1.5em
    font-style: italic
  del
    color: $alt-text-color
  pre
    margin: 1.5em 0
    white-space: pre
  pre, code, tt
    +fixed-width-text
  li ul, li ol
    margin: 0
  ul, ol
    margin: 0 1.5em 1.5em 0
    padding-left: 1.5em
  ul
    list-style-type: disc
  ol
    list-style-type: decimal
  dl
    margin: 0 0 1.5em 0
    dt
      font-weight: bold
  dd
    margin-left: 1.5em
  table
    margin-bottom: 1.4em
    width: 100%
  th
    font-weight: bold
  thead th
    background: $blueprint-table-header-color
  th, td, caption
    padding: 4px 10px 4px 5px
  table.striped tr:nth-child(even) td,
  table tr.even td
    background: $blueprint-table-stripe-color
  tfoot
    font-style: italic
  caption
    background: $blueprint-background-color
  .quiet
    +quiet
  .loud
    +loud

@mixin blueprint-typography-defaults {
  #{headers(all)} {
    @include header-text;
    img {
      margin: 0;
    }
  }
  h1 {
    font-size: 3em;
    line-height: 1;
    margin-bottom: 0.50em;
  }
  h2 {
    font-size: 2em;
    margin-bottom: 0.75em;
  }
  h3 {
    font-size: 1.5em;
    line-height: 1;
    margin-bottom: 1.00em;
  }
  h4 {
    font-size: 1.2em;
    line-height: 1.25;
    margin-bottom: 1.25em;
  }
  h5 {
    font-size: 1em;
    font-weight: bold;
    margin-bottom: 1.50em;
  }
  h6 {
    font-size: 1em;
    font-weight: bold;
  }
  p {
    margin: 0 0 1.5em;
    .left {
      @include float-left;
      margin: 1.5em 1.5em 1.5em 0;
      padding: 0;
    }
    .right {
      @include float-right;
      margin: 1.5em 0 1.5em 1.5em;
      padding: 0;
    }
  }
  a {
    text-decoration: underline;
    @include link-colors($link-color, $link-hover-color, $link-active-color, $link-visited-color, $link-focus-color);
  }
  blockquote {
    margin: 1.5em;
    color: $alt-text-color;
    font-style: italic;
  }
  strong, dfn {
    font-weight: bold;
  }
  em, dfn {
    font-style: italic;
  }
  sup, sub {
    line-height: 0;
  }
  abbr, acronym {
    border-bottom: 1px dotted #666666;
  }
  address {
    margin: 0 0 1.5em;
    font-style: italic;
  }
  del {
    color: $alt-text-color;
  }
  pre {
    margin: 1.5em 0;
    white-space: pre;
  }
  pre, code, tt {
    @include fixed-width-text;
  }
  li ul, li ol {
    margin: 0;
  }
  ul, ol {
    margin: 0 1.5em 1.5em 0;
    padding-left: 1.5em;
  }
  ul {
    list-style-type: disc;
  }
  ol {
    list-style-type: decimal;
  }
  dl {
    margin: 0 0 1.5em 0;
    dt {
      font-weight: bold;
    }
  }
  dd {
    margin-left: 1.5em;
  }
  table {
    margin-bottom: 1.4em;
    width: 100%;
  }
  th {
    font-weight: bold;
  }
  thead th {
    background: $blueprint-table-header-color;
  }
  th, td, caption {
    padding: 4px 10px 4px 5px;
  }
  table.striped tr:nth-child(even) td,
  table tr.even td {
    background: $blueprint-table-stripe-color;
  }
  tfoot {
    font-style: italic;
  }
  caption {
    background: $blueprint-background-color;
  }
  .quiet {
    @include quiet;
  }
  .loud {
    @include loud;
  }
}