WSG7/9(2)

第九章
印刷术

良好的印刷术通过提供视觉标点符号和图形口音，帮助读者理解散文与图片，标题和下属文本块之间的关系，从而建立了在页面上呈现散文的视觉层次结构。良好的网页排版对这些关系进行编码，并适应不同的使用环境。

Web排版的特点
网页排版与印刷排版有几个明显的区别：

编码语义：使用网页印刷术，层次结构和关系被编码成文本，这样信息就可以通过编程方式获得，并且可以通过诸如文本到语音软件的阅读工具读取，如屏幕阅读器，可以大声阅读网页; 以及搜索和检索索引文件的软件，如搜索引擎。
适应性显示：文本的可视显示取决于许多变量，例如用户设置，使用环境，使用的设备和视口的大小。良好的网页排版适应这些不同的环境。最终，最好的页面是那些可以很容易地被用户展示的页面，其设计可以满足他们的需求和偏好。印刷设计尤其如此，因为在最佳可读性和易读性方面存在着这样的差异。

语义
通过讨论语义标记来开始关于网页排版的章节似乎是违反直觉的，但印刷术是视觉语义学 - 使用视觉编码来传达结构和意义。在网络上，我们可以将结构和含义编码为文档。通过语义标记，我们以可视化和编程方式描述内容结构，以便更有效地与更多用户进行交流。我们还使用语义来提供额外的体验层次，并仅通过视觉方式进行连接。例如，我们可以通过从文档中提取标题并以大纲格式提供文档概览来创建目录。

中性空间
中性空间是我们用来描述元素如何相关和排序的属性。
我们可以使用语义标记来编码特定元素的目的，并描述页面内容的信息层次结构。例如，切分标记是围绕内容块编码中性空间的一种方式，为内容提供了一个边界并给它一个描述性标签。

信息等级
我们使用印刷惯例来传达内容元素之间的关系

例如，我们在单词，短语或段落的列表中的每个项目前面放置了一个项目符号字符，以直观地显示项目是相关的，并且通常它们是与列表之前的内容有关的特定细节。另一个常见的例子是标题后跟一段。我们使用更大的粗体文本在视觉上标示标题。正如在本书中，我们经常有一个标题层次体系，包含页面标题，章节标题和小节标题。我们通常通过标题的大小和位置来直观地表达这些内容。页面顶部的大标题可能是所有页面内容的标题。部分标题较小，分散在整个页面中，部分标题更小。

我们还使用印刷术来强调个别元素，使其突出显示为不同或特别重要。一种方法是用粗体或粗体设置单词或短语，使其与周围环境脱颖而出。我们可以使用语义标记来区分周围内容中的单词或短语 - 例如，将作品的标题标记为引用。

image.png

使用样式表进行调整
Tim Berners-Lee最初的互联网概念是创建“可直接或间接通过机器处理的数据网络

结构逻辑和视觉逻辑之间的这种划分是通过引入级联样式表或CSS来调和的。使用CSS，网站可以同时包含编码和视觉结构和含义。样式表为网页设计师提供了管理复杂网站的两大优势：

内容和设计的分离：CSS为站点开发人员提供了两全其美的方法：反映信息逻辑结构的内容标记，以及明确指定每个html元素外观的自由。
对大型文档集的高效控制：CSS最强大的实现允许网站设计人员通过修改单个主样式表文档来控制成千上万页的图形外观。

媒介关注设计
作者使用媒体发布故事的经验集中在使分享想法，故事和想法的活动没有分心（参见Medium的简化编辑工具栏，图9.4）。但最重要的是，Medium非常关注如何确保文稿的最佳效果，以及可爱的设计和印刷设备上的印刷效果，甚至在纸张上（请参阅网站Printing Medium Stories）。

效率
如果您曾经使用过页面布局或文字处理程序的“样式”功能，您将会理解CSS背后的基本思想。字处理器的样式功能用于确定标题，子标题和正文副本的外观，然后在将样式应用于每个元素时对文本进行格式化。一旦所有的文本都被设计好了，只要改变它的样式信息就可以改变每个元素出现的样子。例如，假设您将标题1的元素设置为Times New Roman。如果您改变了主意并希望使用其他字体，则只需更改标题1样式，然后文档中的每个标题1就会更改为反映新字体。CSS以相同的方式工作。如果您有一个主控样式表控制网站中每个页面的视觉样式，

