toj:广告印刷_了解印刷术：为网络写作

在Web设计 中，排版的主题在考虑用户体验的所有方面时都很重要。 每个网站都需要文本，并且可以遵循一些准则来构建格外精美的布局。 网格线，字母，字体高度，文本间距，配色方案和其他类似属性都应考虑在内。

在本文中，我想深入探讨网络排版的领域。 我们将研究设计可信的网页文本背后的流行想法 。 在此过程中，我将介绍一些设计师经常忘记的有用CSS3属性 。

我试图将更多的注意力放在Web的理论和意识形态上。 通常，这将更广泛地集中在数字文本上，然后，Web设计人员可以选择要用于哪种目的的样式。 上下文始终是关键，您必须为您从事的每个项目适当地确定它。 考虑将本指南作为参考资料包，其中包含来自全球印刷业创新者的现代网络趋势。

测量你的段落

您无需为这种测量划破码尺。 实际上，与排版有关的度量是指页面上任何给定段落的宽度（水平）。 这不是一个经常讨论的话题，但确实会影响您内容的可读性。 作为一般经验法则，您希望将任何一行的长度限制在75-85个字符左右（不一定包括空格）。

现在，对于某些更宽的布局，这似乎有点过分。 尤其是当您的设计不够流畅并且打算随着用户调整其浏览器窗口的大小而适应时。 您始终可以在主要内容div上设置CSS max-width属性。 以可缩放单位（百分比，ems）而不是像素为单位的编码边距和字体大小将在任何布局中提供这种灵活性。

没有要警惕的最大度量单位。 如何将内容写成单词并将其制成句子比每行的宽度重要得多。 但是请记住，与简短简短的陈述相比，较长的句子更难以阅读。

领先解释

在设计，用你的款措施一起，你也应该考虑领导的想法。 该单词发音为“ ledd-ing”，例如铅笔中使用的铅。 此名称起源于较早的机械排版，在铅字之间放置了铅条。

领导仍然是Web设计中非常重要的概念，与段落度量是紧密结合的。 随着段落宽度的增加，您应该对前导量或文本行之间的间距进行相等的增加。 这些额外的空间使您的阅读更加轻松。

如果要浏览非常紧密缠绕的文本，可能会发现很难只关注一行。 如果是这种情况，请尝试使用CSS line-height属性增加前导量。 您总是希望文本行之间的空间比单词之间的空间大。 否则，您的文本块可能会显示为报纸印刷品，并且浏览起来不太方便。

一种可靠的技术是施加比最初需要的空间更多的空间，并在必要时减少空间。 并非所有文本都是一样的，并且您肯定需要使用不同内部格式的段落，例如粗体字，锚点链接，下划线等。使用一些额外的引号，与其他文本相比，这些更改不会感到失衡。

使用自然字体大小

仍然有少数网站选择使用小于平均字体大小的字体。 11px-12px似乎更像是业务布局的“标准专业人员”。 但是，这些大小并不能帮助正在寻找特定信息的大多数访问者。

通常，如果您不应用任何CSS规则，则网络浏览器默认为16px。 如果布局中有多余的空间可以容纳较大的文本，则即使这也算是有点小。 较大的字体看起来更好，相对关键字更容易浏览。 衬线字体不经常被用作段落材料，但是您仍然可以摆脱它们。 我建议对基于衬线的字体使用更大的文本大小，以提高可读性并引起注意。

响应用户的环境

当您尝试不同的字体系列和大小时，您的内容区域将必须进行相应的调整。 我坚持使用的标准单位是ems，因为它们可以根据可用空间和屏幕分辨率轻松调整大小。 这可以优化用户端最重要的性能。

但是，当您拥有如此灵活的内容时，它会使您的布局容易出现错误的结果。 在某些浏览器中，页脚或侧边栏区域中的内容可能最终偏斜或失去平衡。 否则您可能难以在正文中排列图像或其他形式的媒体。 如果需要固定样式的布局，还有其他一些使用ems的替代方法–但是请尝试两种解决方案，以找出最喜欢的一种。

