Back to Details

material-design-3-typography

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Material Design 3 Typography

Material Design 3 排版

Overview

概述

This skill guides the implementation of Material Design 3 (M3) typography — from the baseline Material You type scale through to M3 Expressive's 30-style expanded type system — to create clear, readable, and emotionally engaging text hierarchies.
Keywords: Material Design 3, M3, typography, type scale, variable fonts, text hierarchy, readability, font weights, line height, letter spacing, emphasized type, medium contrast, Material You
本内容指导Material Design 3（M3）排版的实现——从基础的Material You字体比例到M3 Expressive的30种扩展字体系统——以创建清晰、易读且富有情感吸引力的文本层级结构。
关键词：Material Design 3、M3、排版、字体比例、可变字体、文本层级、可读性、字重、行高、字母间距、强调字体、中等对比度、Material You

Core Principles

核心原则

Typography Philosophy

排版理念

M3 typography focuses on:
  1. Variable Fonts: Support dynamic weight and width adjustments for expressive text
  2. Clear Hierarchy: Distinct type scales that guide users through content
  3. Readability: Optimized for legibility across devices and contexts
  4. Flexibility: Adaptable to different content needs and screen sizes
  5. Expression: Typography that conveys personality and emotion
  6. Emphasis: Baseline and emphasized variants for every type role (M3 Expressive)
M3排版聚焦于：
  1. 可变字体：支持动态调整字重和宽度，实现富有表现力的文本效果
  2. 清晰层级：明确的字体比例引导用户浏览内容
  3. 可读性：针对不同设备和场景优化易读性
  4. 灵活性：适配不同内容需求和屏幕尺寸
  5. 表现力：传递个性和情感的排版
  6. 强调效果：每个字体角色都有基础版和强调版（M3 Expressive）

Type Scale

字体比例

Baseline Type Scale (15 styles)

基础字体比例（15种样式）

M3 defines a comprehensive type scale with specific roles for different UI elements. These 15 baseline styles form the foundation of all M3 typography:
M3定义了一套全面的字体比例，为不同UI元素指定了特定角色。这15种基础样式构成了所有M3排版的基础：

Display Styles (Large, attention-grabbing text)

展示类样式（大尺寸、吸引注意力的文本）

Display Large:
  • Font: Roboto (or brand font)
  • Size: 57px / 3.562rem
  • Line Height: 64px / 4rem
  • Weight: 400 (Regular)
  • Letter Spacing: -0.25px
  • Use: Largest headlines, hero text
Display Medium:
  • Size: 45px / 2.812rem
  • Line Height: 52px / 3.25rem
  • Weight: 400
  • Letter Spacing: 0
  • Use: Large section headers
Display Small:
  • Size: 36px / 2.25rem
  • Line Height: 44px / 2.75rem
  • Weight: 400
  • Letter Spacing: 0
  • Use: Smaller headers, card titles
Display Large:
  • 字体：Roboto（或品牌字体）
  • 尺寸：57px / 3.562rem
  • 行高：64px / 4rem
  • 字重：400（常规）
  • 字母间距：-0.25px
  • 用途：最大标题、Hero文本
Display Medium:
  • 尺寸：45px / 2.812rem
  • 行高：52px / 3.25rem
  • 字重：400
  • 字母间距：0
  • 用途：大型章节标题
Display Small:
  • 尺寸：36px / 2.25rem
  • 行高：44px / 2.75rem
  • 字重：400
  • 字母间距：0
  • 用途：小型标题、卡片标题

Headline Styles (Structural headings)

标题类样式（结构性标题）

Headline Large:
  • Size: 32px / 2rem
  • Line Height: 40px / 2.5rem
  • Weight: 400
  • Letter Spacing: 0
  • Use: Page titles, major sections
Headline Medium:
  • Size: 28px / 1.75rem
  • Line Height: 36px / 2.25rem
  • Weight: 400
  • Letter Spacing: 0
  • Use: Subsection headers
