颜色，空间和排版 - 这些元素是坚固设计系统的基石。它们是建立品牌时专注的独特视觉元素。让我们仔细看看排版 ......
活版印刷
我们之前谈到了尺寸和间距，以及如何使用像REM这样的测量依赖于基本排版测量。这两个概念 - 大小和空间，都是印刷术的家庭成员，并且通常相互依赖。当我们深入研究设置类型时，您会注意到本系列的最后一章与本章的最后一章之间的一些共同主题。
本文的大部分内容侧重于需要考虑的设计决策以及一些技术考虑因素。在构建设计系统时，设计人员和开发人员密切合作非常重要，尤其是在设置排版时。
特点
以太将描述排版的特征分为两类：
1.固有特征是由排版规则本身引导的特征。它们不会根据上下文进行更改，它们包括：- 字体- 大小- 重量- 行高- 字母间距
2.上下文特征可以根据界面中的排版用途和目标而改变。它们包括：- 颜色- 间距（填充，边距）
3.我将添加到此列表中，并根据您的方法，以下特征可能是上下文或固有的，它们包括：- 字母大小写（大写，小写，大写字母，句子大小写，“小上限”）- 字体样式（常规，粗体，斜体或下划线）
字体
品牌可能有需要使用的默认字体。在某些情况下，您可能需要选择更具数字友好性的新字体。例如，苹果公司使用了更传统的字体，如Helvetica，但在2015年，随着Apple Watch的推出，他们发布了一种名为旧金山的新字体。这是专为数字设计的，具有干净，紧凑的形状，细微的圆度和字母之间充足的空间，旨在最大程度的易读性，成为OS X El Capitan的默认字体。
选择正确的字体对于您的品牌标识至关重要。与您的品牌团队合作，确保在指定字体时遵守您的品牌企业标识。
选择一种字体
您需要选择一起使用的字体或一对字体。同样，您使用的字体可能已经由您的企业标识指南决定，因此在决定使用的字体时请咨询您的品牌团队。
规模和大小
以前，在讨论设计系统中的尺寸和间距时，我提到了Elliot Dahl提出的三种一般系统原型。以下是它们如何应用于排版：
1.营销- 旨在讲述具体故事并激励访客在网站上花费时间和/或金钱。更大的字体大小，大小差异更大，导致更明显的字体比例。
2.编辑- 传达大量信息。在这种情况下，字体大小的差异通常不那么显着，与市场营销原型相比，规模的跳跃幅度较小。
3.数据- 旨在解决用户问题，如归档税，管理git仓库或可视化性能指标。由于需要显示大量数据，此处的字体大小通常可以更接近规模，字体大小的比率通常远小于上面提到的其他两种原型。
我们还提到了使用模块化比例的概念，同样可以应用于排版。实际上，关于印刷比例而不是间距，模块化比例通常被更多地使用。我们还讨论了8点网格系统并设置了基本字体大小16px。您可以阅读其中一些原则和方法，并在设置类型大小时使用它们。
Jamie Gilman构建了一个很棒的基于浏览器的工具，值得一试，名为Archetype，它包含了上面提到的许多概念，但专门用于帮助实现以下目标：
·使选择合适的字体配对更容易，更快捷
·节省大量时间为设计系统所需的所有各种印刷元素创建基于规则的样式和间距（所有这些都在查看它们在浏览器中的实际外观）
·只需按一下按钮，即可为新款式生成所需的CSS（为开发人员提供了惊人的时间和精力）
·直接导出到Sketch以用作设计系统文档的一部分
命名字体大小
仅选择字体大小并将其分配给标题
或者将大小分配给标记是不够的。为什么？在HTML编码，从标题标签，以给语义层次的搜索引擎优化，他们并不代表文字大小。
，以给语义层次的搜索引擎优化，他们并不代表文字大小。
您可以
在卡片上以一种尺寸和文章页面使用标题，但以不同的尺寸表示。两者可能具有相同的层次结构，但它们的用例非常不同。
段落也可能需要以不同的大小来表示。通常可能需要三种不同的尺寸，一个常规的段落大小，然后是介绍或引导段落的较大尺寸，然后是脚注等较小的尺寸。
重量
特定字体的权重是字符轮廓相对于其高度的粗细。字体可以有许多重量，从超轻到超粗或黑色。四到六个重量并不罕见，一些字体有多达十几种。
在CSS中，您可以使用从100到900缩放的数字字体粗细值指定除普通和粗体以外的字体粗细（400与正常相同，700与粗体相同）。
通常，较重的字体权重用于标题和标题，较轻的字体权重用于段落。虽然在较小的文本上使用轻量级字体权重时要小心，因为这可能会导致可访问性问题。
对于更精美的排版系统，不是为标题选择一个权重，而是为正文复制选择一个权重，而是花费更多时间为每个不同的标题大小选择字体权重，以最好地补充您的类型的整体层次结构。
在设计系统中使用不同的字体粗细
警告
选择字体粗细时请务必谨慎，添加的每个额外重量都会增加下载大小。
线长
行长度是文本块的左右边缘之间的距离。过长的线条是常见的问题，但它们很容易纠正。较短的线条会对您的布局的易读性和专业性产生重大影响。
较短的线条比较长的线条更舒适。随着线长的增加，您的眼睛必须从一条线的末端移动到下一条线的开头。如果线太短，则文本变得脱节; 如果它们太长，则内容会失去节奏，因为读者会搜索每一行的开头。
数字文本的建议行长度在一行上的范围为50到75个字符。测量理想线长的一个好方法是使用字母表字母，如果字母表在两到三次之间的空间内，则您处于安全区。
在固定宽度12列网格系统上显示的最佳线长
随着移动屏幕的出现，遵守此规则通常会导致屏幕上的文本非常小，这会导致可访问性问题。我发现移动设备上的理想线路长度在每行35到40个字符的范围内。
在将设计系统充实为显示类型的组件时，请记住行长度。
线高
一些现代设计应用程序（如Photoshop）仍然使用术语“前导”，而在HTML和CSS中，该属性称为“行高”。引线，线间距和线高均指同一件事。
行高或行间距通常以字体大小的百分比来衡量。传统观点认为130％-150％的行间距是可读性的理想选择，但即使高达200％也是可以接受的。
完美的线条高度取决于字体本身的设计和大小。没有适用于所有文本的幻数。行高为字体大小的1.5倍是一个很好的起点，然后您可以相应地进行调整。
使用1.5线高度时，使用8点网格系统效果很好。线高8和基本字体大小16完全符合此原则。
有关计算最佳行间距和字体大小的更高级方法，请查看黄金比例排版计算器。
Justinmind.com将整篇文章专门用于行间距的最佳用户体验实践，并使用以下示例：
行间距％作为％实际上应该随着较小的字体大小而增加。这是因为较小的字体已经更难以阅读，并且需要更多的空间以便眼睛轻松跟随。
Justinmind的Tom Clark提出了这6条线间距的黄金规则：
1.目标是大约140％-180％，以获得最佳的可读性和可访问性。
2.将行长限制为70-80个字符。
3.字体大小应至少为16pt。
4.小字体需要更多间距。
5.在拉引号或其他短文本上尝试更紧密的间距。
6.更改字体或字体大小时检查行间距。
字母间距
字母间距是指每个字母之间的间距。字距调整和跟踪也是指这个想法的术语，但是当在网络上使用数字类型时，字母间距是使用的术语。在Web上设置类型时，很少有网页设计师会调整字母间距，但是小的更改会对文本的可读性产生巨大影响。
约翰·D·詹姆森（John D. Jameson）撰写了一篇名为“Letterspacing Type指南”的优秀文章。总之，这是他的建议：
字体大小和字母间距之间的关系非常简单：随着大小的增加，字母间距减小，随着大小的减小，字母间距也会增加。
1.大写字母 -用大写字母增加字母间距几乎总是一个好主意。
2.大文本（例如标题和标题）应减少字母间距。
3.正文文本应具有默认跟踪，或者非常接近默认字母间距。
4.非常小的文本应该增加字母间距。
5.浅暗文本 -在深色背景上设置的灯光类型通常受益于字母间距的小幅增加。
6.字体粗细 -与字体大小一样，字体粗细和字母间距之间的关系遵循一个简单的模式：随着权重的增加，字母间距减小，随着权重的减小，字母间距也会增加。
信情况
全文大写文本- 意思是所有字母大写的文本 - 最好谨慎使用。在正文文本大小中，大写字母 - 或简称大写 - 比普通的小写文本更难阅读。实用排版解释说我们阅读更多小写文本，因此习惯上，小写更熟悉，因此更易读。此外，认知研究表明，小写字母的形状 - 一些高（dhkl），一些短（aens），一些下降（gypq） - 创造了一个多样的视觉轮廓，帮助我们的大脑识别单词。
这并不意味着我们永远不应该使用全部大写。例如，在按钮中使用全部大写可以帮助使按钮在其盒装形状中显得更加对称。
在需要阅读长文本的地方不应使用大写。在诸如用户注意力很重要的选项卡等位置使用大写文本。基本规则是仅在标题，标题或其他文本长度小于一行的UI标签中使用大写字母。
标题案例 -这是将每个单词的第一个字母设为大写的做法。通常，建议仅在标题和可能的标签的情况下使用它。这在视觉上将标题与其他内容分开，这有助于读者知道文章（或其中的一部分）的开始位置。Apple的设计指南推荐了许多UI元素的标题案例，包括警报标题，菜单项和按钮。
句子案例 -对于句子案例，您可以将句子的第一个字母（以及任何专有名词）大写。句子看起来随意，更干净，提高了可读性，没有人抱怨判刑案件导致他们的业务损失。Google的Material Design非常认真地遵循它。
但是，如果你决定处理你的信件外壳，一个关键的问题是如何在整个设计系统中保持一致。
字体样式
我指的是应用于文本的样式; 像粗体，斜体和下划线。
实用排版有关于粗体和斜体的以下内容：
1.大胆或斜体- 认为它们是互斥的。
2.尽可能少地使用粗体和斜体- 它们是强调的工具。但如果一切都得到强调，那就没有强调任何东西。
3.使用衬线字体时，请使用斜体来表示轻柔的重点，或使用粗体表示较重的重点。
4.如果您使用的是无衬线字体，请跳过斜体并使用粗体来强调 - 大多数无衬线斜体字体只是具有在页面上不突出的平缓倾斜。
使用衬线字体时，请使用斜体来表示轻柔的重点，或使用粗体表示较重的重点。
如果您使用的是无衬线字体，请跳过斜体并使用粗体来强调
在下划线时，请专门为链接保留。自Web开始以来，链接上已经使用了下划线，如果您出于任何其他原因使用它们，用户将希望它们是可点击的。
REMs与Pixels
我们在上一篇关于尺寸和间距的文章中谈到了使用REM和像素的概念，在决定使用什么测量方面有一些非常实用的建议。
如果使用REM，请在根元素上设置基本字体大小。在网络上，这将在body标签上。然后，所有其他字体大小将成为此基本字体大小的倍数。您的基本字体大小将始终等于1rem。
示例：如果将基本字体设置为16px，则1rem等于16px。以单位表示，字体看起来像这样：Paragraph= 1rem（16px）Heading 1= 2.5rem（40px）Heading 2= 2rem（32px）Heading 3= 1.5rem（24px）line-height= 1.5rem（24px）
颜色
我们还谈到了在本系列的第2部分中选择颜色。考虑如何将颜色应用于排版。
1.选择基本字体颜色（通常为黑色或接近黑色），然后选择特定用例（如警报消息）的任何覆盖。
2.为链接指定特定颜色。
3.确定组件的特定颜色应用。例如，按钮可能使用基本按钮颜色的色调。
4.考虑需要出现在黑暗和浅色背景上的文本。
学习用户界面的Erik D. Kennedy构建了一个非常容易检查的颜色生成器，这有助于选择与另一种颜色形成鲜明对比的文本颜色。
无障碍
可访问性是确保不存在阻碍残疾人与万维网上的网站交互或访问的障碍的包容性实践。在正确设计，开发和编辑网站时，通常所有用户都可以平等地访问信息和功能。〜维基百科
但是，交通方便适用于更多的不仅仅是网页，需要无障碍所有的数码产品要考虑的，因此，在您设计系统考虑。
整篇文章都充斥着对可访问性的引用。回顾一下，在接近排版和可访问性时，这是一个值得考虑的列表：
1.字体大小- 即正文副本不应小于16像素
2.字体颜色- 始终考虑颜色对比度
3.字体粗细- 即较小的字体很难读取较轻的字体
4.字母间距- 大文本上更紧密的间距和小文本上更宽的间距可以提高可访问性
5.行高- 如果光高设置为100％或大间距如250％，视障人士会发现难以阅读的副本
6.信件- 即不要使用全封装进行正文复印。
结论
与任何设计项目一样，指南和提示是一个入门的地方。在您的设计系统中构建良好的排版实践，以确保正确使用排版，遵守UX和UI原则以及可访问性指南。
更多设计干货，尽在VX爱设计在线设计，回复设计免费拿。