type.less

// Typography.less
// Headings, body text, lists, code, and more for a versatile and durable typography system
// ----------------------------------------------------------------------------------------


// BODY TEXT
// ---------

p {
  margin-bottom: @baseLineHeight / 2;
  font-family: @baseFontFamily;
  font-size: @baseFontSize;
  line-height: @baseLineHeight;
  small {
    font-size: @baseFontSize - 2;
    color: @grayLight;
  }
}


// HEADINGS
// --------

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  color: @grayDark;
  text-rendering: optimizelegibility; // Fix the character spacing for headings
  small {
    color: @grayLight;
  }
}
h1 {
  font-size: 30px;
  line-height: @baseLineHeight * 2;
  small {
    font-size: 18px;
  }
}
h2 {
  font-size: 24px;
  line-height: @baseLineHeight * 2;
  small {
    font-size: 18px;
  }
}
h3 {
  line-height: @baseLineHeight * 1.5;
  font-size: 18px;
  small {
    font-size: 14px;
  }
}
h4, h5, h6 {
  line-height: @baseLineHeight;
}
h4 {
  font-size: 14px;
  small {
    font-size: 12px;
  }
}
h5 {
  font-size: 12px;
}
h6 {
  font-size: 11px;
  color: @grayLight;
  text-transform: uppercase;
}