请记住，固定的宽度和段落大小将锁定设计中的许多设置。 非常适合包含很多固定美学效果的内容-考虑背景图片或大量合适的侧边栏小部件。 这是一个简单的过程，可以在左侧的列中建立流体含量区域，并在右侧固定侧边栏。

基于上下文的样式

主流设计还隐藏了其他一些真正简洁CSS技巧。 具体来说，有些印刷工作会复制一些趋势，这些趋势可以在适当的情况下应用。

许多网页设计师甚至从未使用过文本缩进 CSS属性。 您提供一个值来缩进此规则所针对的任何段落的第一行。 单位遵循标准的文本选项，例如像素，点，ems，百分比……在大多数博客中，这当然不是趋势。 但是在阅读大块文本时，它提供了不错的页面节奏。

还有另一种CSS选择器，称为伪元素 。 这可以针对任何内容选择器的特定部分。 CSS3 ：first-letter伪选择器非常适合在重要段落上创建花式样式。 您可以使用粗体，斜体，甚至更改字体来使每个段落的开头字母（类似于一个童话故事书）更加生动有趣。 看看这个美丽的例子的首字下沉 ，其中包括一些额外CSS代码，你可以利用。

玩字母间距

我敢肯定，我们中的许多人在没有意识到它与CSS letter-spacing属性是同一个想法之前就听说过“ 跟踪 ”一词。 这两个概念是相同的，在印刷术和数字印刷术之间相关。 单位与任意一行文本中字母之间的间隔有关。 这确实适用于标题，甚至适用于网站中的一些较小内容块。

重要的是不要将术语间距与字距调整混淆。 两者都与排版和字母之间的距离有关。 但是，字距调整特别是指单词中2个单独字母之间的距离。 字母间距属性将应用于整个文本元素 ，无论是单词，段落，标题还是锚链接。 当您在尝试新的样式创意时，请记住这一点。

我经常在标题中使用所有大写字母的像素间距/像素点。 这样可以将各个字符分开，并留出一些额外的空间，并且看起来像是非常明确的“标题”外观。 负字母间距在正确的情况下也很有效。 我通常会坚持使用较小的单位，最多为-0.03em或-0.1em。

组合字体

网络排版背后的设计概念当然是一种艺术形式，而不是科学形式。 您可以遵循一些准则，但是没有任何固定的规则可以限制。 这意味着您有很大的自由度来尝试混合和匹配您可以访问的不同字体。

到目前为止，最流行的字体组合包括用于标题和段落内容的衬线/无衬线拆分。 我喜欢同时切换两者，但是更常见的是在标题部分使用衬线字体。 每个字母上的多余标记和笔触使它们看起来像是占主导地位的页面文字更加讨人喜欢。

另外，无衬线字体更干净，更易于在句子中一起使用。 这并不是说衬线字体在段落中不起作用。 实际上，有很多很好的例子 ！ 但是，一个鲜为人知的概念x高度对于区分字体的复杂性至关重要。 通过查看几个单词的基线，您将了解到这些字体如何相互“融合”。

还要注意这些不同元素之间的空间的重要性。 您可能会使用2或3种不同的标题样式，因此每种样式都会有不同的外观。 我倾向于使我的h2 / h3元素更接近下一段，因为这意味着内容之间存在相关性。

当您使用彼此相邻的两个完全不同的字体时，这种相关性特别有用。 我建议每组内容不超过3种不同的字体系列。 进行过多的自定义后，您的单词会混杂在一起，整个页面看起来像是一堆乱七八糟的字体。

结论

我希望这些概念能对复杂的数字印刷术主题有所启发。 作为一名设计师，要真正进入工作可能会很困难，特别是如果整个主题对您来说都是陌生的。 但是，请继续学习，并确保一定要练习！

更多..

以下是与排版有关的更多信息：

• 网页设计展示精美的版式
• 现代网站的更好排版
• 排版快速指南：学习和启发

翻译自: https://www.hongkiat.com/blog/understanding-typography-for-web/