m3e_typography 0.0.1

Material 3 Expressive Emphasized Typography scale and variable font extensions for Flutter.

M3E Typography

A Flutter package providing the official Material 3 Expressive (M3E) Emphasized Typography scale and variable font extensions for modern, elevated typography hierarchy.

Material 3 Expressive introduces an elevated typographic scale featuring increased font weights, optical sizes (opsz), and rounded variation axes (ROND). Built according to the official Material Design 3 Typography Specification, this package brings full, out-of-the-box support for the complete 15-role M3 expressive scale, granular roundness controls, and ergonomic theme extensions.

---

🎮 Interactive Demo

You can try out the package demo here: m3e_core demo

---

🚀 Features

• Complete 15-Role Scale — elevates font weights, optical sizes, and line-heights across Display, Headline, Title, Body, and Label roles.
• Variable Font Axes — automatic configuration of wght (Weight), opsz (Optical Size), and ROND (Corner Roundness) variation axes for fonts like GoogleSansFlex.
• Granular Roundness Control — customize global corner roundness (rond) or isolate roundness specifically for body and label styles (bodyRond).
• Ergonomic Extensions — instant access via textTheme.emphasized, textTheme.toEmphasized(), theme.emphasizedTextTheme, and context.emphasizedTextTheme.
• Font Family Preservation — seamlessly retains base font families and custom overrides when computing emphasized styles.
• Variable Font Playground — included interactive showcase and live code generator for variable font axes.

---

📦 Installation

Add m3e_typography to your pubspec.yaml:

dependencies:
  m3e_typography: ^0.0.1

Import it in your Dart code:

import 'package:m3e_typography/m3e_typography.dart';

---

🧩 Quick Start

1. Apply to ThemeData

Apply the emphasized typographic scale globally to your ThemeData:

MaterialApp(
  theme: ThemeData(
    useMaterial3: true,
    fontFamily: 'GoogleSansFlex',
    textTheme: ThemeData.light().textTheme.emphasized,
  ),
  darkTheme: ThemeData(
    useMaterial3: true,
    fontFamily: 'GoogleSansFlex',
    textTheme: ThemeData.dark().textTheme.emphasized,
  ),
  home: const HomeScreen(),
);

2. Customizing Corner Roundness (ROND & bodyRond)

With variable fonts like Google Sans Flex, you can adjust glyph corner roundness (0.0 for sharp, 100.0 for fully rounded):

// Keep display/headlines crisp while softening body and label text
final roundedTextTheme = baseTheme.toEmphasized(
  rond: 0.0,
  bodyRond: 100.0,
);

3. BuildContext & ThemeData Extensions

Access the emphasized text styles anywhere in your widget tree:

// Direct context access
Text(
  'Featured Story',
  style: context.emphasizedTextTheme.headlineMedium,
);

// Access via ThemeData
final textTheme = Theme.of(context).emphasizedTextTheme;

---

📖 Detailed API Guide

1. M3ETypography

Static utility class providing the core generator method for computing emphasized TextTheme instances.

Method	Parameters	Description
emphasized(TextTheme base, {double rond = 0.0, double? bodyRond})	base: Base TextTheme rond: Global corner roundness (0.0 - 100.0) bodyRond: Specific roundness for body & label roles	Generates a new TextTheme aligning all 15 typography roles with the Material 3 Expressive specification and variable font axes.

final emphasizedTheme = M3ETypography.emphasized(
  Theme.of(context).textTheme,
  rond: 0.0,
  bodyRond: 100.0,
);

---

2. Extensions

Ergonomic extensions designed for zero-boilerplate integration.

M3EEmphasizedTextThemeExtension on TextTheme

Property / Method	Returns	Description
emphasized	TextTheme	Computes the emphasized TextTheme with default roundness (ROND: 0.0).
toEmphasized({double rond = 0.0, double? bodyRond})	TextTheme	Computes the emphasized TextTheme with custom rond and bodyRond axes.

M3EEmphasizedThemeDataExtension on ThemeData

Property	Returns	Description
emphasizedTextTheme	TextTheme	Convenience getter for textTheme.emphasized.

M3EEmphasizedContextExtension on BuildContext

Property	Returns	Description
emphasizedTextTheme	TextTheme	Convenience getter for Theme.of(context).emphasizedTextTheme.

---

📐 Material 3 Expressive Typographic Scale

The table below outlines the exact specifications for all 15 typography roles under the Material 3 Expressive design scale:

