跳到主要内容
全部文章
阅读排版

排版

阅竹编辑部约 10 分钟

排版是指将文字、图片等在页面上调整位置、大小及排列的过程,通过美化布局让内容变得好读又好看!

排版会有非常多的格式设置,例如页边距、字号、字符间距、段落对齐方式、行距、段间距等等。下面分别说明一下:

字号(Font Size),字间距(Letter Spacing)

字号是标识字体大小的数字,实际上字号代表的是一个理论上的方形区域,称为“Em 方框”,而不是字符的实际高度。你可以把它想象成一块金属活字模具的外框,字符的实际高度通常不会完全填满这个方框,实际字高只有 Em 方框高度的 65%~80%。之所以 Em 方框要比实际文字大,是因为字体设计需要为字符的上升部(Ascenders,如字母 h、k、l)和下降部(Descenders,如字母 g、p、j)预留空间,同时还需要在上下方保留一定的空白,以保证上一行的底部和下一行的顶部不会互相碰撞或重叠。

Em 方框容纳字形、上升部、下降部与必要留白。

字母一般对齐在基线,以基线为分割线,上面的部分就是字母的上升部,下面的部分就是字母的下降部。与西方文字不同,东亚文字(如中文)没有严格意义上的基线,所有字形通常坐落在一个方框中。当中西文混排时,排版引擎通常自动将东亚文字放置在有低基线文字的基线与降部高度的中间,以保证视觉上的协调。

中西文共享同一行的基线,视觉重心仍需由字体度量协调。

文字除了基线对齐,也会有顶部对齐、底部对齐等其他对齐方式。一般来说,正文排版必须且只能使用基线对齐,这是保证阅读体验的底线。而顶部和底部对齐则更多用于 App 的 UI 界面设计等。

文字在水平方向上也会有左对齐、两端对齐等方式:

左对齐

阅读器里的正文并不总是只有中文。Font Size、Letter Spacing 和 Line Height 等英文术语会与汉字一起出现,也可能夹着 16px、1.8 倍等数字。遇到较长的英文单词时,浏览器会把它整体移到下一行,因此左对齐的右侧会留下大小不同的空白;两端对齐则会调整字与字之间的距离,让每一行尽量贴齐左右边缘。

两端对齐

阅读器里的正文并不总是只有中文。Font Size、Letter Spacing 和 Line Height 等英文术语会与汉字一起出现,也可能夹着 16px、1.8 倍等数字。遇到较长的英文单词时,浏览器会把它整体移到下一行,因此左对齐的右侧会留下大小不同的空白;两端对齐则会调整字与字之间的距离,让每一行尽量贴齐左右边缘。

左对齐保留自然间距;两端对齐换来整齐边缘。

左对齐是最符合人类从左至右阅读习惯的对齐方式,它能为视线提供一个稳定的起始边缘,且文字排列严谨,间距相同,但是在段落右边会有半个字的空白,导致右侧边缘呈现不规则的锯齿状。

两端对齐是拉伸了文本间距使文字填满行宽,以达到左右两侧边缘都整齐的效果,整体会比较整洁美观,但词与词之间的间距忽大忽小,目前主流小说阅读器都默认两端对齐。

字间距(Letter-spacing 或 Tracking)是字与字之间的距离。标准字间距就是 0,一般不用额外设置,如果设置了字间距,字与字之间会变得宽松,也可以设置负数的字间距使文字变得紧凑。

-0.04em

好的排版让阅读自然发生

0

好的排版让阅读自然发生

0.16em

好的排版让阅读自然发生

同一段文字在紧凑、标准和宽松字间距下的变化。

行高与行间距

“行高”与“行间距”是两个经常被混淆但本质完全不同的概念。简单来说,行高是“包含文字在内的总高度”,而行间距是“纯空白的间距”。

行高按基线到基线测量;图中的行间距表示两行字面之间的空白。

行高(Line Height / Leading)

指的是相邻两行文字基线(Baseline)之间的垂直距离。它不仅包含了文字本身的高度(字号),还包含了文字上下方额外的空白间距。

行间距(Line Spacing)

特指行高之中,除去字号部分之后的纯空白高度。它专门用来决定两行文字之间的间隔大小,直接影响阅读的呼吸感。

它们之间的关系可以通过以下公式清晰表达:

行高 = 字体大小(字号)+ 行间距

举例说明:如果一段文字的字体大小为 16px,你设置的行高为 24px,那么这两行文字之间的纯空白(行间距)就是 24px - 16px = 8px。这 8px 的行间距会被平均分配,一半(4px)加在文字顶部,另一半(4px)加在文字底部,从而在视觉上达到文字在行框内“垂直居中”的效果(这在排版中被称为 Half-leading 概念)。

在设置行高的时候,强烈建议使用字号的相对倍数来设置行高,这样当用户调大字号时,行间距也会随之等比例放大,始终保持舒适的阅读比例,避免文字重叠。推荐设置为 1.6 倍至 2.0 倍行距。行距过小(如小于 1.2 倍)会导致文字重叠,增加阅读疲劳;而行距过大(超过 2 倍)则容易造成文本连贯性割裂,导致视线断层。

段间距

段间距(Paragraph Spacing)指的是不同段落之间的垂直空白距离。它告诉读者:“这一个意义单元处理完了,清空一下,准备进入下一个话题”。

段内使用行高,段落之间使用更明确的段间距。

建议段间距设置为行距的 1.5 倍至 1.8 倍,或固定值 8px 至 12px。小于 0.5 倍:读者可能分不清是“段落间距”还是普通的“行距”,感觉像没分段。而大于 2 倍:读者会觉得段落之间“断开”了,破坏连贯性。

页边距

页边距(Margins)指的是页面边缘与正文内容之间的空白区域。如果说行距和段间距是文章内部的“呼吸感”,那么页边距就是整个版面的“画框”,适当的留白能让版面看起来更加整洁、平衡。

页边距将正文与屏幕边缘隔开,并共同决定一行能容纳多少字。

建议左右页边距通常设置为 1.5 倍到 2 倍文字大小,这样无论用户如何调整字号,边距都会等比例缩放,始终保持合理的单行字数。上下边距略大于或等于左右边距,以保持版面的视觉平衡。