Typography

Type does two jobs: it carries the brand voice and it keeps text readable. We split those jobs across two typefaces and one M3 scale, so every screen reaches for the same sizes and Flutter consumes them without a mapping table.

Two typefaces, one rule

Zilla Slab carries the brand. Inter carries the reading. The split is a hard line, not a matter of taste.

Aa

Zilla Slab

The brand voice. Used only for Display (Large, Medium, Small) and headlineLarge. Always weight 700.

Aa

Inter

Everything that gets read: headlineMedium and below, so Title, Body and Label. Legibility first.

If it is not Display or headlineLarge, it is Inter. No exceptions, so the brand never gets in the way of reading.

The scale

Fifteen roles across five tiers, straight from the M3 TextTheme. Every specimen below is rendered at its real size, weight and line height, so what you see is the spec (fontSize/lineHeight in px, weight, and letter spacing where the token sets it).

Display

Big brand moments

displayLargeZilla Slab57/64 · Bold · -0.5

Big brand moments

displayMediumZilla Slab45/52 · Bold · -0.5

Big brand moments

displaySmallZilla Slab36/44 · Bold · -0.25

Headline

A clear headline

headlineLargeZilla Slab32/40 · Bold

A clear headline

headlineMediumInter28/36 · Regular

A clear headline

headlineSmallInter24/32 · Regular

Title

Section & card titles

titleLargeInter22/28 · Medium

Section & card titles

titleMediumInter16/24 · Medium

Section & card titles

titleSmallInter14/20 · Medium

Body

The quick brown fox jumps over the lazy dog

bodyLargeInter16/24 · Regular

The quick brown fox jumps over the lazy dog

bodyMediumInter14/20 · Regular

The quick brown fox jumps over the lazy dog

bodySmallInter12/16 · Regular

Label

Button label

labelLargeInter14/20 · Medium

Button label

labelMediumInter12/16 · Medium

Button label

labelSmallInter11/16 · Medium

When to use which

Pick the lowest tier that still reads as the right importance. Step down one size as the element loses weight or the container gets denser.

• Display (Zilla, 36 to 57): brand moments, not UI. Empty-state heroes, a marketing header, the docs cover. At most one per view, and rarely inside the app itself.
• Headline (32 to 24): the title of a screen or a major section. headlineLarge (Zilla) tops a screen; headlineMedium and headlineSmall (Inter) open sections within it.
• Title (22 to 14): the name of a card, list row, dialog or grouped block. The workhorse for “this block is about X”.
• Body (16 to 12): paragraphs and most reading text. bodyLarge for primary content, bodyMedium for dense UI, bodySmall for captions and secondary lines.
• Label (14 to 11): buttons, chips, tabs, overlines and metadata. For naming, not for reading.

Do not jump tiers to save space. If a title will not fit, the content is too dense or the copy too long, not the type too big. Fix the layout, keep the scale.

In context

The same hierarchy on two real surfaces. Notice how few roles it actually takes to build a clear screen.

This week

Your usage summary

You sent 214 messages and saved 3 numbers. Everything is well within your plan.

View detailsoverline labelMedium · title titleLarge · body bodyMedium · button labelLarge

Delete this chat?

This removes the conversation on this device. It cannot be undone.

dialog title titleMedium · body bodyMedium

Emphasized variants

Body and Label each have an Emphasized cut at weight 700 (bodyLargeEmphasized, labelLargeEmphasized, and so on). Reach for them to stress a word inside running text or for a button label. Emphasis is weight, not size: never promote body to a Title just to make it stand out.