Typography

What is typography?

Typography is all about being intentional in how you are presenting text within a design. Typeface (aka font) styles play a vital role in setting the overall tone of a brand, and ensure a powerful user experience.
‍
Our brand uses Lexend, a modern and clean typeface.

Download Lexend (Google Fonts)

Lexend Extra Light

Lexend Light

Lexend Normal

Lexend Medium

Lexend Semibold

Lexend Bold

Lexend Extra Bold

Lexend Black

Lexend Thin

Typography

Heading Styles

Headings establish a content hierarchy and enhance the user experience. They help signal to the user where they are within a piece of content (and signal a place to pause if they need a break).
‍
All headings should be Lexend Semibold.
‍
Headings should always be the color Deep Space (#124f83) on light backgrounds and Lunar Landing (#f2f2f2) on dark backgrounds.

Lexend Semibold (Deep Space)

Lexend Semibold (Lunar Landing)

Typography

Body styles

Body text should be Lexend Light. If you want to emphasize text within the body, use Lexend Semi-bold. Do not just bold text using the bold button!
‍
Use color Deep Space (#124f83) on light backgrounds and color Lunar Landing (#f2f2f2) on dark backgrounds. Comet (#9cc3e5) is also a great choice for body text on a dark background when you need a softer look.

Lexend Light (Deep Space)

Lexend Semibold (Deep Space)

Lexend Light (Lunar Landing)

Lexend Semibold (Lunar Landing)

Lexend Light (Comet)

Lexend Semibold (Comet)

Typography

Things to avoid

The color Nebula (#00d6e6) is best used sparingly in text. It functions well when used in captions or to call out/highlight specific words. It should also be the hyperlink color.
‍
Plasma (#0a78e6) should never be used in text. The color only utilized in the branded elements.
‍
The color Solar Flare (#f1e841) is used as the color for the semi-bold period at the end of headers. It should be used only as an accent in design elements, never in text.

Lexend (Nebula)

Lexend (Plasma)

Lexend (Solar Flare)