danbarber.me/_assets/stylesheets/includes/typography.css.scss

// $blockquote: $type-border !default
$heading-font-family: "Sentinel SSm A", "Sentinel SSm B", Georgia, Times, "Times New Roman", serif;
$body-font-family: "Sentinel SSm A", "Sentinel SSm B", Georgia, Times, "Times New Roman", serif;
$mono: "source-code-pro", monospace !default;
$header-title-font-family: $heading-font-family !default;
$header-subtitle-font-family: $heading-font-family !default;

/*Type-A-File "Field Report" designed by Russ Maschmeyer, aka StrangeNative.
 *http://www.strangenative.com
 *@strangenative
 *
 *Creative Commons License by Attribution. 
 *Feel free to take it, adapt it, & use it on both commercial and non-commercial projects.
 *Though I'd like a smidgeon of credit, so just leave this bit in here. K? */

/*Pick Your Fonts */
body, h5, h6, .run-in, dt {
  font-family: $body-font-family;
}

h1, h2, h3, h4, .pullquote, .sidenote h1, aside h1, .pullquote, .drop-cap, cite {
  font-family: $heading-font-family;
}

/*Nav Fonts */
nav[role=navigation] {
  font-family: $heading-font-family;
}

/*Size & Vertical Rhythm */
body {
  font-size: 100%;
  font-size: 14px;
  line-height: 1.5em;
}

/*Color */
body {
  color: $text-color;
}

/*HTML Standard Elements */
h1 {
  font-size: 2.5em;
  line-height: 1.333em;
  margin: 5rem 0 2.5rem;
}

h2 {
  font-size: 1.5em;
  line-height: 1.1em;
  margin: 2em 0 0.5em;
}

h1 + img, h2 + img {
  margin-top: 1em;
}

h3 {
  font-size: 1.125em;
}

h4 {
  font-size: 1em;
}

h1, h2, h3 {
  font-weight: 600;
  text-rendering: optimizelegibility;
}

h4, h5, h6 {
  font-weight: 600;
  text-rendering: optimizelegibility;
}

article h1 {
  font-size: 1.5em;
}

strong {
  font-weight: 600;
}

small {
  display: block;
  font-size: 0.75em;
  letter-spacing: 0.05em;
  margin: 2.2em 0 -0.2em;
  font-style: italic;
  line-height: 1.75em;
}

p, ul, ol, form {
  margin: 1.5rem 0 1.5rem;
}

h3 {
  margin-top: 1.5em;
}

ul {
  list-style-position: outside;
  list-style-type: disc;
  line-height: 1.5;
  padding-left: 0;
}

li {
  margin-bottom: 0.75em;
}

ol {
  list-style-position: outside;
  list-style-type: decimal;
}

blockquote {
  font-style: italic;
  line-height: 1.6em;
  margin-left: 0;
  margin-right: 0;
}

blockquote:before {
  font-family: Georgia, serif;
  content: "“";
  font-size: 2.75em;
  text-indent: -0.6em;
  margin-top: 0.1em;
  float: left;
  opacity: 0.3;
}

cite {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-top: 1.5em;
  margin-left: 1em;
  font-weight: 900;
  font-style: normal;
  font-size: 0.8em;
}

cite:before {
  content: "— ";
  margin-left: -3.4em;
  margin-right: 0.9em;
  opacity: 0.3;
}

pre, code, tt {
  font-family: $mono;
  font-weight: 500;
}

code {
  border: 1px solid #ddd;
  border-radius: 0.25em;
  display: inline-block;
  font-size: 0.75em;
  line-height: 1.5em;
  padding: 0 0.3em;
}

.highlight {
  margin: 1.5em 0;
  overflow: auto;
  padding: 0.5em 0.75em;
  border-radius: 0.25em;
  pre {
    margin: 0;
  }
  code {
    border: none;
  }
}

dl {
  margin: 1.75em 0 1.75em;
}

dt {
  font-style: italic;
  margin-top: 1.25em;
  font-size: 1.13em;
  font-weight: 700;
  border-bottom: 1px solid #999;
  background: #DDD;
}

dd {
  font-style: italic;
  font-size: 0.85em;
  margin-top: 1em;
  line-height: 1.6em;
}

abbr {
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.9em;
  letter-spacing: 0.1em;
  border-bottom: 1px dotted $text-color-light;
}

p {
  hyphenate: auto;
  hyphenate-before: 2;
  hyphenate-after: 3;
  hyphenate-lines: 3;
  orphans: 4;
}

p span.pullquote {
  text-indent: 0;
}

/*Compositional Elements */
.kicker {
  font-size: 1.25em;
  line-height: 1.693em;
  /*font-style:italic; */
  margin: (-0.35em) 0 -0.35em;
}

.kicker, .pullquote {
  font-weight: 100;
}

.run-in {
  font-style: italic;
  font-weight: bold;
}

.superscript {
  font-family: arial, sans-serif;
  vertical-align: super;
  font-size: 75%;
  margin-right: 0.4em;
  text-transform: lowercase;
  font-variant: small-caps;
  letter-spacing: 0.1em;
  line-height: 0;
}

.subscript {
  font-family: arial, sans-serif;
  vertical-align: sub;
  font-size: 75%;
  margin-right: 0.4em;
  text-transform: lowercase;
  font-variant: small-caps;
  letter-spacing: 0.1em;
  line-height: 0em;
}

a.superscript, a.subscript {
  text-decoration: none;
}

aside, .sidenote {
  font-size: 0.83em;
  font-style: italic;
  margin-top: 1.25em;
}

aside h1, .sidenote h1 {
  text-transform: uppercase;
  font-size: 1em;
  line-height: 1.5em;
  font-style: normal;
  font-weight: 900;
}

aside p, .sidenote p {
  line-height: 1.7em;
  margin: 1.3em 0;
  font-style: normal;
}

aside ul, aside ol, .sidenote ul, .sidenote ol {
  margin-top: 1.3em;
  line-height: 1.7em;
}

aside ul li, aside ol li, .sidenote ul li, .sidenote ol li {
  margin-bottom: 1.3em;
}

.pullquote {
  font-style: italic;
  letter-spacing: 0.05em;
  margin: 0.5em 0.7em 0.3em 0em;
  padding-top: 0.15em;
  line-height: 1.7em;
  display: block;
  float: left;
  font-size: 1.6em;
  width: 55%;
}

.pullquote:before {
  font-family: Georgia, serif;
  content: "“";
  font-size: 2em;
  text-indent: -0.8em;
  margin-top: 0.05em;
  float: left;
  opacity: 0.3;
}

.footnotes {
  border-top: 1px solid #999;
  font-size: 0.75em;
  margin-top: 3.5em;
}

.footnotes li {
  margin: 1.5em 0 1.5em;
  word-spacing: 0.1em;
  line-height: 1.75em;
}

.caption {
  font-size: 0.8em;
  font-style: italic;
  margin: 0.6em 0 -0.2em;
}

.kicker .run-in {
  text-transform: uppercase;
  font-style: normal;
  letter-spacing: 0.25em;
  font-size: 0.9em;
}

.drop-cap {
  display: block;
  font-style: normal;
  font-size: 5.1em;
  float: left;
  margin: 0.13em 0.1em 0 0;
  line-height: 0.67em;
  font-weight: 100;
}

/*Tweaks */
.kern {
  letter-spacing: -0.1em;
}