Typography

We have two fonts in play: Atyp and Antique Legacy. Atyp should always be used in all caps. Antique Legacy should never be in all caps (use title case or sentence case.)

Atyp uses different versions of the font, based on font weight:
Atyp Light: 100 300
Atyp Regular: 400
Atyp Medium: 500
Atyp Semi Bold: 600 900

Headings

<h1 class="header--alpha">
  <span class="caps">T-bone magna boudin in capicola </span> Mollit jerky pork chop
</h1>
<h2 class="header--beta">
  <span class="caps">Cillum deserunt enim minim</span> Ugiat shoulder cupim bacon jowl
</h2>
<h3 class="header--theta">
  <span class="caps">Cillum deserunt enim minim</span> Ugiat shoulder cupim bacon jowl
</h3>
<h4 class="header--eta">
  <span class="caps">Commodo brisket sirloin</span> Eiusmod veniam filet mignon ut cupidata
</h4>
<h3 class="header--gamma">
  <span class="caps">Leberkas rump spare ribs cupim swine</span> Laborum veniam pastrami officia rump
</h3>
<h4 class="header--delta">
  <span class="caps">Commodo brisket sirloin</span> Eiusmod veniam filet mignon ut cupidata
</h4>
<h5 class="header--epsilon">
  <span class="caps">Ham ribeye alcatra fugia</span> Incididunt excepteur venison
</h5>
<h6 class="header--zeta">
  <span class="caps">Shankle tri-tip. Ball tip cul</span> Lborum chicken quis esse et mi
</h6>

Body Text

if classnames aren't your thing, there is a mix-in for each header:

.property-list__key {
  @include header('alpha');
}
.property-list__value {
  @include header('delta');
}

Font-Weight Mixins

it's possible to set the weights directly, by using one of the weight mixins.. However this is probably not neccesary since the weight you want will almost certainly set by the header.

Medium: Bacon ipsum dolor amet pork excepteur bacon culpa reprehenderit kevin, tenderloin cupim turkey kielbasa duis veniam mollit drumstick spare ribs. Fugiat shoulder cupim bacon jowl tempor anim andouille landjaeger meatball. Rump shank enim beef esse. Tenderloin boudin flank commodo officia laborum porchetta in shank reprehenderit t-bone bresaola sirloin deserunt ad. Laborum veniam pastrami officia rump. Minim ex exercitation drumstick eiusmod, in dolore veniam.

Regular: Sausage laborum cillum consectetur leberkas dolor ea. Biltong nisi eu pork chuck drumstick ut duis. Kielbasa fatback in, hamburger aliqua labore magna shankle beef ribs prosciutto biltong. Ullamco porchetta velit eiusmod veniam filet mignon ut cupidatat. T-bone magna boudin in capicola officia eiusmod ea sirloin beef ribs culpa cillum. Elit minim cupidatat, mollit pig chuck incididunt shankle brisket ham aliquip beef ribs pastrami fugiat.

.weight-example--medium {  
  @include header-medium-weight; // 600
}
.weight-example--regular { 
  @include header-regular-weight; // 400
}

Text Links

The current style for simple text links (that have no icons) is a constant underline (whether hovering or not). Since we don't want this to be the default behavior - most links (i.e. within promos) don't require this underline - the underline must be added explicitly to elements within a component. So, for example, in the footer navigation, this style is nested within the SASS - only at the level it is absolutely needed, to avoid showing up in other places within the component or worse, other components.

    a { 
      @include underline;
    }