Typography · Design System · iantype.com

Typography排版

展示

系统样例

超大首屏display.heroExpanded

设计清晰的界面
Design with clarity

字号: clamp(4rem, 10vw, 6rem)
字重: 700
行高: 1.05
字距: -0.045em

建立页面最强层级

首屏标题display.hero

设计清晰的界面
Design with clarity

字号: clamp(3.5rem, 8vw, 5rem)
字重: 700
行高: 1.05
字距: -0.045em

用于重要入口

大标题display.titleLarge

设计清晰的界面
Design with clarity

字号: clamp(3rem, 6vw, 4rem)
字重: 700
行高: 1.05
字距: -0.045em

用于页面标题

章节标题display.section

设计清晰的界面
Design with clarity

字号: clamp(2.5rem, 4vw, 3rem)
字重: 700
行高: 1.05
字距: -0.025em

用于大章节

中标题display.titleMedium

设计清晰的界面
Design with clarity

字号: clamp(2rem, 3vw, 2.5rem)
字重: 600
行高: 1.05
字距: -0.025em

用于内容分组

小标题display.titleSmall

设计清晰的界面
Design with clarity

字号: 2rem
字重: 600
行高: 1.2
字距: -0.025em

用于局部标题

标签display.label

设计清晰的界面
Design with clarity

字号: 0.875rem
字重: 600
行高: 1.35
字距: 0.04em

用于短标签

超大标题document.headingXL

界面文字需要清楚、稳定，并适合连续阅读。Interface text stays clear at every size.

字号: clamp(2rem, 3vw, 2.5rem)
字重: 700
行高: 1.2
字距: -0.025em

文档一级标题

大标题document.headingL

界面文字需要清楚、稳定，并适合连续阅读。Interface text stays clear at every size.

字号: 2rem
字重: 700
行高: 1.2
字距: -0.025em

文档二级标题

中标题document.headingM

界面文字需要清楚、稳定，并适合连续阅读。Interface text stays clear at every size.

字号: 1.5rem
字重: 600
行高: 1.2
字距: -0.025em

文档三级标题

小标题document.headingS

界面文字需要清楚、稳定，并适合连续阅读。Interface text stays clear at every size.

字号: 1.25rem
字重: 600
行高: 1.2
字距: 0

局部内容标题

题目document.title

界面文字需要清楚、稳定，并适合连续阅读。Interface text stays clear at every size.

字号: 1.125rem
字重: 600
行高: 1.35
字距: 0

卡片或内容标题

导语document.lead

界面文字需要清楚、稳定，并适合连续阅读。Interface text stays clear at every size.

字号: 1.25rem
字重: 400
行高: 1.6
字距: 0

正文前的摘要

正文document.body

界面文字需要清楚、稳定，并适合连续阅读。Interface text stays clear at every size.

字号: 1rem
字重: 400
行高: 1.6
字距: 0

连续阅读内容

界面文字document.ui

界面文字需要清楚、稳定，并适合连续阅读。Interface text stays clear at every size.

字号: 0.875rem
字重: 500
行高: 1.35
字距: 0

控件与短句

标签document.label

界面文字需要清楚、稳定，并适合连续阅读。Interface text stays clear at every size.

字号: 0.8125rem
字重: 600
行高: 1.35
字距: 0.04em

字段与分类

说明document.caption

界面文字需要清楚、稳定，并适合连续阅读。Interface text stays clear at every size.

字号: 0.8125rem
字重: 400
行高: 1.35
字距: 0

辅助说明

微型文字document.micro

界面文字需要清楚、稳定，并适合连续阅读。Interface text stays clear at every size.

字号: 0.75rem
字重: 400
行高: 1.35
字距: 0

空间受限的元信息

Token

4 个分类

