Typography

SendGrid's typography is based on two distinct font families. For headings and numerals, we use Colfax. Paragraphs and other text use the font family Proxima Nova as it provides a versatile set of weights and is very legible at small sizes.

Headings

h1: Page Heading

h2: Section Heading

h3: Subsection Heading

h4: Subsection Heading

HTML Elements h1 h2 h3 h4

Inline Elements

Hi there, this is our default paragraph style. You can bold and italicize words within a paragraph.

You can make paragraphs small.

You can also give paragraphs an error state.

Optional Elements strong em
Modifiers .small .error

Classes

I'm a paragraph using Colfax in a h1 size.

I'm a paragraph using Proxima Nova in a h2 size.

I'm a paragraph using Colfax in a h3 size and font-weight.

I'm a paragraph using Proxima Nova in a h4 size.

Modifiers .is-size-h1 .is-size-h2 .is-size-h3 .is-size-h4
Colfax .colfax .is-weight-medium
Proxima Nova .proxima-nova .is-weight-regular .is-weight-semibold .is-style-italic