Headline Small:
  • Size: 24px / 1.5rem
  • Line Height: 32px / 2rem
  • Weight: 400
  • Letter Spacing: 0
  • Use: Component headers, dialog titles
Headline Large:
  • 尺寸：32px / 2rem
  • 行高：40px / 2.5rem
  • 字重：400
  • 字母间距：0
  • 用途：页面标题、主要章节
Headline Medium:
  • 尺寸：28px / 1.75rem
  • 行高：36px / 2.25rem
  • 字重：400
  • 字母间距：0
  • 用途：子章节标题
Headline Small:
  • 尺寸：24px / 1.5rem
  • 行高：32px / 2rem
  • 字重：400
  • 字母间距：0
  • 用途：组件标题、对话框标题

Title Styles (Emphasis within components)

标题类样式（组件内的强调文本）

Title Large:
  • Size: 22px / 1.375rem
  • Line Height: 28px / 1.75rem
  • Weight: 400
  • Letter Spacing: 0
  • Use: Large list items, emphasized text
Title Medium:
  • Size: 16px / 1rem
  • Line Height: 24px / 1.5rem
  • Weight: 500 (Medium)
  • Letter Spacing: 0.15px
  • Use: Card titles, list headers
Title Small:
  • Size: 14px / 0.875rem
  • Line Height: 20px / 1.25rem
  • Weight: 500
  • Letter Spacing: 0.1px
  • Use: Compact card titles, tabs
Title Large:
  • 尺寸：22px / 1.375rem
  • 行高：28px / 1.75rem
  • 字重：400
  • 字母间距：0
  • 用途：大型列表项、强调文本
Title Medium:
  • 尺寸：16px / 1rem
  • 行高：24px / 1.5rem
  • 字重：500（中等）
  • 字母间距：0.15px
  • 用途：卡片标题、列表头部
Title Small:
  • 尺寸：14px / 0.875rem
  • 行高：20px / 1.25rem
  • 字重：500
  • 字母间距：0.1px
  • 用途：紧凑卡片标题、标签页

Body Styles (Main content)

正文类样式（主要内容）

Body Large:
  • Size: 16px / 1rem
  • Line Height: 24px / 1.5rem
  • Weight: 400
  • Letter Spacing: 0.5px
  • Use: Long-form content, articles
Body Medium:
  • Size: 14px / 0.875rem
  • Line Height: 20px / 1.25rem
  • Weight: 400
  • Letter Spacing: 0.25px
  • Use: Default body text
Body Small:
  • Size: 12px / 0.75rem
  • Line Height: 16px / 1rem
  • Weight: 400
  • Letter Spacing: 0.4px
  • Use: Captions, helper text
Body Large:
  • 尺寸：16px / 1rem
  • 行高：24px / 1.5rem
  • 字重：400
  • 字母间距：0.5px
  • 用途：长篇内容、文章
Body Medium:
  • 尺寸：14px / 0.875rem
  • 行高：20px / 1.25rem
  • 字重：400
  • 字母间距：0.25px
  • 用途：默认正文文本
Body Small:
  • 尺寸：12px / 0.75rem
  • 行高：16px / 1rem
  • 字重：400
  • 字母间距：0.4px
  • 用途：说明文字、辅助文本

Label Styles (UI elements)

标签类样式（UI元素）

Label Large:
  • Size: 14px / 0.875rem
  • Line Height: 20px / 1.25rem
  • Weight: 500
  • Letter Spacing: 0.1px
  • Use: Button text, navigation items
Label Medium:
  • Size: 12px / 0.75rem
  • Line Height: 16px / 1rem
  • Weight: 500
  • Letter Spacing: 0.5px
  • Use: Small buttons, chips
Label Small:
  • Size: 11px / 0.687rem
  • Line Height: 16px / 1rem
  • Weight: 500
  • Letter Spacing: 0.5px
  • Use: Tiny labels, timestamps
