foundation/stylus/foundation/components/type.styl

You may also want to checkout:

//
// Typography Variables
//
$include-html-type-classes ?= $include-html-classes;

// We use these to control header font styles
$header-font-family ?= "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
$header-font-weight ?= bold;
$header-font-style ?= normal;
$header-font-color ?= #222;
$header-line-height ?= 1.4;
$header-top-margin ?= .2em;
$header-bottom-margin ?= .5em;
$header-text-rendering ?= optimizeLegibility;

// We use these to control header font sizes
$h1-font-size ?= emCalc(44px);
$h2-font-size ?= emCalc(37px);
$h3-font-size ?= emCalc(27px);
$h4-font-size ?= emCalc(23px);
$h5-font-size ?= emCalc(18px);
$h6-font-size ?= 1em;

// These control how subheaders are styled.
$subheader-line-height ?= 1.4;
$subheader-font-color ?= lighten($header-font-color, 30%);
$subheader-font-weight ?=300;
$subheader-top-margin ?= .2em;
$subheader-bottom-margin ?= .5em;

// A general <small> styling
$small-font-size ?= 60%;
$small-font-color ?= lighten($header-font-color, 30%);

// We use these to style paragraphs
$paragraph-font-family ?=inherit;
$paragraph-font-weight ?= normal;
$paragraph-font-size ?= 1em;
$paragraph-line-height ?= 1.6;
$paragraph-margin-bottom ?= emCalc(20px);
$paragraph-aside-font-size ?= emCalc(14px);
$paragraph-aside-line-height ?= 1.35;
$paragraph-aside-font-style ?= italic;
$paragraph-text-rendering ?= optimizeLegibility;

// We use these to style <code> tags
$code-color ?= darken($alert-color, 15%);
$code-font-family ?= Consolas, 'Liberation Mono', Courier, monospace;
$code-font-weight ?= bold;

// We use these to style anchors
$anchor-text-decoration ?= none;
$anchor-font-color ?= $primary-color;
$anchor-font-color-hover ?= darken($primary-color, 5%);

// We use these to style the <hr> element
$hr-border-width ?= 1px;
$hr-border-style ?= solid;
$hr-border-color ?= #ddd;
$hr-margin ?= emCalc(20px);

// We use these to style lists
$list-style-position ?= outside;
$list-side-margin ?= emCalc(20px);
$list-nested-margin ?= emCalc(20px);
$definition-list-header-weight ?= bold;
$definition-list-header-margin-bottom ?= .3em;
$definition-list-margin-bottom ?= emCalc(12px);

// We use these to style blockquotes
$blockquote-font-color ?=lighten($header-font-color, 30%);
$blockquote-padding ?= emCalc(9px) emCalc(20px) 0 emCalc(19px);
$blockquote-border ?=1px solid #ddd;
$blockquote-cite-font-size ?=emCalc(13px);
$blockquote-cite-font-color ?= lighten($header-font-color, 20%);
$blockquote-cite-link-color ?= $blockquote-cite-font-color;

// Acronym styles
$acronym-underline ?=1px dotted #ddd;

// We use these to control padding and margin
$microformat-padding ?=emCalc(10px) emCalc(12px);
$microformat-margin ?=0 0 emCalc(20px) 0;

// We use these to control the border styles
$microformat-border-width ?= 1px;
$microformat-border-style ?= solid;
$microformat-border-color ?= #ddd;

// We use these to control full name font styles
$microformat-fullname-font-weight ?= bold;
$microformat-fullname-font-size ?= emCalc(15px);

// We use this to control the summary font styles
$microformat-summary-font-weight ?=bold;

// We use this to control abbr padding
$microformat-abbr-padding ?= 0 emCalc(1px);

// We use this to control abbr font styles
$microformat-abbr-font-weight ?= bold;
$microformat-abbr-font-decoration ?= none;


//
// Typography Placeholders
//

// These will throw a deprecation warning if used within a media query.
lead() {
  font-size: $paragraph-font-size + emCalc(3.5px);
  line-height: 1.6;
}

subheader() {
  line-height: $subheader-line-height;
  color: $subheader-font-color;
  font-weight: $subheader-font-weight;
  margin-top: $subheader-top-margin;
  margin-bottom: $subheader-bottom-margin;
}

