Type
Custom fonts are loaded via JavaScript provided by fonts.com.
Base
font-stack-base
Neue Haas Grotesk™ W01 Text 55 Roman
Neue Haas Grotesk™ W01 Text 56 Italic
Neue Haas Grotesk™ W01 Text 65 Medium
Neue Haas Grotesk™ W01 Text 75 Bold
Neue Haas Grotesk™ W01 Text 76 Bold Italic
@include font-stack-base;
Secondary
font-stack-secondary
Neue Haas Grotesk™ W01 Display 45 Light
Neue Haas Grotesk™ W01 Display 46 Light Italic
Neue Haas Grotesk™ W01 Display 55 Roman
Neue Haas Grotesk™ W01 Display 56 Italic
Neue Haas Grotesk™ W01 Display 65 Medium
@include font-stack-secondary;
Tertiary
font-stack-tertiary
Minion® W01 Bold
Minion® W01 Bold Italic
Minion® W01 Italic
Minion® W01 Regular
@include font-stack-tertiary;
<h3>Base</h3>
<h4 class="kss-m-top">font-stack-base</h4>
<div style="font: 20px/2 'Neue Haas Grotesk W01 Disp'"> Neue Haas Grotesk™ W01 Text 55 Roman </div>
<div style="font: italic 20px/2 'Neue Haas Grotesk W01 Disp'"> Neue Haas Grotesk™ W01 Text 56 Italic </div>
<div style="font: 500 20px/2 'Neue Haas Grotesk W01 Disp'"> Neue Haas Grotesk™ W01 Text 65 Medium </div>
<div style="font: bold 20px/2 'Neue Haas Grotesk W01 Disp'"> Neue Haas Grotesk™ W01 Text 75 Bold </div>
<div style="font: bold italic 20px/2 'Neue Haas Grotesk W01 Disp'"> Neue Haas Grotesk™ W01 Text 76 Bold Italic </div>
<code>@include font-stack-base;</code>
<h3 class="kss-m-top">Secondary</h3>
<h4 class="kss-m-top">font-stack-secondary</h4>
<div style="font: 20px/2 'Neue Haas Grotesk W01'"> Neue Haas Grotesk™ W01 Display 45 Light </div>
<div style="font: italic 20px/2 'Neue Haas Grotesk W01'"> Neue Haas Grotesk™ W01 Display 46 Light Italic </div>
<div style="font: 500 20px/2 'Neue Haas Grotesk W01'"> Neue Haas Grotesk™ W01 Display 55 Roman </div>
<div style="font: bold 20px/2 'Neue Haas Grotesk W01'"> Neue Haas Grotesk™ W01 Display 56 Italic </div>
<div style="font: bold italic 20px/2 'Neue Haas Grotesk W01'"> Neue Haas Grotesk™ W01 Display 65 Medium </div>
<code>@include font-stack-secondary;</code>
<h3 class="kss-m-top">Tertiary</h3>
<h4 class="kss-m-top">font-stack-tertiary</h4>
<div style="font: 20px/2 'Minion W01'"> Minion® W01 Bold </div>
<div style="font: italic 20px/2 'Minion W01'"> Minion® W01 Bold Italic </div>
<div style="font: bold 20px/2 'Minion W01'"> Minion® W01 Italic </div>
<div style="font: bold italic 20px/2 'Minion W01'"> Minion® W01 Regular </div>
<code>@include font-stack-tertiary;</code>