Expressive

Foundations

Typography

Fifteen type roles in five groups, each with an emphasized version. Use any font you like; the roles keep sizes and rhythm consistent.

Type scale

Shown in the font chosen in Customize.

display-large57/64 · 400Springy shapes
display-medium45/52 · 400Springy shapes
display-small36/44 · 400Springy shapes
headline-large32/40 · 400Springy shapes
headline-medium28/36 · 400Springy shapes
headline-small24/32 · 400Springy shapes
title-large22/28 · 400Springy shapes
title-medium16/24 · 500Springy shapes
title-small14/20 · 500Springy shapes
body-large16/24 · 400Springy shapes
body-medium14/20 · 400Springy shapes
body-small12/16 · 400Springy shapes
label-large14/20 · 500Springy shapes
label-medium12/16 · 500Springy shapes
label-small11/16 · 500Springy shapes

Roles

  • Display: the largest text, for short, important moments like a hero.
  • Headline: section and page headings.
  • Title: smaller headings, card titles, app bar titles.
  • Body: paragraphs and longer text.
  • Label: buttons, chips, tabs and other UI text.

Each role has an -emphasized version with a heavier weight, which M3 Expressive uses to highlight important text, for example text-title-large-emphasized.

Fonts

Roles use one of two families: brand (display, headline, title-large) and plain (the rest). By default both are Roboto Flex. Set them to any font, ideally a variable one so weights interpolate smoothly:

npx @grenishrai/expressive theme --font "Inter"
createTheme({ typography: { fonts: { brand: "var(--font-display)", plain: "var(--font-sans)" } } });

Using type

<h1 className="text-display-small">Trips</h1>
<p className="text-body-large text-on-surface-variant">Three upcoming</p>
<span className="text-label-medium">Updated today</span>

Each text-* utility sets size, line height, letter spacing and weight together. The values are also available as variables, like --ex-type-title-large-size.