Typography

Typefaces

The typefaces we currently use are:

Font files for each of these typefaces should be available from our Brand Downloads Page.

Font faces

Gilmervar(--font-display)

Gilmer Light
Quick brown foxes jumped swiftly

Gilmer Regular
Quick brown foxes jumped swiftly

Gilmer Medium
Quick brown foxes jumped swiftly

Gilmer Bold
Quick brown foxes jumped swiftly

Metro Sansvar(--font-body)

Metro Sans Book
Quick brown foxes jumped swiftly

Metro Sans Regular
Quick brown foxes jumped swiftly

Metro Sans Semi-Bold
Quick brown foxes jumped swiftly

Metro Sans Bold
Quick brown foxes jumped swiftly

DejaVu Sans Monovar(--font-monospace)

DejaVu Sans Mono Regular
Quick brown foxes jumped swiftly

Type Styles

The source of truth for our current type styles is the Figma file Visual Guidelines 2.0 Figma file.

Using Type Styles in Figma

Designers can access these type styles in Figma through the type styles in the Properties panel. Figma maintains documentation on applying type styles.

Note that the Visual Guidelines 2.0 file must be enabled as a library file in your working document in order to access our shared type styles. You should also enable the Type Styles - Klavika + Open Sans as a library file if you need to use our recently deprecated type styles.

Using Type Styles in Development

Type styles are applied in development through global g-type-* classes, where the * represents a slugified string of any of the type styles available in Figma. These styles are managed in the mktg-global-styles repository.

You can browse these styles below. Each style is labelled by its name, followed by the className used to apply the type style to an element.

g-type-* global utility classes

.g-type-display-1Quick Brown Foxes Jumped Lazily
.g-type-display-2Quick Brown Foxes Jumped Lazily
.g-type-display-3Quick Brown Foxes Jumped Lazily
.g-type-display-4Quick Brown Foxes Jumped Lazily
.g-type-display-5Quick Brown Foxes Jumped Lazily
.g-type-display-6Quick Brown Foxes Jumped Lazily
.g-type-bodyQuick Brown Foxes Jumped Lazily
.g-type-body-strongQuick Brown Foxes Jumped Lazily
.g-type-body-x-strongQuick Brown Foxes Jumped Lazily
.g-type-body-italicQuick Brown Foxes Jumped Lazily
.g-type-body-smallQuick Brown Foxes Jumped Lazily
.g-type-body-small-strongQuick Brown Foxes Jumped Lazily
.g-type-body-small-x-strongQuick Brown Foxes Jumped Lazily
.g-type-body-small-italicQuick Brown Foxes Jumped Lazily
.g-type-long-bodyQuick Brown Foxes Jumped Lazily
.g-type-long-body-strongQuick Brown Foxes Jumped Lazily
.g-type-long-body-italicQuick Brown Foxes Jumped Lazily
.g-type-buttons-and-standalone-linksQuick Brown Foxes Jumped Lazily
.g-type-header-navQuick Brown Foxes Jumped Lazily
.g-type-labelQuick Brown Foxes Jumped Lazily
.g-type-label-strongQuick Brown Foxes Jumped Lazily
.g-type-label-smallQuick Brown Foxes Jumped Lazily
.g-type-label-small-strongQuick Brown Foxes Jumped Lazily
.g-type-tag-labelQuick Brown Foxes Jumped Lazily
.g-type-codeQuick Brown Foxes Jumped Lazily