通过13个简单步骤改进网页排版

网络字体几乎在所有浏览器中都得到了本机支持,并且在最新版本的HTML和CSS中实现了越来越多的排版功能,这是一个日益复杂的Web排版的新时代。这意味着网页设计师需要(重新)熟悉经典排版规则 - 但它并不止于此。

虽然印刷排版是静态的,但网络排版是一种流动的媒介。设计师必须解决的不仅仅是学习如何实现特定的外观响应式排版,并能够预测不同浏览器和设备的最终结果。以下是排版的一些基本注意事项,特别是应用于网络。

01.找出你的字体可以做什么

Check your font has all the characters and features you need

检查您的字体是否包含您需要的所有字符和功能

您必须做的第一件事是检查您要使用的字体的功能。所有字体都是相同的,但有些字体比其他字体更平等。Unicode编码意味着字体可以容纳成千上万的字形,而且OpenType字体格式支持许多功能,如小型大写字母,旧式数字,自由连字和上下文替代。

然而,任何字体都只能与构建它的类型设计者一样好。如果设计师忽略了绘制必要的字符或未能编写相关功能的代码,那么这些排版细节有什么用处?创建专业字体需要花费大量的时间和精力,而一些设计师并不准备一直走下去。

这就是为什么在将字体集合到网页设计之前检查字符集和字体的功能非常重要。字体就像工具箱;如果缺少一个关键的工具,你就不会走得太远 - 如果有一把螺丝刀,一把锯子和钳子但没有锤子,那么就不会有很多锤击工作。

02.聪明的子集

字体回退发生在逐个字符的基础上。只要指定字体中缺少字符,回退系统将使用列表中下一个字体的相应字符,然后切换回原始字体。

这种技术可以非常规的方式使用,结果令人惊讶。例如,如果字体的字符集没有旧样式图形,请找到包含它们的相应字体。将其子集,只留下所需的数字,并将其放在后备列表中。然后,文本中的所有数字将设置在旧样式图形子集中,而其余文本将设置为常规字体。这可以防止您必须单独格式化数字,并使您的文本文件远离不必要的HTML标记。

03.弄清楚数字

大多数专业品质的字体都有几组数字,每一组都有特定用途。例如:

  • 表格:每个字符占用相同的空间量,因此它们将在垂直列中排列
  • 成比例的:字符宽度根据其设计而有所不同
  • 老式:数字模仿小写字符的x高度,上升和下降;与混合大小写文本完美融合
  • :意在用于数字事项或与全文字幕组合使用

04.不要假冒款式

web typography: FF Ernestine by Nina Stoessinger

字体:Nina Stoessinger的FF Ernestine

CSS可以让你伪造很多东西。如果您的字体没有粗体变体标签将通过轻微的横向翻译将其渲染为双重来人工加固文本。应用标记为没有斜体样式的字体将以数字方式倾斜字符。由此产生的扭曲字母总是令人沮丧。一般来说,您希望在CSS文件中定义所有文本格式,并尽可能避免本地字符格式化。

05. ...但是当你这样做时,假装好

在字符集中缺少小型大写字母时,与周围的文本相比,它们看起来总是太薄。当类型族具有半粗体变体,或者常规和粗体重量之间的差异适中时,使用较大的重量来调整文本的暗度。不要忘记给小帽子增加一些额外的角色空间。

06.小心复制粘贴文本

有时,您可以在网页中找到带有难以辨认的字符串的单词,其中应该有重音或其他特殊字符。使用UTF-8以外的字符编码从文本编辑软件复制文本时会发生这种情况。字符编码系统映射给定字符集中的所有字形,以便于通过电信网络传输数据(通常是数字或文本)或用于数据存储。

由于HTML与UTF-8一起使用,它会误解来自任何其他编码系统的复制粘贴文本,将特定字符转换为随机字母和符号的奇怪组合。此外,某些内容管理系统不仅会复制文本,还会复制格式,从而导致不可预测的结果。避免这种情况的最佳方法是在简单的文本编辑器中将复制的文本转换为纯文本格式,然后从那里复制并粘贴到CMS中。

07.了解您的HTML实体

web typography: FF Spinoza by Max Phillips

字体:Max Phillips的FF Spinoza

看着你的键盘,你可能没有意识到有多少可用的角色。其中许多都是由HTML实体因此,记住最常见的并且在为网络排版时有一个概述方便,这是一个好主意。

小写字母x与乘法符号不同,商标符号不仅仅是凸起的大写字母T和M,并且浮动的尖锐重音不会对撇号产生影响。有关详细信息,请查看我们的文章每个人都会出现排版错误

08.定义关系,而不是绝对维度

Web上文本的一大优点是可以由用户调整大小。如果文本是以像素为单位定义的,则调整网页大小可能会导致不同文本样式的相对大小出现差异,例如,正文可能会比标题更大。对于标准正文文本大小,在ems中定义所有文本大小至关重要。这可确保相应地调整网页中的所有文本的大小,同时尊重不同文本大小之间的关系。

09.控制换行符

web typography: FF Spinoza by Max Phillips

字体:Max Phillips的FF Spinoza

调整浏览器窗口的大小可使文本列更窄或更宽,最终用户也可以更改文本大小。这可能会让您相信您无法控制换行符。然而,当您超越期望的最终结果并了解您想要实现的目标时,可以引导某些方面。

换行发生在用a包装的段落的末尾

要么

标签。在所有其他情况下,很少插入换行符只是为了让下一个单词从下一行的开头开始,所以使用
谨慎地标记。最常见的原因是将两个或多个单词放在一起。

10.小心谨慎

不间断空格不是HTML中唯一可用的特殊空格字符。 Em空间与类型大小一样宽,创建一个完美的方形分隔符。 En空间是其宽度的一半。在表格材料中非常有用的是图形空间,它占用与字体中的数字一样多的空间,而标点符号空间与点或逗号一样宽。在缩写名称中的点和下一个字母之间可以使用细空格,并且可以在相邻字符中删除短划线。然后是三个每个空间,四个每个空间,六个每个空间......

阅读与字母内部和字母之间的空间一样多,因为它是关于字母本身的黑色。正确的层次结构是字母之间的空间小于单词之间的空格,单词之间的空间小于文本行之间的空格。避免在字母之间添加空格,因为这会导致单词分解并妨碍易读性。明智地增加字母间距仅适用于非常小尺寸的文本。相反,显示尺寸中的文字通常受益于更严格的跟踪,但这里也不过分。

完整的理由会对文本的外观产生不利影响。证明单词适合行长度的过程增加了单词之间的间隔,使得这些单词空间在后续文本行之间变化很大。这使文本外观不均匀,并在某些行中的单词之间产生难看的间隙。合理的左/右边是优选的对齐方便阅读。

除了字符间距和字间距外,行间距也会影响易读性。相互靠得太近的文本行会产生难以破译的密集文本图像。如果相反行间距太大,读者很难在换行后找到正确的下一行。

相关文章:



翻译字数超限