网页字体排版:段间距或首行缩进

web-typography-margin-bottom-or-text-indent.png

首先声明:本人非印刷行业专业人士,也非网页设计专业人士,故这系列博文全当我的个人消遣。

写这系列的直接原因是我在 V2EX 上的两个帖子:

  1. https://www.v2ex.com/t/485241
  2. https://www.v2ex.com/t/485842

另,读懂此系列文章无需 HTML 与 CSS 基础,甚至无需任何计算机知识基础。

前言

自写博客一年多来,虽然优秀的文章没有写几篇,但却对 Web 前端的知识了解了一些。这些知识是我博客建设中的有力工具,而作为一个追求完美的人,博客建设中最令人犯愁的莫过于排版。

首先,排版是一个很大的学问,所以在写之前先界定个范围。此系列博文主要是关于网页中文字体排版,什么意思呢?

  1. 「网页」意味着 CSS;
  2. 「中文」意味着不谈英文;
  3. 「字体」意味着不谈页面。

然而,「排版」又受各方面相互影响,所以还是会涉及部分上面“不谈”部分。另外,CSS 的应用已经不止网页,影响也远不止网页,几乎你现在所见的各种中文字体排版都离不开 CSS。因此,可以说此系列适用于与中文字体排版有关的各种,比如:电子书、微信文章排版、Word 文章排版等等。

这里提一个题外话,目前中文电子书的排版简直是太差了,就算你有一部 Kindle,就算你的电子书来自 Amazon,大部分直接打开后阅读效果也是极差。而且,由于排版的不统一导致读者需在 Kindle 上二次设置,但这不是本质的问题,本质的问题是在不同排版的电子书之间切换需重复设置,这实在是太糟了。若无意外,我以后应该会特别写关于 Kindle 上优雅阅读的方法。

此系列博文包括但不限于下面:

  1. 字体的选择及网页上的实现;
  2. 字体颜色及相应背景色;
  3. 段间距与首行缩进;
  4. 行间距与段间距;
  5. 各种特殊样式;
  6. 每行字数;
  7. 标点……

另外,我的一些实践都会在我的这个博客上体现:https://yixiuer.me/

段间距或首行缩进

如果说现在是果,那么历史就是因,网页的历史就是纸质书,所以网页可以从纸质书中找到因。将历史的因果时间轴拉到更前,也就是直接在纸上手写时,这是每个人都有的体验。一个例子,自己书写的标题与段落之间的样式肯定会有所区别,比如标题是居中。为什么标题与段落的样式要有所区别?这不很明显,两个词名字都不同,如果两个外表一样的人在你面前,即使他们名字不同,但你能仅靠眼睛分辨出甲乙吗?

然而,这不是我想要的为什么,我要的为什么不在表层之上的,而是在表层之下,即:为什么两个词名字要不同,又或说为什么要在段落之中另起标题?因为你自己的表达需求,也就是说,无论手写、印刷、网页,字体排版需求都是作者的表达需求的表现形式。这意味着在讨论字体究竟该如何排版前,必须先弄清自己的表达需求,建立基本标准,然后再谈美观,如此字体排版好坏之分才不会太玄学。

接下来正式进入此系列博文第一篇——段间距或首行缩进。

为什么先说这个呢?因为这似乎是网页排版上的空白区,很多网站都是段间距 + 首行缩进,这是没明白分段的本质,在网页常见的段间距排版硬加首行缩进。另外,把这个讲明白了,对本系列的其它方面的理解有很大帮助。

你可能发现买到的纸质书大部分都是首行缩进,但首行缩进在网页排版中却少见,为什么?

  1. 历史原因暂不知道,暂没查阅相关资料;
  2. 网页浏览是滚动的,而不是缓慢的翻页;
  3. 基于我自己的实践,技术上实现太麻烦。

滚动与翻页,这是浏览网页与纸质书的最大不同之处,但这貌似又有着一段历史,目前没查阅相关资料,暂时不写,待补充。

为什么说技术上麻烦?解释之前先了解下网页的相关知识,如下面一段 HTML 代码:

1
2
3
4
<h1>纯文本</h1>
<p>纯文本</p>
<p>纯文本</p>
<p>纯文本</p>

先解释下,<h1>开头的是标题,<p>开头的是段落,后面加上/表示结尾,将相应纯文本包裹住。

如果你之前没有接触过网页,你可能有这个疑问:是「标题」直接写大来不就行了?这就是人脑与计算机的差别了,计算机的处理方式是化繁为简、普通到特殊,分步多流程处理。为什么你在 Word 编辑文字时,只能先输入纯文本,然后再添加样式,而无法直接输入带样式的文本?原因就在这,对于文本来说,无任何特殊样式的纯文本更适合计算机处理,至于样式则靠另外的流程实现。

回到上面那段代码,黑色中文左右的红色英文是什么?正如分辨人要靠不同的名字,英文就是标题与段落在 HTML 中的名字。为什么标题就是h1,段落就是p,还要用<>包裹?如英语中的语法,这就是 HTML 的语法。然而,一段这样的 HTML 代码不会有任何样式,样式要靠另外的流程实现,这一流程有着另一种语法,也就是 CSS,如:

