排版
排版
比例是密度的决策,字体是字体的选择:本页展示的是形状的阅读,而不是今天的价值。切换调试面板中的字体轴,下面所有内容将以另一种字体呈现,而无需更改规则。
字体家族
三种,因为这就是页面所区分的:书写的内容,标题的内容,以及作为打字而非口述的内容。一个集合可以为三者提供相同的字体——系统字体就是这样。
--font-family-base
敏捷的棕色狐狸跳过懒狗 — 0123456789
--font-family-heading
敏捷的棕色狐狸跳过懒狗 — 0123456789
--font-family-mono
敏捷的棕色狐狸跳过懒狗 — 0123456789
字重
以强调程度命名,而不是数字。一个不存在500字重的字体将其映射到现有的字重上,而要求中等字重的形状将继续要求中等字重。
--font-weight-normal — 敏捷的棕色狐狸跳过懒狗 — 0123456789
--font-weight-medium — 敏捷的棕色狐狸跳过懒狗 — 0123456789
--font-weight-strong — 敏捷的棕色狐狸跳过懒狗 — 0123456789
--font-weight-bold — 敏捷的棕色狐狸跳过懒狗 — 0123456789
字体比例
设计系统 — 优秀界面的构建模块
每页使用一次。设定主要上下文。与简短的引导段落配对。
排版建立层次和节奏
章节级别标题。分组相关内容。通常后面跟着正文或子章节。
间距和比例影响可读性
子章节标题。引入章节内的一个集中主题。
颜色和对比引导视线
用于卡片标题、侧边栏部分或小型分组。
交互状态需要明显
标签、元数据标题、小型分组。细微但与正文有明显区别。
可访问性是一个特性,而非事后考虑
最小的标题级别。应谨慎使用——用于脚注、法律条款或辅助标签。