material-design-3-typography

Material Design 3 排版

概述

本技能将指导你实现 Material Design 3（M3）排版——从基础的 Material You 字体比例，到 M3 Expressive 扩展的 30 种样式字体系统，帮助创建清晰、易读且富有情感感染力的文本层级。

关键词：Material Design 3、M3、排版、字体比例、可变字体、文本层级、可读性、字体粗细、行高、字间距、强调字体、中等对比度、Material You

核心原则

排版理念

M3 排版侧重于：

1. 可变字体：支持动态调整字重和字宽，让文本更具表现力
2. 清晰的层级：通过不同的字体比例引导用户浏览内容
3. 可读性：针对不同设备和场景优化易读性
4. 灵活性：适应不同的内容需求和屏幕尺寸
5. 表现力：通过排版传达个性与情感
6. 强调：为每种字体角色提供基础和强调变体（M3 Expressive）

字体比例

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

M3 定义了一套全面的字体比例，为不同 UI 元素指定了相应角色。这 15 种基础样式构成了所有 M3 排版的基础：

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

大号展示：

• 字体：Roboto（或品牌字体）
• 大小：57px / 3.562rem
• 行高：64px / 4rem
• 字重：400（常规）
• 字间距：-0.25px
• 用途：最大号标题、主视觉文本

中号展示：

• 大小：45px / 2.812rem
• 行高：52px / 3.25rem
• 字重：400
• 字间距：0
• 用途：大型分区标题

小号展示：

• 大小：36px / 2.25rem
• 行高：44px / 2.75rem
• 字重：400
• 字间距：0
• 用途：较小的标题、卡片标题

标题样式（结构性标题）

大号标题：

• 大小：32px / 2rem
• 行高：40px / 2.5rem
• 字重：400
• 字间距：0
• 用途：页面标题、主要分区

中号标题：

• 大小：28px / 1.75rem
• 行高：36px / 2.25rem
• 字重：400
• 字间距：0
• 用途：子分区标题

小号标题：

• 大小：24px / 1.5rem
• 行高：32px / 2rem
• 字重：400
• 字间距：0
• 用途：组件标题、对话框标题

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

大号题名：

• 大小：22px / 1.375rem
• 行高：28px / 1.75rem
• 字重：400
• 字间距：0
• 用途：大型列表项、强调文本

中号题名：

• 大小：16px / 1rem
• 行高：24px / 1.5rem
• 字重：500（中等）
• 字间距：0.15px
• 用途：卡片标题、列表标题

小号题名：

• 大小：14px / 0.875rem
• 行高：20px / 1.25rem
• 字重：500
• 字间距：0.1px
• 用途：紧凑型卡片标题、标签页

正文样式（主要内容）

大号正文：

• 大小：16px / 1rem
• 行高：24px / 1.5rem
• 字重：400
• 字间距：0.5px
• 用途：长篇内容、文章

中号正文：

• 大小：14px / 0.875rem
• 行高：20px / 1.25rem
• 字重：400
• 字间距：0.25px
• 用途：默认正文文本

小号正文：

• 大小：12px / 0.75rem
• 行高：16px / 1rem
• 字重：400
• 字间距：0.4px
• 用途：说明文字、辅助文本

标签样式（UI 元素）

大号标签：

• 大小：14px / 0.875rem
• 行高：20px / 1.25rem
• 字重：500
• 字间距：0.1px
• 用途：按钮文本、导航项

中号标签：

• 大小：12px / 0.75rem
• 行高：16px / 1rem
• 字重：500
• 字间距：0.5px
• 用途：小型按钮、芯片

小号标签：

• 大小：11px / 0.687rem
• 行高：16px / 1rem
• 字重：500
• 字间距：0.5px
• 用途：微型标签、时间戳

强调字阶（额外增加 15 种样式 — M3 Expressive）

M3 Expressive 新增 15 种强调变体，每种基准样式各对应一种。强调样式采用更粗、更大或更具动感的设计，用于突出关键时刻、行动号召和编辑性强调：

角色	基准样式	强调样式
超大显示文字	57px / 400	57px / 700
中等显示文字	45px / 400	45px / 700
小型显示文字	36px / 400	36px / 700
大标题	32px / 400	32px / 700
中标题	28px / 400	28px / 700
小标题	24px / 400	24px / 600
大号标题	22px / 400	22px / 700
中号标题	16px / 500	16px / 700
小号标题	14px / 500	14px / 700
大号正文	16px / 400	16px / 700
中号正文	14px / 400	14px / 700
小号正文	12px / 400	12px / 700
大号标签	14px / 500	14px / 800
中号标签	12px / 500	12px / 800
小号标签	11px / 500	11px / 800

何时使用强调样式：

