Typography

Font Families

Mazius Display

Display Large

Display Medium

Display Small

Mazius Display is the display typeface. It is a high-contrast serif font with a calligraphic feel, influenced by latin chancery hands. The bold weight is preferred for headlines to editorialize layouts. The two italic weights can be combined to increase expressiveness. Use for headlines and brand graphics.

EB Garamond

Body Large

Body Base

Body Small

EB Garamond is the secondary typeface, used for body and supporting copy in communications. This typeface is also used heavily in UI components in the design system. Garamond was chosen because of its high readability.

Ubuntu Mono

Monospace Large

Monospace Base

Monospace Small

Monospace font for code and technical content

Type Scale

Display Large - 80px

Line height: 110% | Letter spacing: -2%

Display Medium - 60px

Line height: 120% | Letter spacing: -1%

Display Small - 48px

Line height: 120% | Letter spacing: 0%

Heading Large - 36px

Line height: 120% | Letter spacing: 0%

Heading Medium - 28px

Line height: 130% | Letter spacing: 0%

Body Large - 20px

Line height: 140% | Letter spacing: 0%

Body Base - 16px

Line height: 160% | Letter spacing: 0%

Body Small - 12px

Line height: 160% | Letter spacing: 0%

Developers

Download font files:

View on GitHub

Typography Classes

Available className utilities from globals.css:

type-display-lgtype-display-mdtype-display-smtype-heading-lgtype-heading-mdtype-heading-smtype-body-lgtype-body-mdtype-body-smtype-labeltype-label-mdtype-label-smtype-code-lgtype-code-mdtype-code-sm