一致性

用户偏好

在实践中的Web排版
对于内容编辑来说，重要的是要利用好的文本标记实践，以便开发团队的精心设计和设计的语义和视觉印刷正确地应用。意即：

使用文本编辑器中提供的语义标记选项：表格的标题，列表，引号以及列和行标题。
不要使用特定元素来实现视觉效果。例如，不要根据其显示方式分配标题级别。而是分配与信息层次结构中标题位置相对应的级别。
避免使用演示文稿选项，如大小，字体和样式（粗体，斜体，下划线），特别是在存在语义选项时。例如，请勿使用字体大小和样式设置将部分标题设置为较大和粗体。相反，使用格式菜单选择适当的标题级别，并让标题显示在CSS中指定。避免设置文本的颜色选项。颜色很棘手。选择与页面上的其他颜色不协调的颜色很容易，更糟糕的是，这种颜色不能提供足够的对比度，从而导致视力障碍人士遇到问题。让你的文本继承开发团队提供的样式。
避免使用文字字符作为视觉目的，例如箭头的括号，边框的垂直条或管道，子弹的星号。屏幕阅读器软件会说出提供的任何文字，并会说出该字符（例如，“主页竖条关于竖条联系我们”）。
一段时间后不要放两个空格。期。

版式设计的元素
良好的排版取决于一种字体与另一种字体之间的视觉对比，以及文本块，标题和周围的白色空间之间的视觉对比。

当您的内容主要是文本时，排版是您用来在页面上“绘制”组织模式的工具。读者首先看到的不是页面上的标题或其他细节，而是页面的总体模式和对比。通过精心组织的文本和图形页面建立的常规重复模式有助于读者确定信息的位置和组织，并提高易读性。不规则的排版和文本标题使得用户很难看到重复的模式和逻辑内容组。混乱使得很难预测信息可能位于不熟悉的文档中的位置。

显示类型
实体文本的网页难以扫描内容结构，并且不会引起人们的注意

对齐和空白
边距通过将主文本与周围环境分开来定义页面的阅读区域。
因为网页内容必须与浏览器本身的界面元素以及其他窗口，菜单和图标共存的用户界面。

边距和空间可以用来描绘其他页面元素的主要文本。

对齐的文本
对齐的文本与左右页边齐平。合理的文本块创建实心矩形，标题通常以对称，正式文档为中心。在印刷中，通过调整单词之间的空格和使用单词连字符来实现调整。页面布局程序使用连字典检查并在每行末尾应用连字符，然后调整整行的字间距。但即使使用复杂的页面布局软件，合理的文本块通常也会因空间不足和过多的连字符而受到影响，并且需要手动优化才能避免文本中出现空白的“河流”。

现代浏览器通过字间距和连字符支持对齐的文本，但结果不是最佳的或一致的。必要的精细间距调整是不可能的，并且没有定制和改进连字选项的选项。窄列可以在字母和单词之间留出大的空间，特别是放大文本。在可预见的将来，如果您设置了文本对齐，则Web文档的可读性将会受到影响。

居中且右对齐的文本
居中和右对齐的文本块难以阅读。

左对齐的文本
左对齐文本是网页最清晰的选项，因为左边距是均匀且可预测的，右边距不规则。与对齐文本不同，左对齐不需要调整字间距; 间距的不平等落在线条的末端。由此产生的粗糙的右边距增加了页面的多样性和趣味性，而不会降低易读性。

标题对齐
左对齐文本的标题也应该左齐。

线路长度
最好的方法是使用灵活的单位来指定文本块的宽度以及适应不同文本大小以及不同设备的响应式布局

领导
领先是文本块中的垂直空间，即文本的基线到下一个文本的距离。
网络上，我们建议更慷慨的导致补偿更长的线路长度。使用相对度量，例如ems或百分比，设置相对于文本大小的前导。