Label Large:
  • 尺寸：14px / 0.875rem
  • 行高：20px / 1.25rem
  • 字重：500
  • 字母间距：0.1px
  • 用途：按钮文本、导航项
Label Medium:
  • 尺寸：12px / 0.75rem
  • 行高：16px / 1rem
  • 字重：500
  • 字母间距：0.5px
  • 用途：小型按钮、芯片组件
Label Small:
  • 尺寸：11px / 0.687rem
  • 行高：16px / 1rem
  • 字重：500
  • 字母间距：0.5px
  • 用途：微型标签、时间戳

Emphasized Type Scale (15 additional styles — M3 Expressive)

强调字体比例（新增15种样式 — M3 Expressive）

M3 Expressive adds 15 emphasized variants — one for each baseline style. Emphasized styles are bolder, larger, or more dynamic for highlighting key moments, calls to action, and editorial emphasis:
RoleBaselineEmphasized
Display Large57px / 40057px / 700
Display Medium45px / 40045px / 700
Display Small36px / 40036px / 700
Headline Large32px / 40032px / 700
Headline Medium28px / 40028px / 700
Headline Small24px / 40024px / 600
Title Large22px / 40022px / 700
Title Medium16px / 50016px / 700
Title Small14px / 50014px / 700
Body Large16px / 40016px / 700
Body Medium14px / 40014px / 700
Body Small12px / 40012px / 700
Label Large14px / 50014px / 800
Label Medium12px / 50012px / 800
Label Small11px / 50011px / 800
When to use emphasized styles:
  • Calls to action and primary buttons with strong visual weight
  • Important headlines or numbers that users should notice immediately
  • Editorial emphasis in content layouts
  • Key data points in dashboards or summaries
  • Onboarding screens and feature highlights
Pairing baseline and emphasized:
  • Use emphasized sparingly alongside baseline styles to create rhythm and momentum
  • Never use all emphasized styles on a single screen — the contrast between baseline and emphasized is what creates hierarchy
M3 Expressive为每个基础样式新增了15种强调变体——加粗、放大或更具动态效果，用于突出关键内容、行动召唤和编辑强调：
角色基础版强调版
Display Large57px / 40057px / 700
Display Medium45px / 40045px / 700
Display Small36px / 40036px / 700
Headline Large32px / 40032px / 700
Headline Medium28px / 40028px / 700
Headline Small24px / 40024px / 600
Title Large22px / 40022px / 700
Title Medium16px / 50016px / 700
Title Small14px / 50014px / 700
Body Large16px / 40016px / 700
Body Medium14px / 40014px / 700
Body Small12px / 40012px / 700
Label Large14px / 50014px / 800
Label Medium12px / 50012px / 800
Label Small11px / 50011px / 800
何时使用强调样式:
  • 行动召唤按钮和主按钮，需要强视觉权重
  • 用户需立即注意的重要标题或数字
  • 内容布局中的编辑强调
  • 仪表盘或摘要中的关键数据点
  • 引导页和功能亮点
基础版与强调版搭配:
  • 与基础版样式搭配时，强调样式需谨慎使用，以营造节奏和重点
  • 切勿在单个页面使用所有强调样式——基础版与强调版的对比才是构建层级的关键

Medium Contrast (M3 Expressive Default)

中等对比度（M3 Expressive默认设置）

M3 Expressive introduces "medium contrast" as the default typography approach:
  • Balances legibility with visual flair
  • More accessible than low-contrast approaches while more expressive than high-contrast
  • Ensures expressive type choices remain highly accessible across device types
  • Achieved through careful weight/size pairing in the baseline vs emphasized type scale
M3 Expressive引入了「中等对比度」作为默认排版方式：
  • 在易读性与视觉表现力之间取得平衡
  • 比低对比度方式更易访问，同时比高对比度方式更具表现力
  • 确保富有表现力的字体选择在各类设备上都具有高度可访问性
  • 通过基础版与强调版字体比例中精心搭配的字重/尺寸实现

