Typography

Spirit visual style reinforces JDRF’s clear, powerful message by providing an amplified type hierarchy, limited color selections, and a single font family.

Use the typographic styles on this page via Spirit tokens and components. Aspects of typographic style, such as spacing or color, may be modified on per-component basis. For body text specifically, see the component Long Form Text, which extends this basic typography with spacing and other considerations for long blocks of text.

Weight

Spirit provides four weights of the Graphik font family. For instructions on loading Graphik as a web font, see Font Family, below.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
Jj
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
Jj
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
Jj
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
Jj

Scale

Establish visual hierarchy using appropriate typographic scale.

Improving lives. Curing Type 1 Diabetes.
Improving lives. Curing Type 1 Diabetes.
You Can Help Turn Type
One Into Type None
You Can Help Turn Type
One Into Type None
You Can Help Turn Type
One Into Type None
You Can Help Turn Type
One Into Type None
You Can Help Turn Type
One Into Type None
You Can Help Turn Type
One Into Type None
Whether you donate your time or dollars, life-changing breakthroughs in T1D treatments and therapies couldn’t happen without you
Youth Ambassadors are invited to create a one-of-a-kind project to be featured in the auction of the upcoming One Night in Vegas...
Youth Ambassadors are invited to create a one-of-a-kind project to be featured in the auction of the upcoming One Night in Vegas...
Youth Ambassadors are invited to create a one-of-a-kind project to be featured in the auction of the upcoming One Night in Vegas...

Color

Spirit uses a limited color palette for typography, consisting of black for headings and secondary grey for body text, microcopy, and all other small text.

Primary
Secondary

All typography on a dark background is white, including links.

On Dark

For additional guidance see Color.

Font Family

If using the Spirit NPM package, the Graphik web font is included and should be deployed directly with your product. For technical details, see Getting Started for Developers.

If using Spirit’s styles and assets via the CDN, either use Spirit’s stylesheet directly to get the web fonts automatically or add the appropriate import string to your SCSS. For more information, see Getting Started for Developers: Using CDN Assets: Fonts.

Code Reference

Helper classes to achieve sizes and styles.

Mixins and Classes

Mixin Class Outcome

@mixin spirit-display-1

.spirit-display-1

Applies Display 1 styling

@mixin spirit-display-2

.spirit-display-2

Applies Display 2 styling

@mixin spirit-h1

.spirit-h1

Applies Heading 1 styling

@mixin spirit-h2

.spirit-h2

Applies Heading 2 styling

@mixin spirit-h3

.spirit-h3

Applies Heading 3 styling

@mixin spirit-h4

.spirit-h4

Applies Heading 4 styling

@mixin spirit-h5

.spirit-h5

Applies Heading 5 styling

@mixin spirit-h6

.spirit-h6

Applies Heading 6 styling

@mixin spirit-subhead

.spirit-subhead

Applies subhead paragraph styling

@mixin spirit-body-text-l

.spirit-body-text-l

Applies large paragraph styling

@mixin spirit-body-text-m

.spirit-body-text-m

Applies medium paragraph styling

@mixin spirit-body-text-s

.spirit-body-text-s

Applies small paragraph styling

@mixin spirit-link

.spirit-link

Applies basic link styling