莫b

每日小知识-字重

莫b 字体教程 1138浏览

在编排设计中基本要素有字体、色彩、图形、图片,版面中字体又可以分为8个用途,分别是大标题、中标题、小标题、说明标题、引文、页码、正文、说明文,字体通过不同大小的字号和字重形成不同信息主次的层级关系。

字体组件需要考虑字号比例、字重、行高。在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的标题,整体的视觉对比更加强烈。

图片

 

原文地址: 水手哥学设计(公众号)

作者:水手哥

图片

转载请注明:学UI网 » 每日小知识-字重

登录收藏
 
你可能喜欢的:
做了5年设计,还是这个设计技巧实用!!做了5年设计,还是这个设计技巧实用!!
绝了,这样做设计上手真的快!!绝了,这样做设计上手真的快!!
每日小知识-字间距每日小知识-字间距
每日小知识-文字跳跃率每日小知识-文字跳跃率
简单实用的设计小妙招,矛盾空间字体简单实用的设计小妙招,矛盾空间字体
字体排版需要掌握的10条原则字体排版需要掌握的10条原则
如何从0到1 做一款字体库如何从0到1 做一款字体库
说文解字(四):字体的表现力说文解字(四):字体的表现力
文字设计原理(三):文字的易读性文字设计原理(三):文字的易读性
快速Get卡通字形设计!快速Get卡通字形设计!