Font Recommendations

字体推荐

System Fonts

系统字体

Roboto (Default for M3):
  • Versatile, highly readable
  • Available in variable font format
  • Weights: 100-900
  • Use for both display and body text
Roboto Flex (Variable font):
  • Supports width and weight axes
  • Ideal for M3 Expressive
  • Enables dynamic adjustments
Roboto（M3默认字体）:
  • 用途广泛，可读性强
  • 支持可变字体格式
  • 字重范围：100-900
  • 适用于展示文本和正文文本
Roboto Flex（可变字体）:
  • 支持宽度和字重轴
  • 是M3 Expressive的理想选择
  • 支持动态调整

Brand Fonts

品牌字体

Consider these characteristics when choosing brand fonts:
Display Fonts:
  • Distinctive personality
  • High readability at large sizes
  • Consider: Poppins, Montserrat, Work Sans, DM Sans
Body Fonts:
  • Excellent readability at small sizes
  • Good for long-form content
  • Consider: Inter, Open Sans, Source Sans Pro, Noto Sans
选择品牌字体时需考虑以下特性：
展示字体:
  • 具有独特个性
  • 大尺寸下可读性高
  • 推荐：Poppins、Montserrat、Work Sans、DM Sans
正文字体:
  • 小尺寸下可读性极佳
  • 适合长篇内容
  • 推荐：Inter、Open Sans、Source Sans Pro、Noto Sans

Variable Font Implementation

可变字体实现

