Typography from Terra project

typography.less

// This is a bit over-complicated, in my opinion, but there are some neat ideas. 
// Comes from the Terra project (now open sourced) my team at Cerner created.

// Typography
// --------------------------------------------------

// Unitless values are used since all font sizes
// should be converted to rem units with a pixel
// fallback via the .rem() mixin.
@print-font-size: 10; // Desired body font size, when printing, in pts.

@_root-font-size:  16; // Constant value used for calculations, do not change
@_typographic-scale-font-size:  14; // Constant value used for generating typographic scale, do not change
@_typographic-scale-multiplier: (@base-font-size / @_typographic-scale-font-size); // Constant value used for generating typographic scale, do not change
@_html-font-size: percentage(@base-font-size / @_root-font-size); // Percentage value set on HTML element, allows Terra to inherit user defined font-size
@_base-line-height: 20 * @_typographic-scale-multiplier;

@sm-text:    12 * @_typographic-scale-multiplier;
@body-text:  @base-font-size;
@super-text: 48 * @_typographic-scale-multiplier;

@xs-heading: 16 * @_typographic-scale-multiplier;
@sm-heading: 18 * @_typographic-scale-multiplier;
@md-heading: 20 * @_typographic-scale-multiplier;
@lg-heading: 24 * @_typographic-scale-multiplier;
@xl-heading: 30 * @_typographic-scale-multiplier;


// TYPOGRAPHY
// --------------------------------------------------
// 1. Text Style Helpers
// 2. Text Size Helpers
// 3. Heading Elements
// 4. Text Elements

// Text Style Helpers
// - Alignment
// - Weight
// - Miscellaneous
// --------------------------------------------------

// Note: Some elements may have margin set by .reset-normalize in core.less

// Text alignment
.text-left {
  .text-align-start();
}

.text-right {
  .text-align-end();
}

.text-center {
  text-align: center;
}

// Text weight
b,
strong,
.text-bold {
  font-weight: @bold-font-weight;
}

.text-normal {
  font-weight: @normal-font-weight;
}

.text-light {
  font-weight: @light-font-weight;
}

// Miscellaneous text style helpers

// Word breaks may be inserted between any character
// causing long strings to wrap instead of overflow.
.text-breakable {
  .word-wrap(break-word);
}

// Meta-level content sets font-size/opacity relative to parent.
.meta {
  opacity: 0.6;
  font-size: 85%;
}

// Text Sizing Helpers
// - Individual font-size and line-height helpers,
//   along with a text helper that combines both.
// - Helpers are grouped in descending order by size.
// --------------------------------------------------

// Super large display text
.super-text-size {
  .rem(font-size; @xl-heading); //30
  @media @sm-mq {
    .rem(font-size; @super-text); //48
  }
}

.super-text-line-height {
  .rem(line-height; (@_base-line-height * 3));
}

.text-super {
  .text-light();
  .super-text-size();
  .super-text-line-height();
}

// Extra-large level 1 headings
.x-large-heading-size {
  .rem(font-size; @lg-heading); //24
  @media @sm-mq {
    .rem(font-size; @xl-heading); //30
  }
}

.x-large-heading-line-height {
  .rem(line-height; (@_base-line-height * 2.5))
}

.x-large-heading {
  .x-large-heading-size();
  .x-large-heading-line-height();
}

// Large level 2 headings
.large-heading-size {
  .rem(font-size; @md-heading); //20
  @media @sm-mq {
    .rem(font-size; @lg-heading); //24
  }
}

.large-heading-line-height {
  .rem(line-height; (@_base-line-height * 1.5))
}

.large-heading {
  .large-heading-size();
  .large-heading-line-height();
}

// Medium level 3 headings
.medium-heading-size {
  .rem(font-size; @sm-heading); //18
  @media @sm-mq {
    .rem(font-size; @md-heading); //20
  }
}

.medium-heading-line-height {
  .rem(line-height; @_base-line-height)
}

.medium-heading {
  .medium-heading-size();
  .medium-heading-line-height();
}

// Small level 4 headings
.small-heading-size {
  .rem(font-size; @xs-heading); //16
  @media @sm-mq {
    .rem(font-size; @sm-heading); //18
  }
}

.small-heading-line-height {
  .rem(line-height; @_base-line-height)
}

.small-heading {
  .small-heading-size();
  .small-heading-line-height();
}

// Extra-small level 5 headings
.x-small-heading-size {
  .rem(font-size; @xs-heading); //16
}

.x-small-heading-line-height {
  .rem(line-height; @_base-line-height)
}

.x-small-heading {
  .x-small-heading-size();
  .x-small-heading-line-height();
}

// Baseline body text
.body-text-size {
  .rem(font-size; @xs-heading); //16
  @media @sm-mq {
    .rem(font-size; @body-text); //14
  }
}

.body-text-line-height {
  .rem(line-height; @_base-line-height);
}

.text-body {
  .body-text-size();
  .body-text-line-height();
}

// Fine-print text
.small-text-size {
  .rem(font-size; @body-text); //14
  @media @sm-mq {
    .rem(font-size; @sm-text); //12
  }
}

.small-text-line-height {
  .rem(line-height; (@_base-line-height * 0.75));
}

.text-small {
  .small-text-size();
  .small-text-line-height();
}

// Heading Elements
// --------------------------------------------------
h1 {
  .x-large-heading();
  font-family: @header-font-family;
  font-weight: @normal-font-weight;
}

h2 {
  .large-heading();
  font-family: @header-font-family;
  font-weight: @normal-font-weight;
}

h3 {
  .medium-heading();
  font-family: @header-font-family;
  font-weight: @normal-font-weight;
}

h4 {
  .small-heading();
  font-family: @header-font-family;
  font-weight: @normal-font-weight;
}

// Reset small for major headers.
h1, h2, h3, h4 {
  small {
    .text-normal();
    color: @medium-bg-10;
    line-height: 1;
  }
}

h5 {
  .x-small-heading();
  font-family: @header-font-family;
  font-weight: @normal-font-weight;
}

h6 {
  .text-body();
  font-family: @header-font-family;
  font-weight: @normal-font-weight;
}

// Text Elements
// --------------------------------------------------


// Address styling not present in IE 9/10/11, Safari, and Chrome.
abbr[title],
abbr[data-original-title] {
  .border-bottom(@style: dotted);
  cursor: help;
}

// Prevent certain browsers from italicizing addresses.
address {
  display: block;
  font-style: normal;
}

cite {
  font-style: normal;
}

// Address odd `em`-unit font size rendering in all browsers.
code,
kbd,
samp {
  font-family: @mono-font-family;
  font-size: 1em;
}

code {
  .rem(padding; 2, 4);
  background: @accent-bg-40;
  color: @medium-fg-40;

  // because of the perceived largeness of monospaced font,
  // we can't use small-text(), so we'll set manually.
  font-size: 80%;
}

em {
  font-style: italic;
}

// Address styling not present in Safari and Chrome.
dfn {
  font-style: italic;
}

// Address differences between Firefox and other browsers.
hr {
  .border(@width: 0);
  .border-top();
  .margin-top-bottom();
  height: 0;
}

// Font-family set to allow pre to inherit parent container font
// Overflow set to contain overflow in all browsers.
pre {
  .pre-wrap();
  font-family: inherit;
  overflow: auto;

  // Reset terra code element styles
  code {
    .pre-wrap();
    display: block;
  }
}

// Address inconsistent and variable font size in all browsers.
small {
  font-size: 85%;
}

// Prevent `sub` and `sup` affecting `line-height` in all browsers.
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}