字号

字体历史悠久，在不同的历史阶段字体的度量单位也会有所不同。在金属活字印刷时代，传统的中文活字尺寸以「号」为单位，所以称之为「字号」；在照相排版时代沿用照相机尺寸的单位「级」，故称作「字级」；在桌面排版时代，直接使用桌面排版软件中的「点」（pt）。

在中文排版印刷中依然有沿用「号」的，比如Word软件中就有初号、一号、小一号、二号、小二号、三号、四号、小四号、五号、小五号、六号、七号。

号数制：汉字大小定位七个号数等级，按一号、二号、三号、四号、五号、六号、七号由大到小排列。在字号等级之间又增加一些字号，并取名为“小几字号”，如“小二号”、“小五号”等等。

点数制：是目前国际上最通用的印刷字体的计量方法。“点”是国际上计量字体大小的基本单位，从英文“Point”译音而来，一般用小写“pt”来表示，俗称“磅”。

实际印刷大小中文字号、西文字号（磅数）、像素对照表。

1pt=1/72 inch =0.3528mm

字号选择

印刷排版设计中常用的字号大小有：8pt、9pt、10pt、12pt、14pt、15pt、16pt、18pt、22pt、24pt、26pt、36pt、42pt。

在B端界面设计和网页设计中常使用的字号大小有12px、13px、14px、16px、18px、20px、24px、28px、32px。

谷露B端产品的界面使用的字号如下：12px、14px、16px、18px、20px、24px、28px、32px…

也运用了一个数学公式，int是函数取整。并基于16px=1rem进行等比换算，让字号之间有了比例关系。

Material Design系统中常用字号大小有10px、12px、14px、16px、20px、24px、34px、48px、60px、96px。

在移动端界面在一倍图中常使用字号大小有8px、10px、12px、13px、14px、15px、16px、17px、18px、20px、22px。

苹果iOS系统界面在一倍图常用字号大小有：10px、12px、13px、14px、15px、16px、17px、18px、20px、22px、30px、34px。

微信界面在一倍图常用字号大小有：10px、12px、14px、15px、16px、17px、18px、20px、22px。

字号的大小需要考虑最大值、中间值、最小值，中间值多为主文字体，需要考虑字体的易读性，比如在PC界面中正文多为12px、13px、14px；移动端一倍图正文多为14px、15px、16px。最小值多为8px、10px、11px。最大值根据实际的应用场景，或者按照某种比例关系预留两个大的字号。

产品设计、界面设计的一切都是围绕人来展开的，字体的选择、字号的大小、字间距、行高等都应该依据字体的易读性来做选择。

字号倍率

号数制的优点是用起来简单方便，使用时制定字号即可，不需要关心字体的实际尺寸；缺点是字体的大小受七个号数等级限制，有时候不够用，大字不能用号数来表达，字号之间没有统一的倍数关系，计算起来不方便。（需要注意的是，传统标准铅字的字号大小与设计软件中实际输出的文字尺寸会有一定的误差，这是由于字的倍数计算处理造成的。）

点数制可以很好解决号数制存在的问题，比如字号的倍率关系，字号大小按照1.5倍率进行换算，字号有小数点可以考虑向上或向下取整，当然为了简单也可以偶数取整。

Adobe软件中默认字号为：6pt、7pt、8pt、9pt、10pt、11pt、12pt、14pt、18pt、21pt、24pt、36pt、48pt、60pt、72pt。

常用字号都是基于小的字号，按照1.5倍率进行递增。按照1.5倍率的字号换算如下：

字重

字体组件需要考虑字号比例、字重、行高。在Web界面设计字号大小多为12px、14px、16px、18px、20px、22px。

字重在软件中多用Thin、Extra-Light、Light、Demi-Light、Regular、Medium、Demi-Bold、Bold、Extra-bold、Black、Extra-Black。

字重的不同规则定义以及其对应的关系。

