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

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

1.字重

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

70822859 - operation, design - 排版必读,网页设计中的字体层级关系

(图源网络)

字重即“字体的重量”,这种重量是视觉上的。常见的字重有:Light(轻)、Begular(通常)、Bold(重)等等。

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

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

2.字号

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

24307719 - operation, design - 排版必读,网页设计中的字体层级关系

(图源知乎提问)

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

即:标准字号磅数字号像素字号相对字高。(名字我为了方便理解瞎起的,看意思就好)

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

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

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

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


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

Standard Font 
StandardItalicBoldCode 
Font size 1Font size 1Font size 1
Font size 1

 
Font size 2Font size 2Font size 2
Font size 2

 
Font size 3Font size 3Font size 3
Font size 3

 
Font size 4Font size 4Font size 4
Font size 4

 
Font size 5Font size 5Font size 5
Font size 5

 
Font size 6Font size 6Font size 6
Font size 6

 
Font size 7Font size 7Font size 7
Font size 7

 

(如手机看上述表格出现显示问题,请看下图)

36762547 - operation, design - 排版必读,网页设计中的字体层级关系

(和上一张表格内容一样,方便手机观看)

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

74904211 - operation, design - 排版必读,网页设计中的字体层级关系

(来源:jerekdain)

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

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

31441763 - operation, design - 排版必读,网页设计中的字体层级关系

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

69874881 - operation, design - 排版必读,网页设计中的字体层级关系

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


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

19095585 - operation, design - 排版必读,网页设计中的字体层级关系

(图源知乎提问)

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

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


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

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

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

微信打赏支付宝打赏

感谢您的支持!

文章来源:卡米雷特的小站www.kamilet.cn)转载请注明出处。

卡米雷特

视觉控&技术控,不断学习中!

您可能还喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注