The typefaces we currently use are:
Font files for each of these typefaces should be available from our Brand Downloads Page.
Gilmer — var(--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 Sans — var(--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 Mono — var(--font-monospace)
DejaVu Sans Mono Regular
Quick brown foxes jumped swiftly
The source of truth for our current type styles is the Figma file Visual Guidelines 2.0 Figma file.
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.
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-1 | Quick Brown Foxes Jumped Lazily |
.g-type-display-2 | Quick Brown Foxes Jumped Lazily |
.g-type-display-3 | Quick Brown Foxes Jumped Lazily |
.g-type-display-4 | Quick Brown Foxes Jumped Lazily |
.g-type-display-5 | Quick Brown Foxes Jumped Lazily |
.g-type-display-6 | Quick Brown Foxes Jumped Lazily |
.g-type-body | Quick Brown Foxes Jumped Lazily |
.g-type-body-strong | Quick Brown Foxes Jumped Lazily |
.g-type-body-x-strong | Quick Brown Foxes Jumped Lazily |
.g-type-body-italic | Quick Brown Foxes Jumped Lazily |
.g-type-body-small | Quick Brown Foxes Jumped Lazily |
.g-type-body-small-strong | Quick Brown Foxes Jumped Lazily |
.g-type-body-small-x-strong | Quick Brown Foxes Jumped Lazily |
.g-type-body-small-italic | Quick Brown Foxes Jumped Lazily |
.g-type-long-body | Quick Brown Foxes Jumped Lazily |
.g-type-long-body-strong | Quick Brown Foxes Jumped Lazily |
.g-type-long-body-italic | Quick Brown Foxes Jumped Lazily |
.g-type-buttons-and-standalone-links | |
.g-type-header-nav | Quick Brown Foxes Jumped Lazily |
.g-type-label | Quick Brown Foxes Jumped Lazily |
.g-type-label-strong | Quick Brown Foxes Jumped Lazily |
.g-type-label-small | Quick Brown Foxes Jumped Lazily |
.g-type-label-small-strong | Quick Brown Foxes Jumped Lazily |
.g-type-tag-label | Quick Brown Foxes Jumped Lazily |
.g-type-code | Quick Brown Foxes Jumped Lazily |