Marble Design System


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 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



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;



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

font-size: $font-xs;


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

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