Typography - M3 Expressive

Overview

Typography in Material 3 Expressive is about more than just readability; it's about establishing hierarchy and conveying emotion. M3E introduces emphasized styles and a stronger focus on the "editorial" look.

Design Principles

Hierarchy through Size: Use large scale differences to separate headings from body text.
Weight as Emphasis: Utilize variable fonts or bold weights for primary actions and key data points.
Readable on Any Surface: Ensure high contrast regardless of the container color.
Editorial Feel: Treat UI text layout like a high-end magazine or editorial design.

Type Scale

M3 uses a standard type scale with 15 styles:

Class	Style	Size	Weight	Use Case
Display	Large	57pt	Regular	Hero headings
	Medium	45pt	Regular	Large page titles
	Small	36pt	Regular	Featured content
Headline	Large	32pt	Regular	Page headers
	Medium	28pt	Regular	Section headers
	Small	24pt	Regular	Sub-sections
Title	Large	22pt	Regular	App bar titles
	Medium	16pt	Medium	Card titles
	Small	14pt	Medium	List item titles
Label	Large	14pt	Medium	Button text, chips
	Medium	12pt	Medium	Tabs, small buttons
	Small	11pt	Medium	Captions, badges
Body	Large	16pt	Regular	Primary body text
	Medium	14pt	Regular	Secondary text
	Small	12pt	Regular	Tertiary text

Expressive Enhancements

1. Emphasized Text Styles

For the most important actions, use "Emphasized" variants which often include bold weights and slightly larger sizes.

Text(
  'URGENT ACTION',
  style: Theme.of(context).textTheme.labelLarge?.copyWith(
    fontWeight: FontWeight.w900,
    letterSpacing: 1.2,
    color: Theme.of(context).colorScheme.error,
  ),
)

2. Variable Fonts

If available, use variable fonts to transition weight during interaction (e.g., bolding a button label when pressed).

AnimatedDefaultTextStyle(
  style: TextStyle(
    fontVariations: [FontVariation('wght', _isPressed ? 700 : 400)],
  ),
  duration: const Duration(milliseconds: 200),
  child: const Text('Responsive Label'),
)

Implementation in Flutter

Accessing Typography

final textTheme = Theme.of(context).textTheme;
 
Text('Title', style: textTheme.titleLarge);
Text('Body', style: textTheme.bodyMedium);

Customizing the Type Scale

ThemeData(
  useMaterial3: true,
  textTheme: const TextTheme(
    displayLarge: TextStyle(fontSize: 64, fontWeight: FontWeight.bold),
    // ... other overrides
  ),
)

Best Practices

Limit Font Families: Use 1-2 font families max. Use weight and size for variety.
Line Height: Ensure comfortable leading (1.2x to 1.5x font size) for long-form text.
Tracking (Letter Spacing): Use tighter tracking for large displays and looser for small labels.
Accessibility: Never go below 12pt for body content. Ensure 4.5:1 contrast ratio.

Resources

Color Schemes for text coloring
Component Template for text implementation examples

3.4 KiB Raw Blame History