ISO/IEC 9541标准定义的字重名称并不是强制性的，不同的字体厂商会有自己的命名风格，不一定遵循ISO名称规则。CSS规范给出了常规名称和对应的字重数值。苹果的开发文档中将字重细分到14个级别。

font-weight

前端工程师多用数字100、200、300、400、500、600、700、800、900来代表字重。

font-weight的属性值有100～900

和Normal、Bold、Lighter、Bolder。

100～900、Normal、Bold

字体使用九阶有序数值100～900来分别表示不同的字重，字体样式font-weight的属性与字重则一一对应。Normal等价于400，Bold等价于700。

常见字重数值对应的字重描述词语：

100 - 淡体 Thin ( Hairline )

200 - 特细 Extra-Light ( Ultra-Light )

300 - 细体 Light

400 - 标准 Regular ( Normal /Plain )

500 - 适中 Medium

600 - 次粗 Demi-Bold / Semi-Bold

700 - 粗体 Bold

800 - 特粗 Extra-bold / Extra

900 - 浓体 Black ( Heavy )

Bolder、Lighter

Bolder、Lighter表示的字重会继承父级的字重计算而来，Bolder的字重比父级重，Lighter的字重比父级轻。

Bolder、Lighter的字重根据下表计算而来的：

Number

Number介于1和1000之间的值（包括1和1000）。大多数字体具有特定的粗细，而对于可变字体按照某种精细粒度支持一定范围的权重。

对于TrueType或OpenType可变字体，其中font-weight可以是1到1000之间的任何数字。

字体的字重数量

不同的字体会包含不同的字重，我们来看一下主流字体包含的字重数量：

1、Roboto 包含6个字重（Thin、Light、Regular、Medium、Bold、Black）。

2、San Francisco 包含9个字重（Ultralight、Thin、Light、Regular、Medium、Semibold、Bold、Heavy、Black）

3、Helvetica Neue 包含6个字重（UltraLight、Thin、Light、Regular、Medium、Bold）。

4、苹方-简（PingFang SC）包含6个字重（Ultralight、Thin、Light、Regular、Medium、Semibold）。

5、微软雅黑（Microsoft YaHei），包含3个字重（Light、Regular、Bold）。

6、思源黑体（Source Han Sans）包含7个字重（ExtraLight、Light、Normal、Regular、Medium、Bold、Heavy）

7、方正兰亭黑Pro Global，包含8个字重（Extralight、Light、Regular、Demibold、Semibold、Bold、Extrabold、Heavy）。

字重算法匹配

上面提到很多字体字重是不完整的，通常4-6个。这样就会出现样式指定的字重数值在字体找不到对应的字重。这就需要算法匹配。

W3C规范标准中给出的匹配关系如下：

1、当所需字重小于400时，先降序检索小于所需字重的各个字重，如果没有则升序检索大于所需字重的各个字重，直到匹配为止；

2、当所需字重大于500时，先升序检索大于所需字重的各个字重，如果没有则降序检索小于所需字重的各个字重，直到匹配为止；

3、当所需的字重是400时，优先匹配500对应的字重，如果没有则执行第一条所需字重小于400 的规则。

4、当所需的字重是500，则优先匹配400对应的字重，如果没有则执行第一条所需字重小于400的规则。

案例

W3C规范标准中给出一个例子，其中灰色字体是缺失的字重，黑色则是字体拥有的字重。

基于算法规则匹配得出如下结果：

当font-weight: 600时，按照匹配规则第二条得出字重700；当font-weight: 500时，根据匹配规则第四条得出字重400。

标题与正文

当一个字体的字重较多时，我们可以为标题选择较大的字体粗细，为正文选择常规的字体粗细。字体字重的粗细之间的差异可以为读者创建视觉层析结构，可以快速的识别标题与正文。

为了有效的创建视觉层次，标题和正文需要有效的区分，可以选择字重为400的正文与字重为600或700的标题配对。

Medium首页就选用了字重为400的正文与字重为700的标题，整体的视觉对比更加强烈。

Powered by Froala Editor