Typography

We use Gotham as the primary font. It is a contemporary sans-serif that’s accessible and unpretentious. We use Gotham Book for normal text and Gotham Bold for headings and bolded text.

Heading styles are applied to their respective elements (h1, h2) and classes (.h1, .h2). h4 is the same size as the default text. p tags have a bottom margin by default.

Here are the font sizes, which are based off of rem in the CSS:

• Base: 15px
• H1: 35.5px
• H2: 26.6px
• H3: 20px

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

<p class="mb0">Regular text.</p>

Links always have .link and then a skin class like .link--default.

<a class="link link--default block" href="">Default</a>
<a class="link link--text block" href="">Same color as text</a>
<a class="link link--light-gray block" href="">Light gray</a>
<a class="link link--yellow block" href="">Yellow</a>