Skip to content
Skip design navigation
Etesie Alpha
Loading account
← Back to Use the system
Typography · Learn · Guide

Typography roles

A role describes the structural intent of a piece of text — what it is for, not how big it is. Pick the role that matches the job, and the size, weight and spacing come with it. There are five, from the loudest statement to the smallest UI text.

The names are Material's own, so they transfer unchanged to material.io, Compose and Figma, and to the emitted tokens and utilities. One is worth introducing in plain language: Headline is Material's name for the primary in-page heading role — what you would otherwise call a page or section heading.

Choosing a role

Ask what the text is doing on the screen, then read down this list and stop at the first role that fits. The brand roles carry voice and hierarchy; the plain roles carry reading and UI.

DisplaybrandThe largest, most expressive type in the system — one big statement that anchors a screen.HeadlinebrandHigh-emphasis text that introduces a page or a major section — the primary heading of a view.TitlebrandMedium-emphasis heading for smaller groupings — cards, dialogs, list groups and subsections.BodyplainThe reading workhorse — paragraphs, descriptions and any longer-form running text.LabelplainFunctional text inside UI components — short, a touch heavier and tighter than Body.

Each role comes in three sizes (L / M / S) and two emphases. This page is about which role — and which size inside it — to reach for. The exact numbers are generated in Type scale and editable per style in Type styles.

Relative, not absolute

Sizes inside a role

Every role comes in three sizes — Large, Medium and Small. They are relative inside the role, not global font sizes: pick the role first for meaning, then the size for prominence within that meaning.

LargeTitle L
MediumTitle M
SmallTitle S

Relative, not absolute — Display Small is still far larger than Body Large. The role sets the band; the size positions within it.

Display

brand typeface

The largest, most expressive type in the system — one big statement that anchors a screen.

Aa
Ship with confidence

✓ Use it for

  • Marketing & landing hero headlines
  • Onboarding or empty-state focal lines
  • Short, punchy phrases — a few words

× Avoid it for

  • Routine page or section headers — use Headline
  • More than one Display per screen
  • Anything longer than a short phrase

Headline

brand typeface

High-emphasis text that introduces a page or a major section — the primary heading of a view.

Aa
Getting started

✓ Use it for

  • Page titles
  • Major section headers
  • The top of a content area

× Avoid it for

  • Body or supporting copy
  • Many on one screen — it flattens hierarchy
  • Captions or metadata — use Label

Title

brand typeface

Medium-emphasis heading for smaller groupings — cards, dialogs, list groups and subsections.

Aa
Account settings

✓ Use it for

  • Card and dialog titles
  • Subsection headings
  • List-group and panel labels

× Avoid it for

  • The main page heading — use Headline
  • Long passages of running text

Body

plain typeface

The reading workhorse — paragraphs, descriptions and any longer-form running text.

Aa
Body text is tuned for sustained reading — relaxed line height and comfortable measure so paragraphs stay legible.

✓ Use it for

  • Paragraphs and descriptions
  • Supporting and explanatory copy
  • Anything read in full sentences

× Avoid it for

  • Buttons and UI controls — use Label
  • Headings or titles

Label

plain typeface

Functional text inside UI components — short, a touch heavier and tighter than Body.

Aa
Save changes

✓ Use it for

  • Buttons, tabs and chips
  • Form-field labels and captions
  • Table headers, tags and metadata

× Avoid it for

  • Running prose or paragraphs
  • Long sentences meant for reading