Role	Font Size	Line Height	Weight (wght)	Optical Size (opsz)	Tracking	Corner Roundness (ROND)
Display Large	57.0 pt	64.0 pt (64/57)	FontWeight.w500 (500.0)	57.0	0.0	rond (0.0)
Display Medium	45.0 pt	52.0 pt (52/45)	FontWeight.w500 (500.0)	45.0	0.0	rond (0.0)
Display Small	36.0 pt	44.0 pt (44/36)	FontWeight.w500 (500.0)	36.0	0.0	rond (0.0)
Headline Large	32.0 pt	40.0 pt (40/32)	FontWeight.w500 (500.0)	32.0	0.0	rond (0.0)
Headline Medium	28.0 pt	36.0 pt (36/28)	FontWeight.w500 (500.0)	28.0	0.0	rond (0.0)
Headline Small	24.0 pt	32.0 pt (32/24)	FontWeight.w500 (500.0)	24.0	0.0	rond (0.0)
Title Large	22.0 pt	28.0 pt (28/22)	FontWeight.w500 (500.0)	22.0	0.0	rond (0.0)
Title Medium	16.0 pt	24.0 pt (24/16)	FontWeight.w700 (600.0)	16.0	0.0	rond (0.0)
Title Small	14.0 pt	20.0 pt (20/14)	FontWeight.w700 (600.0)	14.0	0.0	rond (0.0)
Body Large	16.0 pt	24.0 pt (24/16)	FontWeight.w500 (500.0)	16.0	0.0	bodyRond (effectiveBodyRond)
Body Medium	14.0 pt	20.0 pt (20/14)	FontWeight.w500 (500.0)	14.0	0.0	bodyRond (effectiveBodyRond)
Body Small	12.0 pt	16.0 pt (16/12)	FontWeight.w500 (500.0)	12.0	+0.1	bodyRond (effectiveBodyRond)
Label Large	14.0 pt	20.0 pt (20/14)	FontWeight.w700 (600.0)	14.0	0.0	bodyRond (effectiveBodyRond)
Label Medium	12.0 pt	16.0 pt (16/12)	FontWeight.w700 (600.0)	12.0	+0.1	bodyRond (effectiveBodyRond)
Label Small	11.0 pt	16.0 pt (16/11)	FontWeight.w700 (600.0)	11.0	+0.1	bodyRond (effectiveBodyRond)

---

🎛️ Variable Font Axes Guide

When paired with a variable font such as Google Sans Flex, m3e_typography configures standard and expressive variation axes:

Core Variation Axes

Tag	Axis Name	Range	Description
wght	Weight	100.0 – 1000.0	Controls stroke thickness across thin, regular, medium, bold, and black weights.
opsz	Optical Size	6.0 – 144.0	Adapts letterform proportions, spacing, and contrast for target text point size.
ROND	Roundness	0.0 – 100.0	Controls corner and terminal curvature from sharp (0.0) to rounded (100.0).
wdth	Width	25.0% – 151.0%	Adjusts character compression from ultra-condensed to expanded.
slnt	Slant	-10.0° – 0.0°	Controls italic slant angle.
GRAD	Grade	-200.0 – 150.0	Adjusts visual weight without altering character width or layout reflow.

Parametric Y-Axes (Advanced)

Tag	Axis Name	Typical Range	Description
ytas	Ascender Height	649.0 – 854.0	Fine-tunes the height of ascenders (e.g. b, d, h).
ytde	Descender Depth	-305.0 – -98.0	Fine-tunes the depth of descenders (e.g. g, p, y).
ytlc	Lowercase Height	416.0 – 570.0	Fine-tunes x-height for lowercase glyphs.
ytuc	Uppercase Height	528.0 – 760.0	Fine-tunes cap-height for uppercase glyphs.

---

🔤 Configuring Google Sans Flex in Flutter

To use Google Sans Flex with variable font axes in your application:

1. Place GoogleSansFlex.ttf in your project's assets/fonts/ directory.
2. Declare the font family in your pubspec.yaml:

flutter:
  fonts:
    - family: GoogleSansFlex
      fonts:
        - asset: assets/fonts/GoogleSansFlex.ttf

3. Set fontFamily: 'GoogleSansFlex' on your ThemeData:

ThemeData(
  useMaterial3: true,
  fontFamily: 'GoogleSansFlex',
  textTheme: ThemeData.light().textTheme.emphasized,
)

---

🐞 Found a bug? or ✨ You have a Feature Request?

Feel free to open an Issue or Contribute to the project.

Hope You Love It!

---

Credits

• Material Design 3 Typography Overview for the official typography system specifications
• Google Fonts for variable font specifications & assets
• Claude and Gemini for helping me with the code and documentation.

Radhe Radhe 🙏