css
@font-face {
  font-family: 'Roboto Flex';
  src: url('RobotoFlex-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 75% 125%;
}

.dynamic-text {
  font-family: 'Roboto Flex', sans-serif;
  font-variation-settings: 
    'wght' 400,
    'wdth' 100;
}
css
@font-face {
  font-family: 'Roboto Flex';
  src: url('RobotoFlex-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 75% 125%;
}

.dynamic-text {
  font-family: 'Roboto Flex', sans-serif;
  font-variation-settings: 
    'wght' 400,
    'wdth' 100;
}

Implementation Guidelines

实现指南

CSS Type Tokens

CSS字体令牌

Define typography tokens using CSS custom properties. M3 Expressive adds emphasized variants alongside baseline:
css
:root {
  /* Font families */
  --md-sys-typescale-font-family-brand: 'Roboto', sans-serif;
  --md-sys-typescale-font-family-plain: 'Roboto', sans-serif;
  
  /* Display Large — Baseline */
  --md-sys-typescale-display-large-font: var(--md-sys-typescale-font-family-brand);
  --md-sys-typescale-display-large-size: 3.562rem;
  --md-sys-typescale-display-large-line-height: 4rem;
  --md-sys-typescale-display-large-weight: 400;
  --md-sys-typescale-display-large-tracking: -0.25px;
  
  /* Display Large — Emphasized (M3 Expressive) */
  --md-sys-typescale-display-large-emphasized-weight: 700;
  
  /* Headline Large — Baseline */
  --md-sys-typescale-headline-large-font: var(--md-sys-typescale-font-family-brand);
  --md-sys-typescale-headline-large-size: 2rem;
  --md-sys-typescale-headline-large-line-height: 2.5rem;
  --md-sys-typescale-headline-large-weight: 400;
  --md-sys-typescale-headline-large-tracking: 0;
  
  /* Headline Large — Emphasized (M3 Expressive) */
  --md-sys-typescale-headline-large-emphasized-weight: 700;
  
  /* Body Large — Baseline */
  --md-sys-typescale-body-large-font: var(--md-sys-typescale-font-family-plain);
  --md-sys-typescale-body-large-size: 1rem;
  --md-sys-typescale-body-large-line-height: 1.5rem;
  --md-sys-typescale-body-large-weight: 400;
  --md-sys-typescale-body-large-tracking: 0.5px;
  
  /* Body Large — Emphasized (M3 Expressive) */
  --md-sys-typescale-body-large-emphasized-weight: 700;
  
  /* Label Large — Baseline */
  --md-sys-typescale-label-large-font: var(--md-sys-typescale-font-family-plain);
  --md-sys-typescale-label-large-size: 0.875rem;
  --md-sys-typescale-label-large-line-height: 1.25rem;
  --md-sys-typescale-label-large-weight: 500;
  --md-sys-typescale-label-large-tracking: 0.1px;
  
  /* Label Large — Emphasized (M3 Expressive) */
  --md-sys-typescale-label-large-emphasized-weight: 800;
}
使用CSS自定义属性定义排版令牌。M3 Expressive在基础版之外新增了强调版变体：
css
:root {
  /* Font families */
  --md-sys-typescale-font-family-brand: 'Roboto', sans-serif;
  --md-sys-typescale-font-family-plain: 'Roboto', sans-serif;
  
  /* Display Large — Baseline */
  --md-sys-typescale-display-large-font: var(--md-sys-typescale-font-family-brand);
  --md-sys-typescale-display-large-size: 3.562rem;
  --md-sys-typescale-display-large-line-height: 4rem;
  --md-sys-typescale-display-large-weight: 400;
  --md-sys-typescale-display-large-tracking: -0.25px;
  
  /* Display Large — Emphasized (M3 Expressive) */
  --md-sys-typescale-display-large-emphasized-weight: 700;
  
  /* Headline Large — Baseline */
  --md-sys-typescale-headline-large-font: var(--md-sys-typescale-font-family-brand);
  --md-sys-typescale-headline-large-size: 2rem;
  --md-sys-typescale-headline-large-line-height: 2.5rem;
  --md-sys-typescale-headline-large-weight: 400;
  --md-sys-typescale-headline-large-tracking: 0;
  
  /* Headline Large — Emphasized (M3 Expressive) */
  --md-sys-typescale-headline-large-emphasized-weight: 700;
  
  /* Body Large — Baseline */
  --md-sys-typescale-body-large-font: var(--md-sys-typescale-font-family-plain);
  --md-sys-typescale-body-large-size: 1rem;
  --md-sys-typescale-body-large-line-height: 1.5rem;
  --md-sys-typescale-body-large-weight: 400;
  --md-sys-typescale-body-large-tracking: 0.5px;
  
  /* Body Large — Emphasized (M3 Expressive) */
  --md-sys-typescale-body-large-emphasized-weight: 700;
  
  /* Label Large — Baseline */
  --md-sys-typescale-label-large-font: var(--md-sys-typescale-font-family-plain);
  --md-sys-typescale-label-large-size: 0.875rem;
  --md-sys-typescale-label-large-line-height: 1.25rem;
  --md-sys-typescale-label-large-weight: 500;
  --md-sys-typescale-label-large-tracking: 0.1px;
  
  /* Label Large — Emphasized (M3 Expressive) */
  --md-sys-typescale-label-large-emphasized-weight: 800;
}

Type Classes

字体类

Create reusable type classes for both baseline and emphasized styles:
css
/* Baseline styles */
.display-large {
  font-family: var(--md-sys-typescale-display-large-font);
  font-size: var(--md-sys-typescale-display-large-size);
  line-height: var(--md-sys-typescale-display-large-line-height);
  font-weight: var(--md-sys-typescale-display-large-weight);
  letter-spacing: var(--md-sys-typescale-display-large-tracking);
}

.headline-large {
  font-family: var(--md-sys-typescale-headline-large-font);
  font-size: var(--md-sys-typescale-headline-large-size);
  line-height: var(--md-sys-typescale-headline-large-line-height);
  font-weight: var(--md-sys-typescale-headline-large-weight);
  letter-spacing: var(--md-sys-typescale-headline-large-tracking);
}

.body-large {
  font-family: var(--md-sys-typescale-body-large-font);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line-height);
  font-weight: var(--md-sys-typescale-body-large-weight);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
}

/* Emphasized styles (M3 Expressive) */
.display-large-emphasized {
  font-family: var(--md-sys-typescale-display-large-font);
  font-size: var(--md-sys-typescale-display-large-size);
  line-height: var(--md-sys-typescale-display-large-line-height);
  font-weight: var(--md-sys-typescale-display-large-emphasized-weight);
  letter-spacing: var(--md-sys-typescale-display-large-tracking);
}

.headline-large-emphasized {
  font-family: var(--md-sys-typescale-headline-large-font);
  font-size: var(--md-sys-typescale-headline-large-size);
  line-height: var(--md-sys-typescale-headline-large-line-height);
  font-weight: var(--md-sys-typescale-headline-large-emphasized-weight);
  letter-spacing: var(--md-sys-typescale-headline-large-tracking);
}

.body-large-emphasized {
  font-family: var(--md-sys-typescale-body-large-font);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line-height);
  font-weight: var(--md-sys-typescale-body-large-emphasized-weight);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
}

