Type

Type is everywhere and can be very expressive. We have a number of standard type famlies and sizes we use throughout our applications and marketing sites.

Want to explore how different phrases look in our typefaces? Type into the appropriate fields, and voilà!

Common Elements

h1

Headline 1

h2

Headline 2

h3

Headline 3

h4

Headline 4

h5
Headline 5
p

Paragraph with some italic and bold text

ol
  1. List item 1
  2. List item 2
  3. List item 3
ul
  • List item 1
  • List item 2
  • List item 3

Scale

We use a typographic scale with all our elements to make sure that type always looks good. Below are some examples of how typeSize and typeLineheight properties work together to help us compose common elements.

.type__size--xxs-xs

The quick brown fox jumps over the lazy dog

.type__size--xs-s

The quick brown fox jumps over the lazy dog

.type__size--s-m

The quick brown fox jumps over the lazy dog

.type__size--m-l

The quick brown fox jumps over the lazy dog

.type__size--ml-l

The quick brown fox jumps over the lazy dog

.type__size--l-xl

The quick brown fox jumps over the lazy dog

.type__size--xl-xl

The quick brown fox jumps over the lazy dog

.type__size--xxl-xl

The quick brown fox jumps over the lazy dog

.type__size--xxxl-xxl

The quick brown fox jumps over the lazy dog

Families

Our core type families for our applications are Source Sans Pro and Basic Sans but we also use secondary typefaces to support marketing efforts and clear communication.

Need some additional background about one of our brand typefaces? Click the arrow icon within the blocks below to visit Adobe Fonts and learn more.

.type__family--sans

Source Sans Pro Regular

Source Sans Pro Regular Italic

Source Sans Pro Semibold

Source Sans Pro Semibold Italic

Source Sans Pro Bold

Source Sans Pro Bold Italic

.type__family--sans-alt

Basic Sans Light

Basic Sans Regular

Basic Sans Semibold

Basic Sans Bold

.type__family--casual

Congenial Regular

Congenial Bold

.type__family--mono

Source Code Pro Regular

.type__family--serif

Mackinac Pro Book

Mackinac Pro Book Italic

Mackinac Pro Medium

Mackinac Pro Medium Italic

Mackinac Pro Bold

Mackinac Pro Bold Italic

Weight

To alter the font-weight of an element, use the following classes:

Please note: not all of our type families support all of the following weights, so pair these classes with font families which support them.

.type__weight--light

I’m type with a light weight

.type__weight--normal

I’m type with a normal weight

.type__weight--semibold

I’m type with a semibold weight

.type__weight--bold

I’m type with a bold weight

Alignment

Sometimes you just need to get a selection of type to align to a specific direction, look no further than the following classes:

.type__align--left

I’m left-aligned type, woo-hoo!

.type__align--center

I’m center-aligned type, woo-hoo!

.type__align--right

I’m right-aligned type, woo-hoo!