缩进
缩进的段落对于较长的散文块尤其适用，其中缩进信号指示新段落对文本流的干扰最小。相比之下，段落之间的空行间距使得页面易于扫描并为视觉缓解提供额外的空白空间。只要风格在整个网站中一致地实施，任何一种方法都是有效的。

字体大小
可扩展的文本对于普遍可用性的目标至关重要。为确保可伸缩性，请使用相对单位来控制页面上的排版类型大小，边距和缩进量。我们建议将正文文本设置为在用户浏览器设置中定义的默认文本大小，并使用相对单位（例如ems或百分比）设置所有文本变体（例如标题，标题和链接）。

响应式排版
在使用灵活单位（例如百分比或ems）设计的响应式布局中，当用户使用浏览器缩放功能放大文本时，所有文本，控件和布局均可调整为较大的文本大小。布局将在不同的断点处进行调整，就像在桌面或智能手机上查看时一样。并且帮助可读性的印刷设备（如线条长度和线条高度）可以适应文本大小和布局，从而提高较大尺寸的可读性。

重点
如果您想要引起对文档中部分标题的注意，请勿将它们设置为粗体，粗体和全部大写。如果你想让它们变大一些，可以增加一个尺寸。如果您更喜欢粗体，请将头部放在与身体文字相同的位置，并使其变为粗体。你很快就会发现，只需要很小的变化来建立视觉对比。

斜体
例如，当列出书本或杂志标题时，或者在文本中使用重音或外来单词和短语。避免以斜体设置大块文本，因为斜体文本的可读性远低于相对大小的罗马文（“普通”）文本。

胆大
粗体文本给予强调，因为它与身体文本的重量形成对比。部分小标题以粗体显示。粗体文本在屏幕上是可读的，但大块设置为粗体的文本缺少对比度，因此失去效力。

下划线
除了它的美学缺点（太重，干扰字母形状）之外，下划线在网络文档中具有特殊的功能含义。大多数读者的浏览器首选项设置为下划线链接。此默认浏览器设置可确保具有单色监视器或色盲人员可识别文本块内的链接。如果您的网页上包含带下划线的文字，它肯定会与超文本链接混淆。

颜色
您应该避免在文本块中放置彩色文本，因为读者会认为彩色文本是超文本链接并单击它。使用颜色强调时，请记住，有些用户无法区分颜色。使用不带颜色的其他视觉重点，例如标题为粗体，链接为下划线。

另外请确保页面背景和文字之间有足够的对比。

首都
大写文本是增加印刷重点的最常见和最不有效的方法之一。通常应该避免在所有首都设置的词 - 除了可能的简短标题外 - 因为它们很难扫描。

我们建议您在标题，小标题和文字中使用简体字输入法（仅限第一个单词和任何专有名词）。羽绒风格更清晰，因为当我们阅读时，我们主要是扫描单词的顶部。注意阅读同一句的下半部分要困难得多。如果您在标题中使用首字母大写字母，则会破坏读者对单词表格的扫描。

间距和缩进
改变一段文字的视觉对比度和相对重要性的最有效和最微妙的方法之一是将其与周围文本区分开来或区别对待。如果您希望主要标题在不增大尺寸的情况下突出显示，请在标题前添加空格以将其与以前的任何副本分开。缩进是区分项目符号列表，引语或示例文本（如上面的大写示例）的另一种有效方法。

字样

字体的术语

类型的大小

字母间距和字距
处理网页排版的两项关键技能是使用CSS的字母间距和字距。字母间隔最常用于提高所有大写字母组合的易读性，字母之间更大的间距有助于眼睛区分大写字母相对单调的形状。一般来说，全部大写字母的所有实例都应该使用CSS提供一些额外的字母间距（例如：）h1 { letter-spacing: 2px; }。

克宁是调整各个字母之间的空间，当您在页面设计中使用大型“显示”字体时，这一点尤为重要。当两个相邻的字母看起来相距太远时，使用克宁来改善类型的美学，留下一个尴尬的间隙，扰乱了该类型线条的平滑流动和节奏（图9.17）。您可以使用CSS letterspacing属性的负值将特定的字形对拉到一起，以改善显示类型较大的标题的外观。

改编的传统字体
如果您需要在很小的空间打包大量文字，Times New Roman的紧凑信函尺寸也是一个不错的选择。