.label-large-emphasized {
  font-family: var(--md-sys-typescale-label-large-font);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line-height);
  font-weight: var(--md-sys-typescale-label-large-emphasized-weight);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
}
为基础版和强调版样式创建可复用的CSS类：
css
/* Baseline styles */
.display-large {
  font-family: var(--md-sys-typescale-display-large-font);
  font-size: var(--md-sys-typescale-display-large-size);
  line-height: var(--md-sys-typescale-display-large-line-height);
  font-weight: var(--md-sys-typescale-display-large-weight);
  letter-spacing: var(--md-sys-typescale-display-large-tracking);
}

.headline-large {
  font-family: var(--md-sys-typescale-headline-large-font);
  font-size: var(--md-sys-typescale-headline-large-size);
  line-height: var(--md-sys-typescale-headline-large-line-height);
  font-weight: var(--md-sys-typescale-headline-large-weight);
  letter-spacing: var(--md-sys-typescale-headline-large-tracking);
}

.body-large {
  font-family: var(--md-sys-typescale-body-large-font);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line-height);
  font-weight: var(--md-sys-typescale-body-large-weight);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
}

/* Emphasized styles (M3 Expressive) */
.display-large-emphasized {
  font-family: var(--md-sys-typescale-display-large-font);
  font-size: var(--md-sys-typescale-display-large-size);
  line-height: var(--md-sys-typescale-display-large-line-height);
  font-weight: var(--md-sys-typescale-display-large-emphasized-weight);
  letter-spacing: var(--md-sys-typescale-display-large-tracking);
}

.headline-large-emphasized {
  font-family: var(--md-sys-typescale-headline-large-font);
  font-size: var(--md-sys-typescale-headline-large-size);
  line-height: var(--md-sys-typescale-headline-large-line-height);
  font-weight: var(--md-sys-typescale-headline-large-emphasized-weight);
  letter-spacing: var(--md-sys-typescale-headline-large-tracking);
}

.body-large-emphasized {
  font-family: var(--md-sys-typescale-body-large-font);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line-height);
  font-weight: var(--md-sys-typescale-body-large-emphasized-weight);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
}

.label-large-emphasized {
  font-family: var(--md-sys-typescale-label-large-font);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line-height);
  font-weight: var(--md-sys-typescale-label-large-emphasized-weight);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
}

Typography Best Practices

排版最佳实践

Hierarchy

