LESS functions for enabling beautiful typography in Web pages

typography.less

/////////////////////////////////////////////////////////////
//
//   LESS functions for enabling beautiful typography
//   in Web pages.  Written by Peter O., 2013-2015.
//
//   Any copyright is dedicated to the Public Domain.
//   http://creativecommons.org/publicdomain/zero/1.0/
//
//   If you like this, you should donate to Peter O.
//   at: http://upokecenter.dreamhosters.com/articles/donate-now-2/
//
//   In most cases, use the functions ".monospacedtypography()"
//   and ".traditionaltypography()", defined below.  But there
//   are also other useful functions given here.
//
/////////////////////////////////////////////////////////////

@monospaced_font: "Source Code Pro", "Menlo", "Consolas",  "Inconsolata", "Liberation Mono", "Lucida Console",
       "DejaVu Sans Mono", "Droid Mono",
       "FreeMono", "Courier New", "Courier", monospace;
@serif_font: "Merriweather","Sitka Text", "PT Serif",
      "Charis SIL Compact", "Charis SIL",
      "Cambria",
      "Palatino Linotype",
      "Droid Serif",
      "Liberation Serif", "Georgia", "Book Antiqua", "FreeSerif", "Times New Roman", serif;
@sans_serif_font: "Fira Sans", "Source Sans Pro", "Helvetica Neue",
       "Open Sans", "FreeSans", "Clear Sans", "Calibri", "Liberation Sans",
       "Segoe UI",  "Roboto", "Meiryo UI", Verdana, "Droid Sans", "DejaVu Sans",
       "Lucida Grande", "Lucida Sans Unicode", "Arial Unicode MS", Arial, sans-serif;

.fontFeatureSettings3(@v1, @v2, @v3){
  font-feature-settings: @v1, @v2, @v3 !important;
  -moz-font-feature-settings: @v1, @v2, @v3  !important;
  -webkit-font-feature-settings: @v1, @v2, @v3  !important;
  -ms-font-feature-settings: @v1, @v2, @v3 !important;
}
.fontFeatureSettings1(@v1){
  font-feature-settings: @v1 !important;
  -moz-font-feature-settings: @v1 !important;
  -webkit-font-feature-settings: @v1 !important;
  -ms-font-feature-settings: @v1 !important;
}

.fontFeatureSettings4(@v1, @v2, @v3, @v4){
  font-feature-settings: @v1, @v2, @v3, @v4 !important;
  -moz-font-feature-settings: @v1, @v2, @v3, @v4  !important;
  -webkit-font-feature-settings: @v1, @v2, @v3, @v4  !important;
  -ms-font-feature-settings: @v1, @v2, @v3, @v4 !important;
}

// Enables small caps
.smallcaps() {
  font-variant: small-caps;
}

.typographybase(){
  text-rendering: optimizeLegibility;
  -webkit-text-rendering: optimizeLegibility;
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
}

.hyphens(){
  // Enable hyphenation where supported
  word-wrap: break-word;
  hyphens: auto;
 -moz-hyphens: auto;
 -webkit-hyphens: auto;
 -ms-hyphens: auto;
}

.nohyphens(){
  word-wrap: normal;
  hyphens: none;
 -moz-hyphens: none;
 -webkit-hyphens: none;
 -ms-hyphens: none;
}

.typography(){
  .typographybase();
  .hyphens();
  .fontFeatureSettings4("onum" 1, "pnum" 1,"liga" 1, "kern" 1);
}

.typographytabfigures() {
  .typographybase();
  .hyphens();
  .fontFeatureSettings4("onum" 0, "pnum" 0,"liga" 1, "kern" 1);
}

.fractions() {
 .fontFeatureSettings1("frac" 1);
}

// Disables small caps
.nosmallcaps() {
  font-variant: normal !important;
  .fontFeatureSettings4("liga" 1, "kern" 1, "smcp" 0,"c2sc" 0);
}

.monospaced(){
  font-family: @monospaced_font;
}
.sansserif(){
  font-family: @sans_serif_font;
}
.serif(){
  font-family: @serif_font;
}

.boldweight(){
 font-weight: 700;
 b, strong, th {
  font-weight: 900;
 }
 dfn {
  font-weight: 700;
 }
}
.lightweight(){
 font-weight: 200;
 b, strong, th {
  font-weight: 600;
  b.strong, th { font-weight: 800; }
 }
 dfn {
  font-weight: 200;
 }
}
.regularweight(){
 font-weight: 400;
 b, strong, th {
  .boldweight();
 }
 dfn {
  font-weight: 400;
 }
}
.italic(){
 font-style: italic;
 cite, i, em, dfn {
  font-style: normal;
  cite, i, em, dfn { font-style: italic; }
 }
}
.roman(){
 font-style: normal;
 cite, i, em, dfn {
  font-style: italic;
  cite, i, em, dfn { font-style: normal; }
 }
}

//
//  Traditional font features for Web pages.
//  Uses serif for body text, sans-serif for tables, headers,
//  and other display text, and monospaced for code elements
//  and some input elements.
//
//  Example:
//  .traditionaltypography(); // Use outside of any CSS rule
//
.traditionaltypography(){
  body {
   .serif();
   .typography();
   .regularweight();
  }
  cite, i, em, dfn { .italic(); }
  h1, h2, h3, h4, h5, h6 { .boldweight(); }
  input[type="text"], input[type="password"], input[type="email"], input[type="number"], textarea,
  pre, textarea, tt, code, samp, var, kbd {
   .monospaced();
   * { .monospaced(); }
   .typographybase();
  }
  pre {
   .nohyphens();
  }
  span.fraction {
    .fractions();
  }
  input, legend, option, button, select, h1, h2, h3, h4, h5, h6, figcaption, caption, aside, th, td {
   .sansserif();
   div, p, li, dt, dd, a, small, big {
    .sansserif();
   }
   .typography();
  }
  th, td {
   .typographytabfigures();
  }
}

//
// Monospaced typography.  Uses a monospaced
// font for all text.
//
//  Example:
//  .monospacedtypography(); // Use outside of any CSS rule
//
.monospacedtypography(){
  body {
   .typography();
   .regularweight();
   .monospaced();
  }
  cite, i, em, dfn { .italic(); }
  h1, h2, h3, h4, h5, h6 { .boldweight(); }
  input[type="text"], input[type="password"], input[type="email"], input[type="number"], textarea,
  pre, textarea, tt, code, samp, var, kbd {
   .monospaced();
   .typographybase();
  }
  div, p, li, dt, dd, span, a, small, big {
   .monospaced();
   .typography();
  }
  pre {
   .nohyphens();
  }
  span.fraction {
    .fractions();
  }
  input, legend, option, button, select, h1, h2, h3, h4, h5, h6, figcaption, caption, aside {
   .monospaced();
   * { .monospaced(); }
   .typography();
  }
  th, td {
   .typographytabfigures();
  }
}

////////////
// Font imports

@import url(https://fonts.googleapis.com/css?family=Merriweather:300,400,700,800,300italic,400italic,700italic,800italic);
@import url(https://fonts.googleapis.com/css?family=Fira+Sans:300,400,600,700,900,300italic,400italic,600italic,700italic,900italic);
@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:300,400,600,700,900,300italic,400italic,600italic,700italic,900italic);