1
2
3
4
5
6
h1 {
font-size: 2em;
}
p {
font-size: 1em;
}

h1p是不是很眼熟,没错,就是 HTML 中的标题与段落的名字,通过不同名字控制不同样式,em是一种长度单位,如常见的m,至于代码中的其它内容与形式,是由 CSS 的语法决定的。上面这段代码的含义就是:

  1. 标题字体大小为 2em;
  2. 段落字体大小为 1em。

将 HTML 与 CSS 写到一起,再加上 HTML 另外的一些语法,就能组成一张基本网页:

test.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 2em;
}
p {
font-size: 1em;
}
</style>
</head>
<body>
<h1>纯文本</h1>
<p>纯文本</p>
<p>纯文本</p>
<p>纯文本</p>
</body>
</html>

显示效果可以点这里在线查看,接下来就是段间距与首行缩进的技术细节。

段间距式:

1
2
3
4
p {
margin: 0;
margin-bottom: 1em;
}

首行缩进:

1
2
3
4
p {
margin: 0;
text-indent: 2em;
}

似乎区别不大,但问题在于浏览器自带的默认样式(user agent stylesheet)就是段间距排版,这就导致一行首行缩进 CSS 代码可能要另外的许多行来弥补,而段间距同样是一行,却无需另外代码。

技术方面就介绍到这了,接下来重点分析段间距与首行缩进的各自特点,以及相应的排版应用。

如上文所言,字体排版需求都是作者的表达需求的表现形式,所以在讨论段间距与首行缩进前,必须先弄清自己的表达需求。

首先,段间距与首行缩进都是处理分段的模式,所以为什么有分段这个需求呢,或者说为什么要分段呢?这好像是小学老师就教过的哈哈,我就不重复了(逃),自行回忆。会写博客的应该有所体会,我个人觉得应该有以下几点需要分段:

  1. 不直接相关;
  2. 是并列关系;
  3. 有一定转折。

就像你想强调一个词时,就用粗体来体现,行文上有这些表达需求,排版上也要将这些表达需求体现。排版上体现这种表达需求的方法就是分隔,也就是打破原有的一字连一字,可以有两种不同模式:段间距和首行缩进。另外一个视角,读者视角,想象下无段间距也无首行缩进的繁密恐惧,分隔后阅读不累。

分段的原因已知晓,接下来两种模式的各自特点:

  1. 段间距排版,段间距大于行间距,间隔较大,结构简明;
  2. 首行缩进式,段间距等于行间距,上下相连,繁密易懵。

在网页中,行间距即line-height,段间距一般用margin-bottom控制。

那么究竟是段间距,还是首行缩进?下面说说我的排版应用建议。

如果是文档、技术文章、新闻、网络小说等等,要的只是将信息迅速传达给读者,果断段间距排版,简明。

如果是逻辑严密、上下文紧密联系的文章,建议首行缩进。怎么说,想想代码的缩进,20 行无空行的一段代码,试试每行之间加上一空行或一 Tab 键 16 空格,阅读效果怎样?(省略一大堆尼玛)

如果是文学类(诗例外),建议首行缩进。怎么说,我一句话评论吧,段间距不如首行缩进优雅。

其实挺好理解吧,可以想象两个场景:

场景一:

1
2
3
4
5
6
7
-----------------------------
嗯,嗯,嗯——

尼玛!?

嗯,嗯,嗯……
-----------------------------

场景二:

1
2
3
4
-----------------------------
嗯,嗯,嗯——
嗯?嗯?嗯……
-----------------------------

最后,想对用了段间距还硬用首行缩进的网站说:你个傻逼玩意!

场景三:

1
2
3
4
5
6
7
-----------------------------
嗯,嗯,嗯——

尼玛!?

嗯?嗯?嗯……
-----------------------------

以上皆为我的个人拙见。

链接

排版:

  1. https://www.zhihu.com/question/27391851/
  2. http://blog-en.tilda.cc/articles-website-design-mistakes/
  3. https://practicaltypography.com/

字体排版:

  1. https://wanderer.tw/簡單做好中文排版/
  2. https://internetingishard.com/html-and-css/web-typography/
  3. https://thetype.com/
  4. https://hanzi.pro/manual/zhangjie_de_bianpai
  5. https://sspai.com/post/45516

网页字体排版:

  1. https://www.voyax.me/posts/59710/
  2. https://blog.coding.net/blog/Web-Fonts
  3. https://segmentfault.com/a/1190000006110417/
  4. http://www.ruanyifeng.com/blog/2014/07/chinese_fonts.html
  5. https://csspod.com/using-the-system-font-in-web-content/

一些我所见排版很棒的博客:

  1. https://yihui.name/
  2. https://mdluo.com/
  3. https://blog.oniuo.com/
  4. https://themes.gohugo.io/theme/newsprint/
  5. https://blog.crimx.com/
  6. https://isux.tencent.com/

还有两个来源请求:

  1. 是一个博客,说法好像是网页上首行缩进有必要没?
  2. 知乎还是哪,说衬线字读起来没非衬线字那么累,反正我被说服了……

本文结束啦感谢您阅读
0%