• 用于行动号召和视觉分量较强的主按钮
• 用于用户应立即注意到的重要标题或数字
• 用于内容布局中的编辑性强调
• 用于仪表板或摘要中的关键数据点
• 用于入门界面和功能亮点

基准样式与强调样式的搭配：

• 将强调样式与基准样式搭配使用时应适度，以营造节奏感和推进感
• 不要在单个界面上使用所有强调样式 — 基准样式与强调样式之间的对比才能形成层级

中等对比度（M3 Expressive 默认值）

M3 Expressive 将“中等对比度”引入为默认排版方式：

• 在易读性与视觉表现力之间取得平衡
• 相较于低对比度方案更易于访问，同时比高对比度方案更具表现力
• 确保富有表现力的字体选择在各种设备类型上仍具备良好的易访问性
• 通过在基准字阶与强调字阶中仔细搭配字重和字号来实现

字体建议

系统字体

Roboto（M3 默认字体）：

• 用途广泛，易读性高
• 提供可变字体格式
• 字重：100-900
• 可用于显示文字和正文

Roboto Flex（可变字体）：

• 支持宽度和字重轴
• 非常适合 M3 Expressive
• 支持动态调整

品牌字体

选择品牌字体时，请考虑以下特性：

显示字体：

• 个性鲜明
• 大字号下易读性高
• 可考虑：Poppins、Montserrat、Work Sans、DM Sans

正文字体：

• 小字号下易读性出色
• 适用于长篇内容
• 可考虑：Inter、Open Sans、Source Sans Pro、Noto Sans

可变字体实现

@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 字体令牌

使用 CSS 自定义属性定义排版令牌。M3 Expressive 会在基准样式旁新增强调变体：

: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;
}

字体类

为基准样式和强调样式创建可复用的字体类：

/* 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);
}

排版最佳实践

层级

1. 使用字阶：不要创建自定义字号 — 使用已定义的字阶
2. 谨慎跳级：可以跳过一级，但要保持层级清晰
3. 一致应用：相同类型的内容应使用相同样式
4. 使用颜色强调：为文本使用颜色角色（on-surface、on-primary 等）

易读性

1. 行长：正文每行 50-75 个字符
2. 行高：正文使用 1.4-1.6（已内置于字阶）
3. 对比度：正文至少为 4.5:1，大号文本至少为 3:1
4. 文本颜色：使用语义颜色令牌（on-surface、on-background）

响应式排版

/* 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);
  }
}

易访问性

1. 缩放支持：所有字号都使用相对单位（rem、em）
2. 层级清晰：不依赖颜色也应能清楚呈现视觉层级
3. 焦点状态：确保文本链接具有清晰可见的焦点指示器
4. 屏幕阅读器：使用语义化 HTML（h1-h6、p 等）

性能

1. 字体加载：使用 font-display: swap，避免文本显示被阻塞
2. 字体子集：仅加载所需字符和字重
3. 可变字体：使用单个可变字体文件，而非多个字重文件
4. 系统字体：考虑使用系统字体栈来提升性能

@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;
}

高级排版

富有表现力的文本效果

可变字体动画：

@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-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;
}

文本截断

/* 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;
}

常见排版模式

卡片标题和正文

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

带副标题的页面标题

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

按钮文本

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

列表项

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

排版实现检查清单

实现 M3 排版时，请确保：

• 将比例中的全部 15 种基准文本样式定义为 CSS 令牌
• 定义全部 15 种强调文本样式（M3 Expressive）
• 已加载 Roboto 或适用的品牌字体
• 有可用的可变字体时使用可变字体
• 设置字体显示交换，以防止加载阻塞
• 所有文本均使用语义化颜色令牌
• 建立恰当的层级关系（display > headline > title > body）
• 谨慎使用强调样式，用于关键时刻和行动号召
• 行高和字间距符合规范
• 针对不同屏幕尺寸实现响应式缩放
• 所有尺寸均使用相对单位（rem/em）
• 文本对比度符合 WCAG 要求（最低 4.5:1）
• 一致地使用字重（基准为 400，标签为 500，强调为 700+）
• 语义化 HTML 标签与视觉层级相匹配
• 长篇内容采用适当的行长（50-75 个字符）
• 所有文本在默认和缩放尺寸下均清晰可读
• 优化性能（字体子集、加载策略）
• 采用中等对比度方案，平衡易读性与表现力

资源

• examples/type-scale.html — 交互式 HTML 示例，展示完整的 M3 字体比例（display、headline、title、body、label），并采用正确的尺寸、字重和行高。在浏览器中打开即可预览层级。
• M3 排版概览：https://m3.material.io/styles/typography/overview
• Material Design 令牌（排版）：https://github.com/material-foundation/material-tokens
• Google Fonts：https://fonts.google.com/