Malevich

Type system

Eleven role-based classes spanning display, heading, and body. NAMU 1930 for display, NAMU Pro for everything else.

Usage

Each class pre-sets a combination of font-size, line-height, letter-spacing, and font-weight. Tokens live at --font-{role}-{size|line-height|letter-spacing|weight}.

Display

ExampleSpecsClass / usage
Display hero
size: 72pxline: 1.0 track: -0.035emweight: 900
.display-hero--font-display-hero-*
Single biggest statement per page.
Display statement
size: 48pxline: 1.05 track: -0.025emweight: 700
.display-statement--font-display-statement-*
Section openers, marketing claims.
Display title
size: 32pxline: 1.1 track: -0.025emweight: 700
.display-title--font-display-title-*
Hero subtitles, big numbers.

Headings

ExampleSpecsClass / usage
Heading title
size: 24pxline: 1.25 track: -0.01emweight: 600
.heading-title--font-heading-title-*
Top of long-form content.
Heading section
size: 18pxline: 1.3 track: -0.005emweight: 600
.heading-section--font-heading-section-*
Section dividers in body copy.
Heading subsection
size: 16pxline: 1.35 track: 0weight: 600
.heading-subsection--font-heading-subsection-*
Nested section labels.
Heading group
size: 16pxline: 1.5 track: 0weight: 600
.heading-group--font-heading-group-*
Form field-group titles.

Body

ExampleSpecsClass / usage
Body lead
size: 18pxline: 1.5 track: 0weight: 400
.body-lead--font-body-lead-*
Intro paragraphs, ledes.
Body regular
size: 16pxline: 1.55 track: 0weight: 400
.body-regular--font-body-regular-*
Default body text.
Body support
size: 14pxline: 1.5 track: 0.005emweight: 400
.body-support--font-body-support-*
Captions, helper text.
Body caption
size: 12pxline: 1.45 track: 0.01emweight: 400
.body-caption--font-body-caption-*
Microcopy, metadata.