层级结构

  1. Use the Scale: Don't create custom sizes—use the defined scale
  2. Skip Levels Sparingly: Can skip one level, but maintain clear hierarchy
  3. Consistent Application: Same content type should use same style
  4. Color for Emphasis: Use color roles for text (on-surface, on-primary, etc.)
  1. 使用标准比例：不要自定义尺寸——使用已定义的字体比例
  2. 谨慎跳过层级：最多可跳过一个层级，但需保持清晰的结构
  3. 应用一致性：同一类型的内容应使用相同样式
  4. 用颜色强调：使用文本颜色角色（on-surface、on-primary等）

Readability

可读性

  1. Line Length: 50-75 characters per line for body text
  2. Line Height: 1.4-1.6 for body text (already built into scale)
  3. Contrast: Minimum 4.5:1 for body text, 3:1 for large text
  4. Text Color: Use semantic color tokens (on-surface, on-background)
  1. 行长度：正文文本每行50-75个字符
  2. 行高：正文文本行高1.4-1.6（已内置在比例中）
  3. 对比度：正文文本最小对比度4.5:1，大文本最小3:1
  4. 文本颜色：使用语义化颜色令牌（on-surface、on-background）

Responsive Typography

响应式排版

css
/* Mobile-first base sizes */
:root {
  --fluid-display-large: clamp(2.5rem, 5vw + 1rem, 3.562rem);
  --fluid-headline-large: clamp(1.5rem, 3vw + 0.5rem, 2rem);
}

.display-large {
  font-size: var(--fluid-display-large);
}

/* Or use container queries for component-level responsiveness */
@container (min-width: 600px) {
  .card-title {
    font-size: var(--md-sys-typescale-title-large-size);
  }
}
css
/* Mobile-first base sizes */
:root {
  --fluid-display-large: clamp(2.5rem, 5vw + 1rem, 3.562rem);
  --fluid-headline-large: clamp(1.5rem, 3vw + 0.5rem, 2rem);
}

.display-large {
  font-size: var(--fluid-display-large);
}

/* Or use container queries for component-level responsiveness */
@container (min-width: 600px) {
  .card-title {
    font-size: var(--md-sys-typescale-title-large-size);
  }
}

Accessibility

可访问性

  1. Zoom Support: Use relative units (rem, em) for all sizes
  2. Clear Hierarchy: Visual hierarchy should be clear without color
  3. Focus States: Ensure text links have visible focus indicators
  4. Screen Readers: Use semantic HTML (h1-h6, p, etc.)
  1. 缩放支持：所有尺寸使用相对单位（rem、em）
  2. 清晰层级：无需依赖颜色即可识别视觉层级
  3. 焦点状态：确保文本链接有可见的焦点指示器
  4. 屏幕阅读器：使用语义化HTML标签（h1-h6、p等）

Performance

性能

  1. Font Loading: Use 
    font-display: swap
    to prevent text blocking
  2. Subset Fonts: Load only needed characters and weights
  3. Variable Fonts: Use single variable font file instead of multiple weights
  4. System Fonts: Consider system font stack for performance
css
@font-face {
  font-family: 'Roboto';
  src: url('roboto.woff2') format('woff2');
  font-display: swap;
  /* Subset to Latin characters */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153;
}
  1. 字体加载：使用
    font-display: swap
    避免文本阻塞
  2. 字体子集：仅加载所需字符和字重
  3. 可变字体：使用单个可变字体文件替代多个字重文件
  4. 系统字体：考虑使用系统字体栈提升性能
css
@font-face {
  font-family: 'Roboto';
  src: url('roboto.woff2') format('woff2');
  font-display: swap;
  /* Subset to Latin characters */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153;
}

Advanced Typography

高级排版

Expressive Text Effects

富有表现力的文本效果

Variable Font Animations:
css
@keyframes weight-shift {
  from { font-variation-settings: 'wght' 300; }
  to { font-variation-settings: 'wght' 700; }
}

