rl-theme/library/scss/partials/_typography.scss

/******************************************************************
Site Name:
Author:

Stylesheet: Typography

Need to import a font or set of icons for your site? Drop them in
here or just use this to establish your typographical grid. Or not.
Do whatever you want to...GOSH!

Helpful Articles:
http://trentwalton.com/2012/06/19/fluid-type/
http://ia.net/blog/responsive-typography-the-basics/
http://alistapart.com/column/responsive-typography-is-a-physical-discipline

******************************************************************/


/*********************
FONT FACE (IN YOUR FACE)
*********************/

/*  To embed your own fonts, use this syntax
  and place your fonts inside the
  library/fonts folder. For more information
  on embedding fonts, go to:
  http://www.fontsquirrel.com/
  Be sure to remove the comment brackets.
*/

/*  @font-face {
      font-family: 'Font Name';
      src: url('library/fonts/font-name.eot');
      src: url('library/fonts/font-name.eot?#iefix') format('embedded-opentype'),
             url('library/fonts/font-name.woff') format('woff'),
             url('library/fonts/font-name.ttf') format('truetype'),
             url('library/fonts/font-name.svg#font-name') format('svg');
      font-weight: normal;
      font-style: normal;
  }
*/


/*
The following is based of Typebase:
https://github.com/devinhunt/typebase.css
I've edited it a bit, but it's a nice starting point.
*/


// font stacks
$sans-serif:        "Helvetica Neue", Helvetica, Arial, sans-serif;
$serif:             "Georgia", Cambria, Times New Roman, Times, serif;

/*
 i imported this one in the functions file so bones would look sweet.
 don't forget to remove it for your site.
*/
$lato:              'Lato', $sans-serif;

// Typesetting variables
$baseFontSize:      22; // in pixels. This would result in 22px on desktop
$baseLineHeight:    1.5; // how large the line height is as a multiple of font size
$leading:           $baseLineHeight * 1rem;

// Rate of growth for headings
// I actually like this to be slightly smaller then the leading. Makes for tight headings.
$scale:             1.414;

/*
some nice typographical defaults
more here: http://www.newnet-soft.com/blog/csstypography
*/
p {
  line-height: $leading;
  margin-top: $leading 0 0;
  -ms-word-break: break-all;
  -ms-word-wrap: break-all;
      word-break: break-word;
     word-break: break-word;
  // cleaning up the ragged lines and breaks
  -webkit-hyphens: auto;
     -moz-hyphens: auto;
          hyphens: auto;
  // sets a minimum number of characters before and after the break
  -webkit-hyphenate-before: 2;
   -webkit-hyphenate-after: 3;
           hyphenate-lines: 3;
  // enabling fancy ligatures when available
  -webkit-font-feature-settings: "liga", "dlig";
   -moz-font-feature-settings: "liga=1, dlig=1";
      -ms-font-feature-settings: "liga", "dlig";
       -o-font-feature-settings: "liga", "dlig";
          font-feature-settings: "liga", "dlig";
}