Introduction
Typography ensures consistency, accessibility, and a cohesive brand identity across all digital products. Nova uses two primary fonts:
Typographic variants
Nova defines three main typography usages:
- Heading: titles and headings.
- Text: standard body text.
- Mono: code snippets, technical, and monospaced content.
Each variant comes with a set of sizes and weights.
Heading variants
|
Size |
Utility class |
Available weights |
|---|---|---|
|
XL |
typo-heading-xl-regular |
Regular / Medium / Bold |
|
LG |
typo-heading-lg-regular |
Regular / Medium / Bold |
|
MD |
typo-heading-md-regular |
Regular / Medium / Bold |
|
SM |
typo-heading-sm-regular |
Regular / Medium / Bold |
|
XS |
typo-heading-xs-regular |
Regular / Medium / Bold |
Text variants
|
Size |
Utility class |
Available weights |
|---|---|---|
|
XL |
typo-text-xl-regular |
Regular / Medium / Bold |
|
LG |
typo-text-lg-regular |
Regular / Medium / Bold |
|
MD |
typo-text-md-regular |
Regular / Medium / Bold |
|
SM |
typo-text-sm-regular |
Regular / Medium / Bold |
|
XS |
typo-text-xs-regular |
Regular / Medium / Bold |
Mono variants
|
Size |
Utility class |
Available weights |
|---|---|---|
|
MD |
typo-mono-md-regular |
Regular / Medium / Bold |
|
SM |
typo-mono-sm-regular |
Regular / Medium / Bold |
|
XS |
typo-mono-xs-regular |
Regular / Medium / Bold |
Global styles
Nova applies automatic default styling to core HTML tags, such as:
- h1 to h5
- p
- span
- label
- legend
- small
- a
These elements are styled according to Nova standards and do not require manual overrides unless customization is explicitly needed.
How to use typography in code
References