.animated-heading {
  animation: weight-shift 2s ease-in-out infinite alternate;
}
Gradient Text:
css
.gradient-headline {
  background: linear-gradient(
    90deg,
    var(--md-sys-color-primary),
    var(--md-sys-color-tertiary)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
可变字体动画:
css
@keyframes weight-shift {
  from { font-variation-settings: 'wght' 300; }
  to { font-variation-settings: 'wght' 700; }
}

.animated-heading {
  animation: weight-shift 2s ease-in-out infinite alternate;
}
渐变文本:
css
.gradient-headline {
  background: linear-gradient(
    90deg,
    var(--md-sys-color-primary),
    var(--md-sys-color-tertiary)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Text Truncation

文本截断

css
/* Single line truncation */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Multi-line truncation */
.truncate-multi {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
css
/* Single line truncation */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Multi-line truncation */
.truncate-multi {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Common Type Patterns

常见排版模式

Card Title and Body

卡片标题与正文

html
<div class="card">
  <h3 class="title-large">Card Title</h3>
  <p class="body-medium">Card description text goes here.</p>
</div>
html
<div class="card">
  <h3 class="title-large">Card Title</h3>
  <p class="body-medium">Card description text goes here.</p>
</div>

Page Header with Subheader

页面标题与副标题

html
<header>
  <h1 class="headline-large">Page Title</h1>
  <p class="body-large">Supporting description or subtitle</p>
</header>
html
<header>
  <h1 class="headline-large">Page Title</h1>
  <p class="body-large">Supporting description or subtitle</p>
</header>

Button Text

按钮文本

html
<button class="label-large">Action</button>
html
<button class="label-large">Action</button>

List Item

列表项

html
<li>
  <span class="title-medium">List Item Title</span>
  <span class="body-small">Supporting text</span>
</li>
html
<li>
  <span class="title-medium">List Item Title</span>
  <span class="body-small">Supporting text</span>
</li>

Checklist for Typography Implementation

M3排版实现检查清单

When implementing M3 typography, ensure:
  • All 15 baseline type styles from the scale are defined as CSS tokens
  • All 15 emphasized type styles are defined (M3 Expressive)
  • Roboto or appropriate brand font is loaded
  • Variable fonts are used when available
  • Font display swap is set to prevent blocking
  • All text uses semantic color tokens
  • Proper hierarchy is established (display > headline > title > body)
  • Emphasized styles are used sparingly for key moments and calls to action
  • Line height and letter spacing match the specification
  • Responsive scaling is implemented for different screen sizes
  • Relative units (rem/em) are used for all sizes
  • Text contrast meets WCAG requirements (4.5:1 minimum)
  • Font weights are used consistently (400 baseline, 500 labels, 700+ emphasized)
  • Semantic HTML tags match visual hierarchy
  • Long-form content has appropriate line length (50-75 characters)
  • All text is readable at default and zoomed sizes
  • Performance is optimized (font subsetting, loading strategy)
  • Medium contrast approach is followed for balance of legibility and expression
实现M3排版时，需确保：
  • 已将比例中的全部15种基础字体样式定义为CSS令牌
  • 已定义全部15种强调字体样式（M3 Expressive）
  • 已加载Roboto或合适的品牌字体
  • 尽可能使用可变字体
  • 已设置font-display: swap避免阻塞
  • 所有文本使用语义化颜色令牌
  • 已建立正确的层级结构（display > headline > title > body）
  • 强调样式仅用于关键内容和行动召唤，使用频率较低
  • 行高和字母间距符合规范
  • 已为不同屏幕尺寸实现响应式缩放
  • 所有尺寸使用相对单位（rem/em）
  • 文本对比度符合WCAG要求（最小4.5:1）
  • 字重使用一致（基础版400，标签500，强调版700+）
  • 语义化HTML标签与视觉层级匹配
  • 长篇内容的行长度合适（50-75字符）
  • 默认和缩放尺寸下所有文本均可读
  • 已优化性能（字体子集、加载策略）
  • 遵循中等对比度方法，平衡易读性与表现力

Resources

资源