排版必读，网页设计中的字体层级关系

梳理字体层级是在任何排版中几乎必做的工作。而通过改变字号和字重，可以很好地表示出哪个是标题，哪个是副标题，哪个是重点等。

1.字重

我们先来简单讲一下字重。

（图源网络）

字重即“字体的重量”，这种重量是视觉上的。常见的字重有：Light（轻）、Begular（通常）、Bold（重）等等。

要注意，字重并不是加粗，而是另一款字体。字重是字库里的一个属性，很多主流字体，比如微软雅黑、Arial实际都是一个字族，比如，微软雅黑就包括了“微软雅黑 Light、微软雅黑 Regular、微软雅黑 Bold”三个字体。在网页里引用的时候，我们只需要在<font>标签或style里调用font-weigh属性即可。

但很多字体是并不存在字族的，这时候使用字重来定义就没有意义。在网页中，对这种字体往往只能用<b>（或<strong>）标签来加粗。

2.字号

字号即字体的大小，字体大小呈现差异，我们自然会将其理解为不同级别的内容。

（图源知乎提问）

如上图，作者通过1.5倍这样的倍率，来对字号做了一定程度的规定。但在实际情况下，字号是个比较复杂的问题，因为定义字号的常用标准就有至少4套。

即：标准字号、磅数字号、像素字号、相对字高。（名字我为了方便理解瞎起的，看意思就好）

标准字号常见的为：五号字，font-size:5，<h5>这样的表示。指的是被定义的某个常用字号。

磅数字号常见的为：14pt，font-size:14pt这样的表示。指的是美国标准的磅数，适应的是屏幕的分辨率密度（dpi）。

像素字号常见的为：14px，font-size:14px这样的表示。指的是像素大小，适应的是像素目睹（ppi）。

相对字高常见的为：.9em，font-size=62.5%这样的表示。指的是相对于浏览器默认字体的比例。

在网页中，一般采用的是标准字号。

Font size 1

Font size 2

Font size 3

Font size 4

Font size 5

Font size 6

Font size 7

（如手机看上述表格出现显示问题，请看下图）

（和上一张表格内容一样，方便手机观看）

标准字号实际上是多年使用被提炼出来的，一组常用的字体大小。而实际上这些大小也可以换算成pt、px和em的表示方法，如下图：

（来源：jerekdain）

图内的H1、H2等，表示的是标准的标题级别，在多数网页文字编辑器内存在。

可以看到这几个标准并非完全等比例换算，级别之间也并没有标准的比例关系。

上图为wordpress内的标题级别，使用的即和上图相同的标准。

上图为微软Office的word内字体字号与磅数（PT）的关系，可以看到，虽然和网页的font-size后的编号不同，但是最终的常用磅数却是一致的，比如14pt、16pt、18pt、24pt这些。

那说了这么多，我们该如何去选择字号，才能清晰地表示出字体的层级呢？

（图源知乎提问）

在知乎里我看到大神有这样的思路，即将一个常用字号乘以1.5来得到高一级的常用字号。这是一种不错的观点，至少对于排版新人来说既能方便记忆常用字号，大多数情况下是没问题的。

英文和中文的字量比例是1.5比1，在现在印刷的网格标准中，崇尚1.5这个比例很多时候都是这么来的。顺便一提法语大概是1.7比1。

但还是建议灵活处理，在字号上循规蹈矩，反而会对排版产生副作用。毕竟使得文字呈现层级关系的除了字号和自重，还有颜色、背景色、分割线等等多种方式，不要因为学会了一个方法，就一用到底。

在UI设计中有个传说——使用偶数字号的字体，在显示的时候更清晰——尽管这和传统印刷的规矩并没有共识，但大家都这么做了。P.S.当时的设备普遍性能较差，而现在的高新设备，基本搭载了很棒的字体算法，这种规矩就不存在了。

我举这个例子的目的是说明：在实际排版中，呈现效果比任何规矩都重要。多尝试多探索，进步自然会到来。