Overview

Too many type sizes and styles at once can spoil any layout. A limited set of type variations are supported that work well with each other.

Usage Guide

Headline

xlarge
large
medium
small
On-boarding Wizard
Section Title

Body Text

xlarge
large
medium
small
Paragraph
Table Cell
Single Piece of Data
Helper Text
Meta Data

Pairing

Our Typography uses semantic naming to pair sizes which helps with the consistency in overall application as well as the visual hierarchy and space management.

This pairing method is ideal for text components that are directly or semi-directly related or grouped together in a card or section.

Pairing Examples

<Card>
    <Headline>Headline Default</Headline>
    <br />
    <Eyebrow>Eyebrow Default</Eyebrow>
    <BodyText>This is default BodyText component</BodyText>
</Card>
<Card>
    <Headline size='large' className='m-b-3'>Headline Large</Headline>

    <Eyebrow size='large'>Eyebrow Large</Eyebrow>
    <BodyText size='large'>This is Large BodyText component</BodyText>
</Card>

Use same size for sibling items.

<Card>
    <Card.Section>
        <Headline size='small'>Headline Small</Headline>
        <BodyText size='small'>This is Small BodyText component</BodyText>
    </Card.Section>
    <Card.Section>
        <Headline size='small' className='m-b-2'>Headline Small</Headline>
        <Eyebrow size='small'>Eyebrow Small</Eyebrow>
        <BodyText size='small' className='m-b-3'>This is Small BodyText component</BodyText>
        <Form>
            <Form.Input label="First Name" placeholder="Leia" />
        </Form>
    </Card.Section>
</Card>

Deviation

In some cases where you need higher contrast between Headline and Body, Headline can size up one or body can size down one. Do not deviate up with body text, the body text and headline size would be the same creating ineffective typographical hierarchy.

Deviation Examples

<Card>
<Card.Section>
    <Eyebrow size='medium'>Normal</Eyebrow>
    <Headline size='large'>Headline Large</Headline>
    <BodyText size='large' className='m-b-4'>BodyText Large</BodyText>
    <Eyebrow size='medium'>Deviation</Eyebrow>
    <Headline size='xlarge'>Headline xLarge</Headline>
    <BodyText size='large'>BodyText Large</BodyText>
</Card.Section>
<Card.Section>
    <Eyebrow size='medium'>Normal</Eyebrow>
    <Headline size='medium'>Headline Medium</Headline>
    <BodyText size='medium' className='m-b-4'>BodyText Medium</BodyText>
    <Eyebrow size='medium'>Deviation</Eyebrow>
    <Headline size='medium' >Headline Medium</Headline>
    <BodyText size='small'>BodyText Small</BodyText>
</Card.Section>
<Card.Section>
    <Eyebrow size='medium'>Normal</Eyebrow>
    <Headline size='small'>Headline Small</Headline>
    <BodyText size='small' className='m-b-4'>BodyText Small</BodyText>
    <Eyebrow size='medium'>Deviation</Eyebrow>
    <Headline size='small'>Headline Small</Headline>
    <BodyText size='xsmall'>BodyText xSmall</BodyText>
</Card.Section>
</Card>

Variations

Headline

Font Family: Sofia Pro
Weight: Medium

<>
    <Headline size='xlarge' className='m-b-2'>X-large, 32px</Headline>
    <Headline size='large' className='m-b-2'>Large, 26px</Headline>
    <Headline size='medium' className='m-b-2'>Medium, 20px</Headline>
    <Headline size='small' className='m-b-2'>Small, 16px</Headline>
</>

Body Text

Font Family: Nunito Sans
Weight: Regular, Semibold

<>
    <BodyText className='m-b-2' size='large'>Large, 20px</BodyText>
    <BodyText className='m-b-2' size='medium'>Medium, 16px</BodyText>
    <BodyText className='m-b-2' size='small'>Small, 14px</BodyText>
    <BodyText className='m-b-2' size='xsmall'>X-small, 12px</BodyText>
</>

Eyebrow

Font Family: Nunito Sans
Weight: Semibold
Case: Uppercase
Style: Subdued

<>
    <Eyebrow className='m-b-2' size='large'>Large, 14px</Eyebrow>
    <Eyebrow className='m-b-2' size='medium'>Medium, 12px</Eyebrow>
    <Eyebrow className='m-b-2' size='small'>Small, 10px</Eyebrow>
</>

Styles

Subdued

You can deemphasize text by making it a lighter shade of grey.

<Card>
<BodyText>In a paragraph of text, when you have words that need to be deemphasized, <BodyText inline el='span' subdued>subdued text</BodyText> becomes less apparent</BodyText>
</Card>

A subdued line of copy can be used for disclaimers or helpful notes below form fields

<Card>
    <BodyText subdued>You can only upload photos in jpg, png, and tif formats</BodyText>
</Card>

Subdued headlines provide extra context to a regular headline

<Card>
    <Headline subdued>Headline</Headline>
</Card>

Italic

You can emphasize text by italicizing it.

<BodyText>In a paragraph of text, when you have words that need to be deemphasized, <BodyText inline el='span' italic>subdued text</BodyText> becomes less apparent</BodyText>

Bold

We internally call the semibold (600) weight bold. The actual 700 weight is avoided.

You can emphasize text by bolding it.

<Card>
    <BodyText>In a paragraph of text, when you have words that need to be emphasized, <BodyText inline el='span' bold>bold text</BodyText> becomes more apparent</BodyText>
</Card>

Additional Information

Refer to Typography component for more information about how it is implemented.

Download Fonts

Nunito Sans (Google Fonts)

2 Weights, 2 Styles

Sofia Pro (.zip)

2 Weights, 2 Styles (Private)