名称	类型	浅色	深色	预览
`semantic.typography.family.interface`界面字体	fontFamily	`ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", "PingFang SC", sans-serif`	`ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", "PingFang SC", sans-serif`	Aa
`semantic.typography.family.code`代码字体	fontFamily	`"SFMono-Regular", Consolas, "Liberation Mono", monospace`	`"SFMono-Regular", Consolas, "Liberation Mono", monospace`	Aa
`semantic.typography.control.sm.size`小控件字号	dimension	`0.8125rem`	`0.8125rem`	Aa
`semantic.typography.control.md.size`中控件字号	dimension	`0.875rem`	`0.875rem`	Aa
`semantic.typography.control.lg.size`大控件字号	dimension	`1rem`	`1rem`	Aa
`semantic.typography.control.weight`控件字重	fontWeight	`600`	`600`	Aa
`semantic.typography.control.leading`控件行高	number	`1`	`1`	Aa
`semantic.typography.display.heroExpanded.size`超大首屏	dimension	`clamp(4rem, 10vw, 6rem)`	`clamp(4rem, 10vw, 6rem)`	Aa
`semantic.typography.display.heroExpanded.weight`超大首屏	fontWeight	`700`	`700`	Aa
`semantic.typography.display.heroExpanded.leading`超大首屏	number	`1.05`	`1.05`	Aa
`semantic.typography.display.heroExpanded.tracking`超大首屏	dimension	`-0.045em`	`-0.045em`	Aa
`semantic.typography.display.hero.size`首屏	dimension	`clamp(3.5rem, 8vw, 5rem)`	`clamp(3.5rem, 8vw, 5rem)`	Aa
`semantic.typography.display.hero.weight`首屏	fontWeight	`700`	`700`	Aa
`semantic.typography.display.hero.leading`首屏	number	`1.05`	`1.05`	Aa
`semantic.typography.display.hero.tracking`首屏	dimension	`-0.045em`	`-0.045em`	Aa
`semantic.typography.display.titleLarge.size`大标题	dimension	`clamp(3rem, 6vw, 4rem)`	`clamp(3rem, 6vw, 4rem)`	Aa
`semantic.typography.display.titleLarge.weight`大标题	fontWeight	`700`	`700`	Aa
`semantic.typography.display.titleLarge.leading`大标题	number	`1.05`	`1.05`	Aa
`semantic.typography.display.titleLarge.tracking`大标题	dimension	`-0.045em`	`-0.045em`	Aa
`semantic.typography.display.section.size`章节标题	dimension	`clamp(2.5rem, 4vw, 3rem)`	`clamp(2.5rem, 4vw, 3rem)`	Aa
`semantic.typography.display.section.weight`章节标题	fontWeight	`700`	`700`	Aa
`semantic.typography.display.section.leading`章节标题	number	`1.05`	`1.05`	Aa
`semantic.typography.display.section.tracking`章节标题	dimension	`-0.025em`	`-0.025em`	Aa
`semantic.typography.display.titleMedium.size`中标题	dimension	`clamp(2rem, 3vw, 2.5rem)`	`clamp(2rem, 3vw, 2.5rem)`	Aa
`semantic.typography.display.titleMedium.weight`中标题	fontWeight	`600`	`600`	Aa
`semantic.typography.display.titleMedium.leading`中标题	number	`1.05`	`1.05`	Aa
`semantic.typography.display.titleMedium.tracking`中标题	dimension	`-0.025em`	`-0.025em`	Aa
`semantic.typography.display.titleSmall.size`小标题	dimension	`2rem`	`2rem`	Aa
`semantic.typography.display.titleSmall.weight`小标题	fontWeight	`600`	`600`	Aa
`semantic.typography.display.titleSmall.leading`小标题	number	`1.2`	`1.2`	Aa
`semantic.typography.display.titleSmall.tracking`小标题	dimension	`-0.025em`	`-0.025em`	Aa
`semantic.typography.display.label.size`展示标签	dimension	`0.875rem`	`0.875rem`	Aa
`semantic.typography.display.label.weight`展示标签	fontWeight	`600`	`600`	Aa
`semantic.typography.display.label.leading`展示标签	number	`1.35`	`1.35`	Aa
`semantic.typography.display.label.tracking`展示标签	dimension	`0.04em`	`0.04em`	Aa
`semantic.typography.document.headingXL.size`一级文档标题	dimension	`clamp(2rem, 3vw, 2.5rem)`	`clamp(2rem, 3vw, 2.5rem)`	Aa
`semantic.typography.document.headingXL.weight`一级文档标题	fontWeight	`700`	`700`	Aa
`semantic.typography.document.headingXL.leading`一级文档标题	number	`1.2`	`1.2`	Aa
`semantic.typography.document.headingXL.tracking`一级文档标题	dimension	`-0.025em`	`-0.025em`	Aa
`semantic.typography.document.headingL.size`二级文档标题	dimension	`2rem`	`2rem`	Aa
`semantic.typography.document.headingL.weight`二级文档标题	fontWeight	`700`	`700`	Aa
`semantic.typography.document.headingL.leading`二级文档标题	number	`1.2`	`1.2`	Aa
`semantic.typography.document.headingL.tracking`二级文档标题	dimension	`-0.025em`	`-0.025em`	Aa
`semantic.typography.document.headingM.size`三级文档标题	dimension	`1.5rem`	`1.5rem`	Aa
`semantic.typography.document.headingM.weight`三级文档标题	fontWeight	`600`	`600`	Aa
`semantic.typography.document.headingM.leading`三级文档标题	number	`1.2`	`1.2`	Aa
`semantic.typography.document.headingM.tracking`三级文档标题	dimension	`-0.025em`	`-0.025em`	Aa
`semantic.typography.document.headingS.size`四级文档标题	dimension	`1.25rem`	`1.25rem`	Aa
`semantic.typography.document.headingS.weight`四级文档标题	fontWeight	`600`	`600`	Aa
`semantic.typography.document.headingS.leading`四级文档标题	number	`1.2`	`1.2`	Aa
`semantic.typography.document.headingS.tracking`四级文档标题	dimension	`0`	`0`	Aa
`semantic.typography.document.title.size`内容标题	dimension	`1.125rem`	`1.125rem`	Aa
`semantic.typography.document.title.weight`内容标题	fontWeight	`600`	`600`	Aa
`semantic.typography.document.title.leading`内容标题	number	`1.35`	`1.35`	Aa
`semantic.typography.document.title.tracking`内容标题	dimension	`0`	`0`	Aa
`semantic.typography.document.lead.size`导语	dimension	`1.25rem`	`1.25rem`	Aa
`semantic.typography.document.lead.weight`导语	fontWeight	`400`	`400`	Aa
`semantic.typography.document.lead.leading`导语	number	`1.6`	`1.6`	Aa
`semantic.typography.document.lead.tracking`导语	dimension	`0`	`0`	Aa
`semantic.typography.document.body.size`正文	dimension	`1rem`	`1rem`	Aa
`semantic.typography.document.body.weight`正文	fontWeight	`400`	`400`	Aa
`semantic.typography.document.body.leading`正文	number	`1.6`	`1.6`	Aa
`semantic.typography.document.body.tracking`正文	dimension	`0`	`0`	Aa
`semantic.typography.document.ui.size`界面文字	dimension	`0.875rem`	`0.875rem`	Aa
`semantic.typography.document.ui.weight`界面文字	fontWeight	`500`	`500`	Aa
`semantic.typography.document.ui.leading`界面文字	number	`1.35`	`1.35`	Aa
`semantic.typography.document.ui.tracking`界面文字	dimension	`0`	`0`	Aa
`semantic.typography.document.label.size`标签	dimension	`0.8125rem`	`0.8125rem`	Aa
`semantic.typography.document.label.weight`标签	fontWeight	`600`	`600`	Aa
`semantic.typography.document.label.leading`标签	number	`1.35`	`1.35`	Aa
`semantic.typography.document.label.tracking`标签	dimension	`0.04em`	`0.04em`	Aa
`semantic.typography.document.caption.size`说明	dimension	`0.8125rem`	`0.8125rem`	Aa
`semantic.typography.document.caption.weight`说明	fontWeight	`400`	`400`	Aa
`semantic.typography.document.caption.leading`说明	number	`1.35`	`1.35`	Aa
`semantic.typography.document.caption.tracking`说明	dimension	`0`	`0`	Aa
`semantic.typography.document.micro.size`微型说明	dimension	`0.75rem`	`0.75rem`	Aa
`semantic.typography.document.micro.weight`微型说明	fontWeight	`400`	`400`	Aa
`semantic.typography.document.micro.leading`微型说明	number	`1.35`	`1.35`	Aa
`semantic.typography.document.micro.tracking`微型说明	dimension	`0`	`0`	Aa

使用

使用规则

页面和组件通过语义或组件 Token 使用这些值。
不要在页面中复制原始值。
浅色和深色主题分别检查实际组合。