Blueprint Typography

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

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

View the Source for this module on Github.

Imports

The following sass files are automatically imported when you import this file:

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

Configurable Variables help

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

Value
"andale mono", "lucida console", monospace

Value
12px

Mixins

View Source: Sass | SCSS 

=blueprint-typography($body-selector: body)
  @if $body-selector == true
    +blueprint-typography-body
    +blueprint-typography-defaults
  @else
    #{$body-selector}
      +blueprint-typography-body
      @if $body-selector != body
        @warn "[DEPRECATED] To specify the selector \"#{$body-selector}\\" to +blueprint-typography, pass true as the first argument and mix it into #{$body-selector}."
        +blueprint-typography-defaults
    @if $body-selector == body
      +blueprint-typography-defaults

@mixin blueprint-typography($body-selector: body) {
  @if $body-selector == true {
    @include blueprint-typography-body;
    @include blueprint-typography-defaults; }
  @else {
    #{$body-selector} {
      @include blueprint-typography-body;
      @if $body-selector != body {
        @warn "[DEPRECATED] To specify the selector \"#{$body-selector}\\" to +blueprint-typography, pass true as the first argument and mix it into #{$body-selector}.";
        @include blueprint-typography-defaults; } }
    @if $body-selector == 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)

Deprecated: You can pass the body selector as the first argument when used as a top-level mixin

+blueprint-typography("body#page-1, body#page-2, body.a-special-page-type")
View Source: Sass | SCSS 

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

@mixin normal-text {
  font-family: $blueprint-font-family;
  color: $font-color; }
View Source: Sass | SCSS 

=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: Sass | SCSS 

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

@mixin header-text {
  font-weight: normal;
  color: $header-color; }
View Source: Sass | SCSS 

=quiet
  color: $quiet-color

@mixin quiet {
  color: $quiet-color; }
View Source: Sass | SCSS 

=loud
  color: $loud-color

@mixin loud {
  color: $loud-color; }
View Source: Sass | SCSS 

=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: Sass | SCSS 

=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
    img.left
      +float-left
      margin: 1.5em 1.5em 1.5em 0
      padding: 0
    img.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
    font-weight: bold
  em
    font-style: italic
  dfn
    font-style: italic
    font-weight: bold
  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: 3.333em
  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
  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;
    img.left {
      @include float-left;
      margin: 1.5em 1.5em 1.5em 0;
      padding: 0; }
    img.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 {
    font-weight: bold; }
  em {
    font-style: italic; }
  dfn {
    font-style: italic;
    font-weight: bold; }
  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: 3.333em; }
  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; }
  tr.even td {
    background: $blueprint-table-stripe-color; }
  tfoot {
    font-style: italic; }
  caption {
    background: $blueprint_background_color; }
  .quiet {
    @include quiet; }
  .loud {
    @include loud; } }