专为屏幕设计

其他媒体的字体

选择字体
并且不要在页面上使用两个以上的字体（一个serif，一个sans serif）。

指定操作系统字体
浏览器会检查每个字体的存在（按您提供的顺序），因此您可以在浏览器应用默认字体之前指定三个或四个替代字体，例如“Times New Roman，Georgia，Times”。作为失败安全的努力，您可以用通用的字体名称来结束您的字体声明，如“serif”。​​这样，如果浏览器找不到任何列出的字体，它将以可用衬线字体显示文本：

p { font-family: “Times New Roman”, Georgia, Times, serif }

Times New Roman等多字字体名称必须出现在规范中的引号内
在下面的字体示例中，虽然“Trebuchet”和“Trebuchet ms”是相同的字体，但您在字体列表中指定的确切名称很重要。如果您希望Macintosh和Windows用户都能看到字体Trebuchet，请在字体声明中使用这两个名称：

p { font-family: “Trebuchet MS”, Trebuchet, Verdana, Arial, sans-serif }

确保您的类型设置正常工作的一种好方法是将浏览器的默认比例字体设置设置为明显不同于预期字体的设置。例如，如果您不在文档中使用Courier，请将浏览器的默认字体设置为Courier。当您查看您的页面时，任何出现在Courier中的内容都不得正确标记。

使用基于Web的字体和CSS @ font-face元素

Google，Adobe和Font Squirrel都提供一些免费的字体。谷歌巨大的（和不断增长的）网络字体库完全免费使用。

免费使用各种主流和装饰字体的优势显而易见，但在Web工作中使用太多Web字体会带来一些重大的美学和性能劣势。

Web字体的性能影响
大多数网络字体都需要从Google字体这样的来源中进行引用，因为您的网页会加载到阅读器的浏览器中，而像Google字体这样的标准网络字体可能每个都是30-50 Kb，或者是大小适中的图形以jpeg格式。它并不需要太多@font-face在您的页面加载之前请求会明显变慢。已经包含许多图像的页面加载速度特别慢，并且如果您还使用符号字体为页面设计提供图标图形，则加载速度会进一步放慢。这并不意味着你不能在你的设计工作中使用多种字体，但是如果你的网页已经加载了图形内容，你可能需要不断地进行在线速度测试，如Google的PageSpeed或Pingdom（tools.pingdom.com ）以确保您了解Web字体工作的性能影响。

印刷美学
如果您不是制作印刷决策的设计师，请注意以下几点：

保持简单，并在您的网站中使用不超过两个字体。通常这意味着为您的主要标题选择一种字体，并为您的主要文本块添加对比字体。设计师通常会为标题和主要标题选择一种无衬线字体，为主要文本块选择一种衬线字体，或者反之亦然。选择一种方案或另一种方案，不要添加更多字体。有几种serif / sans serif组合系列可以很容易地协调您的字体。Adobe的Stone系列无衬线和衬线的面孔被设计为与Adobe的Myriad和Minion面临的完美结合。
不要卷入无休止的（无意义的）关于衬线字体还是新衬线字体更清晰的辩论 - 没有可靠的数据来支持这么简单的命题。在这两个类别中都有奇妙的serif和sans serif字体，以及可怕的字体。
留在主流。使用熟悉并且被广泛使用数十年的字体，因为它们经受了时间的考验，不会让您难堪。像乔治亚州，泰晤士报，仆从，帕拉蒂诺，古迪和加拉蒙等Serif字体支柱都很漂亮，功能也很强大。像Myriad这样的Sans Serif字体（在本书中使用），Arial，Helvetica和Syntax在所有正常字体大小下都非常清晰。
不要使用装饰，快乐，偏心或显示字体。永远。句号。
建立一个简单的视觉和印刷“词汇”，并坚持下去。在每一个严肃的项目中，都会遇到你没有预料到的挑战，以及似乎需要添加新类型处理，异常大或小尺寸或其他印刷异常的情况。每位有经验的设计师都知道，坚持使用您的程序和您选择的工具几乎总是最好的，并根据这些基本规则来思考问题。这样，每次出现新的挑战时，您都不会试图用独特的图形或字体来“翅膀”。