if $include-html-type-classes != false {

  /* Typography resets */
  div,
  dl,
  dt,
  dd,
  ul,
  ol,
  li,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  pre,
  form,
  p,
  blockquote,
  th,
  td {
    margin:0;
    padding:0;
    direction: $text-direction;
  }

  /* Default Link Styles */
  a {
    color: $anchor-font-color;
    text-decoration: $anchor-text-decoration;
    line-height: inherit;

    &:hover,
    &:focus { color: $anchor-font-color-hover; }

    img { border:none; }
  }

  /* Default paragraph styles */
  p {
    font-family: $paragraph-font-family;
    font-weight: $paragraph-font-weight;
    font-size: $paragraph-font-size;
    line-height: $paragraph-line-height;
    margin-bottom: $paragraph-margin-bottom;
    text-rendering: $paragraph-text-rendering;

    &.lead {
      lead();
    }

    & aside {
      font-size: $paragraph-aside-font-size;
      line-height: $paragraph-aside-line-height;
      font-style: $paragraph-aside-font-style;
    }
  }

  /* Default header styles */
  h1, h2, h3, h4, h5, h6 {
    font-family: $header-font-family;
    font-weight: $header-font-weight;
    font-style: $header-font-style;
    color: $header-font-color;
    text-rendering: $header-text-rendering;
    margin-top: $header-top-margin;
    margin-bottom: $header-bottom-margin;
    line-height: $header-line-height - emCalc(3px);

    small {
      font-size: $small-font-size;
      color: $small-font-color;
      line-height: 0;
    }
  }

  h1 { font-size: $h1-font-size - emCalc(10px); }
  h2 { font-size: $h2-font-size - emCalc(10px); }
  h3 { font-size: $h3-font-size - emCalc(5px); }
  h4 { font-size: $h4-font-size - emCalc(5px); }
  h5 { font-size: $h5-font-size; }
  h6 { font-size: $h6-font-size; }

  .subheader {
    subheader();
  }

  hr {
    border: $hr-border-style $hr-border-color;
    border-width: $hr-border-width 0 0;
    clear: both;
    margin: $hr-margin 0 ($hr-margin - emCalc(1px));
    height: 0;
  }

  /* Helpful Typography Defaults */
  em,
  i {
    font-style: italic;
    line-height: inherit;
  }

  strong,
  b {
    font-weight: bold;
    line-height: inherit;
  }

  small {
    font-size: $small-font-size;
    line-height: inherit;
  }

  code {
    font-family: $code-font-family;
    font-weight: $code-font-weight;
    color: $code-color;
  }

  /* Lists */
  ul,
  ol,
  dl {
    font-size: $paragraph-font-size;
    line-height: $paragraph-line-height;
    margin-bottom: $paragraph-margin-bottom;
    list-style-position: $list-style-position;
    font-family: $paragraph-font-family;
  }

  ul, ol {
    margin-{$default-float}: $list-side-margin;
  }

  /* Unordered Lists */
  ul {
    li {
      ul,
      ol {
        margin-{$default-float}: $list-nested-margin;
        margin-bottom: 0;
        font-size: 1em; /* Override nested font-size change */
      }
    }
    &.square,
    &.circle,
    &.disc {
      li ul { list-style: inherit; }
    }

    &.square { list-style-type: square; }
    &.circle { list-style-type: circle; }
    &.disc { list-style-type: disc; }
    &.no-bullet { list-style: none; }
  }

  /* Ordered Lists */
  ol {
    li {
      ul,
      ol {
        margin-{$default-float}: $list-nested-margin;
        margin-bottom: 0;
      }
    }
  }

  /* Definition Lists */
  dl {
    dt {
      margin-bottom: $definition-list-header-margin-bottom;
      font-weight: $definition-list-header-weight;
    }
    dd { margin-bottom: $definition-list-margin-bottom; }
  }

  /* Abbreviations */
  abbr,
  acronym {
    text-transform: uppercase;
    font-size: 90%;
    color: $body-font-color;
    border-bottom: $acronym-underline;
    cursor: $cursor-help-value;
  }
  abbr {
    text-transform: none;
  }

  /* Blockquotes */
  blockquote {
    margin: 0 0 $paragraph-margin-bottom;
    padding: $blockquote-padding;
    border-{$default-float}: $blockquote-border;

    cite {
      display: block;
      font-size: $blockquote-cite-font-size;
      color: $blockquote-cite-font-color;
      &:before {
        content: "\2014 \0020";
      }

      a,
      a:visited {
        color: $blockquote-cite-link-color;
      }
    }
  }
  blockquote,
  blockquote p {
    line-height: $paragraph-line-height;
    color: $blockquote-font-color;
  }

  /* Microformats */
  .vcard {
    display: inline-block;
    margin: $microformat-margin;
    border: $microformat-border-width $microformat-border-style $microformat-border-color;
    padding: $microformat-padding;

    li {
      margin: 0;
      display: block;
    }
    .fn {
      font-weight: $microformat-fullname-font-weight;
      font-size: $microformat-fullname-font-size;
    }
  }

  .vevent {
    .summary { font-weight: $microformat-summary-font-weight; }

    abbr {
      cursor: $cursor-default-value;
      text-decoration: $microformat-abbr-font-decoration;
      font-weight: $microformat-abbr-font-weight;
      border: none;
      padding: $microformat-abbr-padding;
    }
  }


  @media $small {
    h1,h2,h3,h4,h5,h6 { line-height: $header-line-height; }
    h1 { font-size: $h1-font-size; }
    h2 { font-size: $h2-font-size; }
    h3 { font-size: $h3-font-size; }
    h4 { font-size: $h4-font-size; }
  }

  // Only include these styles if you want them.
  if $include-print-styles {
    /*
     * Print styles.
     *
     * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
     * Credit to Paul Irish and HTML5 Boilerplate (html5boilerplate.com)
    */
    .print-only { display: none !important; }
    @media print {
      * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
      }

      a,
      a:visited { text-decoration: underline;}
      a[href]:after { content: " (" attr(href) ")"; }

      abbr[title]:after { content: " (" attr(title) ")"; }

      // Don't show links for images, or javascript/internal links
      .ir a:after,
      a[href^="javascript:"]:after,
      a[href^="#"]:after { content: ""; }

      pre,
      blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
      }

      thead { display: table-header-group; /* h5bp.com/t */ }

      tr,
      img { page-break-inside: avoid; }

      img { max-width: 100% !important; }

      @page { margin: 0.5cm; }

      p,
      h2,
      h3 {
        orphans: 3;
        widows: 3;
      }

      h2,
      h3 { page-break-after: avoid; }

      .hide-on-print { display: none !important; }
      .print-only { display: block !important; }
      .hide-for-print { display: none !important; }
      .show-for-print { display: inherit !important; }
    }
  }

}