Typography

Typography in Nuvex UI is exposed through public utility classes for hierarchy, interface roles, and specialized text contexts. Use this page to compare each class visually, understand when to apply it, and copy the same markup pattern shown in the snippets.

Open ColorsOpen Surfaces

Usage

These are the core text roles used across product UI. Each card applies a public class directly to a short text sample so you can copy the same pattern into labels, cards, and supporting interface copy.

Lead
.type-lead
Heading
.type-heading
Title works well for cards, panels, and summary surfaces.
.type-title
Type Body
.type-body
Subtitle stays compact and dense for metadata or secondary labels.
.type-subtitle

Hierarchy scale

The heading scale is exposed through .type-h1 to .type-h6. Use it when the semantic HTML tag is not enough or when UI composition requires a heading style on a different element.

Heading 1
.type-h1
Heading 2
.type-h2
Heading 3
.type-h3
Heading 4
.type-h4
Heading 5
.type-h5
Heading 6
.type-h6

Specialized roles

Some typography roles are meant for narrower contexts such as .type-dialog-title and .type-dialog-lead. Keep them scoped to those UI moments so the broader hierarchy stays predictable.

Dialog title
.type-dialog-title
Dialog lead
.type-dialog-lead