autojs toast 可以改变字体颜色吗_Typography英文字体排版基础（上）

对于半路出家的交互设计师来说视觉基础简直就是硬伤，本文会介绍一些英文字体和排版的基础知识来给大家补补脑。

Typography 字体排版

字体排版（Typography）是一种通过安排文字的排列分布来让书面语言变的易认，可读，吸引人的一种技艺。不同的字体（Typeface）都有各自的性格和情绪，能够传达特定的氛围和语气。字体排版的样式需要对应内容本身该有的语气，设计要能强调突出内容。

Typography 和 Lettering 的区别：

Typography：使用现有的字体（typeface）来设计字体排版。

Lettering：设计有特殊用途的单个字体，比如签名。

Typeface 和 Font 的区别：

Typeface：一个字体家族(typeface)是一整个字形设计的集合，里面包括了不同字重（weight）、风格（style）、宽度（width）、意大利体样式（italic）等特征的font。

Font：字形（font）则是指一个字体家族里面特定的一个样式。比如说 Roboto italic 就是字形，而Roboto则是字体。

为什么Typography在交互设计中重要？

1. Typography是品牌设计中的重要环节，它能改变人们对品牌的感受和认知。
2. Typography影响了文字的可读性。人们通常是扫视文本内容而不是读每个单词，所以单词中每个字母之间的间隔（tracking），单词之间间隔（kerning），行距（leading），每行文本的长短都会严重影响内容的可读性。
3. Typography影响了产品的可用性，而可用性是产品设计（product design）的核心。这里就需要考虑有身体残疾，认知障碍，语言或学习障碍，色盲，弱视，或者需要使用屏幕阅读器（screen reader）的用户。

字体解刨学Anatomy

Baseline: 是一根不可见的基准线，所有字母都停靠在这根线上。

Cap height：是指从baseline开始测量的大写平整字母（比如M，N，I）的高度。

x-height：指字体中小写字母 “x” 的高度，x-height反映了一个字体的整体高度。通常x-height 大的字体能增加文本的可读性，原因是x-height 大的字母会有更多的内部空白，比如 “O” 中间的圆形会比较大。

Serif：字母笔画开始或结束时会出现的形状。有这种类似笔触形状的字体叫serif typeface。没有的则叫 san-serif typeface。

Ascenders：小写字母中向上的垂直笔画有时会超出Cap height，比如上图的小写字母“d”。

Descenders: 小写字母中向下的垂直笔画有时会超过Baseline，比如上图的小写字母“p”。

Letter-spacing/ tracking：每个字母之间的间距，和kerning不同，kerning是指每个单词之间的间距。像标题这样字号大的内容通常会缩小字母之间间距来提高可读性。

Line height/ leading：控制两条baseline之间的距离。行距和字体的字号成正比。

字体中的对比度

• 字体对比度首先体现在字母笔画在粗细上的变化。如果粗细变化很大对比度强（high contrast），如果字母笔画从头到尾粗细一致则没有对比度（no contrast）, 如下图：

• 字体对比度还体现在字体颜色和背景色的明暗对比上，这里要提到一个叫WCAG的对比度准则，准则中规定文本内容和背景的对比度至少是 4.5:1。而像标题这种大字号文字（>=18pt）和背景的对比度至少 3:1。有很多能够检测这种对比度的网站，比如：https://usecontrast.com/

• 整体文字排版的密集程度也属于字体排版的对比度，可以通过整个文本会使用多少墨水来衡量。比如一段文字如果都是用粗体排版并且字距行距都很近，那么这段文字会显得颜色深并且很突出，因为它跟背景的对比度很高。

怎么为文本部分选择字体？

• 字体的X-height需要达到Cap height的 60%-75%。如果X-height太高大小写字母会很难分清，如果太低则会影响可读性。

x-height 大的案例

x-height 小的文本可读性低

• 字母周围需要有一定的空间，字母之间间距不能太小，否则字号缩小后字母就混在一起了，不建议手动调整字体的自定义letter spacing/tracking，给文本部分寻找一个本身字距就比较松散的字体。

字母之间间距小会导致字母混在一起

• 寻找一款字母和字母周围面积平衡的字体，在文本排版中如果有一部分文字显得特别密集会影响人们的阅读流，可以通过虚眼睛来看颜色的分布。
• 选择一款counter比较大的字体。counter是指字母中封闭的空白空间，比如下图：

• 字体里是否有不同的字重（weight）字重、风格（style）、宽度（width）、意大利体样式（italic）等特征的不同的font可供选择。

怎么为标题部分选择字体？

很多字体设计细节在文本排版中会丢失，而在标题部分这些细节就能被彰显出来。比如下面这个粗体、字母间隔特别小的长条字体如果放在文本中就混在一起了，而在标题中它不但有可读性，而且其强烈的性格特征十分吸睛。

• 在选择标题字体时可读性还是首要的标准，如果用户阅读标题都有障碍，他们很可能会放弃继续阅读。一个字体的样式设计很棒并不代表它的可用性强。
• 标题字体之间间隔可以稍紧凑。
• 选择有相对短小的ascender和descender的字体，这样能够避免视觉上的断断续续。
• 字体选择要与内容语气吻合。如果文本内容和某一年代密切相关，可以在那个年代较流行的字体中选择。
• 确定了文本字号之后，以倍数的方式再来决定h1-h6的字号。

参考文献：https://material.io/design/typography/understanding-typography.html#type-properties