---
title: Typography
section-title: Design Elements
description:
docs: true

navgroup: styleguide
navsub: design-els
navactive: typography

wip: true
---

**Insert some sort of description here**

<!-- Typography -->


## Primary typeface

<!-- Headings -->
<div class="g g--gutter">
    <div class="g-col g-span3--mid sg-typeSpecimen sg-typeSpecimen--primary sg-typeSpecimen--giant">Aa</div>
    <div class="g-col g-span6--mid sg-typeSpecimen sg-typeSpecimen--primary">ABCDEFGHIJKLMNOPQRSTUVWXYZ <br>
        abcdefghijklmnopqrstuvwxyz <br>
        0123456789 (.,:;?!£$@*&)
    </div>
    <div class="g-col g-span3--mid l-align--end">
        <p>Aleo</p>
        <p class="u-noSeparator"><span class="u-text-soften">Weight: </span>400</p>
        <p class="u-noSeparator"><span class="u-text-soften">Style: </span>Normal</p>
    </div>
</div>



## Secondary typeface

<div class="g g--gutter">
    <div class="g-col g-span3--mid sg-typeSpecimen sg-typeSpecimen--secondary sg-typeSpecimen--giant">Aa</div>
    <div class="g-col g-span6--mid sg-typeSpecimen sg-typeSpecimen--secondary">ABCDEFGHIJKLMNOPQRSTUVWXYZ <br>
        abcdefghijklmnopqrstuvwxyz <br>
        0123456789 (.,:;?!£$@*&)
    </div>
    <div class="g-col g-span3--mid l-align--end">
        <p>Helvetica Neue</p>
        <p class="u-noSeparator"><span class="u-text-soften">Weight: </span>400</p>
        <p class="u-noSeparator"><span class="u-text-soften">Style: </span>Normal</p>
    </div>
</div>

<!-- Add any more that you need -->