Vertical Rythm and Typography

typography.scss

@function calculateRem($size) {

  $remSize: $size / 16px;
  @return $remSize * 1rem;
}


@mixin font-size($size) {
  font-size: $size; /* ie8 fallback */
  font-size: calculateRem($size);
}

//Typography variables
$default-font-family: 'font-family-name';

//From http://www.gridlover.net/app/ Font Size 17px, Line height1.25, Scale Factor 1.333 (3:4 -perfectfourth)
$base-font-size: 12px;
$base-line-height: 18px;
$measure: 760px;

$body-2-font-size:12px;
$body-2-line-height:18px;

$h1-font-size: 36px;
$h1-line: 20px;
$h1-lines: 1.5;
$h1-line-height: $h1-font-size * $h1-lines;
$h1-margin-top: 2 * $h1-line;
$h1-margin-bottom: 1 * $h1-line;

$h2-font-size: 24px;
$h2-line: 16px;
$h2-lines: 1.5;
$h2-line-height: $h2-font-size * $h2-lines;
$h2-margin-top: 2 * $h2-line;
$h2-margin-bottom: 1 * $h2-line;

$h3-font-size: 16px;
$h3-line: 14px;
$h3-lines: 1.5;
$h3-line-height: $h3-font-size * $h3-lines;
$h3-margin-top: 1 * $h3-line;
$h3-margin-bottom: 1 * $h3-line;

$h4-font-size: 14px;
$h4-line: 12px;
$h4-lines: 1.5;
$h4-line-height: $h4-font-size * $h4-lines;
$h4-margin-top: 1 * $h4-line;
$h4-margin-bottom: 1 * $h4-line;

//From http://www.gridlover.net/

body {
  font-size: calculateRem($base-font-size);
  line-height: calculateRem($base-line-height);
  //  max-width: $measure*2;
  margin: 0 auto;
}

%body-2{
  font-size: calculateRem($body-2-font-size);
  line-height: calculateRem($body-2-line-height);
}
#wrapper{
  max-width: $measure; //Comment out after finishing mobile and tablet design
}
h1, %h1 {
  font-size: calculateRem($h1-font-size);
  line-height: calculateRem($h1-line-height);
  @at-root %h1--margin{
    margin-top: calculateRem($h1-margin-top);
    margin-bottom: calculateRem($h1-margin-bottom);
  }

}
h2, %h2 {
  font-size: calculateRem($h2-font-size);
  line-height: calculateRem($h2-line-height);
  @at-root %h2--margin{
    margin-top: calculateRem($h2-margin-top);
    margin-bottom: calculateRem($h2-margin-bottom);
  }
}
h3, %h3 {
  font-size: calculateRem($h3-font-size);
  line-height: calculateRem($h3-line-height);
  @at-root %h3--margin{
    margin-top: calculateRem($h3-margin-top);
    margin-bottom: calculateRem($h3-margin-bottom);
  }

}
h4, %h4 {
  font-size: calculateRem($h4-font-size);
  line-height: calculateRem($h4-line-height);
  @at-root %h4--margin{
    margin-top: calculateRem($h4-margin-top);
    margin-bottom: calculateRem($h4-margin-top);
  }
}

ul, ol,dl{
  margin-top: 0;
  margin-bottom: 0;
  padding-left:0;
}
p, pre, table, blockquote {
  margin-top: calculateRem(16px);
  margin-bottom: calculateRem(16px);
}
ul{
  list-style: none;
  padding-left:0;
}
/* Sanitation */
hr {
  border: 1px solid;
  margin: -1px 0;
}
ul ul, ol ol, ul ol, ol ul {
  margin-top: 0;
  margin-bottom: 0;
}
dd{
  margin-left:0;
}
b, strong, em, small, code {
  line-height: 1;
}
sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
}
sub {
  top: 0.4em;
}

body{
  // color:ColorName;
  background: #fff;
}