Marble Design System

Typography

Guidelines for using type in Marble start with The Met's official branding and visual identity, which is based on the museum's bespoke The Met Sans typeface for interface elements, and the display serif Austin for headings with editorial emphasis.

Marble prioritizes focus and readability, utilizing responsive sizing to adapt to different screens. Our convention for calculating sizing is taking a minimum unit size and then adding a proportionate percentage of the device's view-width, bounded by key device breakpoints.

See the Accessibility and Inclusion section for accessibility guidelines.

For design documentation, see the Marble Typography Guide in Figma.

Typeface Downloads

The Met Sans (Download via Google Drive)
Austin (Commercial Type)

Headings

Headings are concise textual elements that title, emphasize, introduce, and demarcate sections of the experience. Productive headings use a Sans Serif typeface for optimal scannability.

Heading One

H1s are the largest standard heading, usually introducing the beginning of an end-to-end userflow.

font-size: $font-xxl;
line-height: 1.1

Heading Two

H2s are a large heading, used to introduce a section.

font-size: $font-xl;
line-height: 1.1

Heading Three

H3s are a medium heading, used to introduce subsections.

font-size: $font-l;
line-height: 1.1;

Heading Four

H4s are the smallest heading, used to punctuate items within paragraphs, usually alongside Body.

font-size: $font-m;
line-height: 1.33

Paragraphs

Body

Body is the style for verbal content that is meant to be read in sentence and paragraph format.

font-size: $font-s;
line-height: 1.33;

UI

Label

Labels are used to describe interface elements, like filters or badges.

font-size: $font-xs;

Tag

Tags are used to label content types, usually as an eyebrow above a heading.

font-size: $font-xxs;
text-transform: uppercase;
letter-spacing: 110%;