莫b

知识是网状结构的,每个人的知识结构认知是不同的,作者也不能将自己的信息架构灌输给读者,每日小知识可以很好的解决这个问题,对单点进行分析挖掘,首先可以研究的深一点,其实就是在实际设计中的应用,“学有所用”意味着能产生价值,有价值驱动才能走的更远。

字间距和字偶间距

字间距之间选择正确的距离是为了提高文本的可读性和易读性。好的字体都是经过精心设计的字体,都需要精心调整字间距。

字间距(Tracking / Letter-spacing)

字间距是每个字母之间的间隙。

 

词间距(Word Space)

词间距是单词之间的间隙。

图片

字偶间距(Kerning)

字偶间距是经过对特定字母调整后的间距,来让文字视觉上更和谐。铅字时代,字偶间距的调整需要排印工人根据实际情况进行优化调整。到了计算机排印时代,字偶间距的设置是由专业的字体设计师设计完成,并默认内嵌在相应的排版软件中,在大多数情况下并不需要设计者自行调整。

图片

字偶间距训练小游戏

字偶间距训练小游戏是Jan Tschichold在1966年开出的,通过字间距的调整来锻炼设计师的眼力,以及字体负空间留白关系的处理。

https://type.method.ac/#

图片

 

通过调整字间距提高文本可读性

字间距和字偶间距调整是文本设计的基本要素,对文本可读性和视觉效果影响很大。字间距调整是增加或减少选定文本块的间距,而字偶调整是增加或减少特定字符的间距。

在 InDesign 中,可以使用“Character”(字符)面板轻松调整字间距(Tracking)和字偶距(Kerning)。要打开“Character”(字符)面板,请选择 “Type”(文字)>“Character”(字符)。

图片

要调整字间距,首先请选中文本从“Character”(字符)面板的下拉菜单中选择“Tracking”(字间距)值,点击向上/向下箭头,或直接输入一个值(以千分之一 em 为单位)。

提示:可同时按 Option (Mac) 或 Alt (Windows) 键和键盘上的向左或向右箭头,快速直观地调整字间距。

图片

调整字偶距

有时候,相邻文字的间距会由于过大或过小而影响可读性,并在文本行中造成多余的空白。InDesign 提供了三个文本字偶距调整选项:“Metrics”(度量)、“Optical”(光学)和“Manual”(手动)。

其中,“Metrics”(度量)和“Optical”(光学)字偶距调整是由 InDesign 自动完成。

图片

 

InDesign 自动调整

两个自动字偶距调整选项都可以在“Character”(字符)面板中找到。“Metrics”(度量)字偶距调整为默认设置,基于字型内置的字偶距表格进行调整。InDesign 会按照字体设计师的设计自动调整特定文字的字偶间距。

“Optical”(光学)字偶间距调整是根据文字形状调整字偶间距。如果你对“Metrics”(度量)字偶距调整的结果不满意,或者你希望在一行中使用多个样式或大小的字体,“Optical”(光学)字偶距调整会非常有用。

图片

 

手动调整字偶间距

在大标题中,可能需要突出某些文字。要手动调整字偶间距,请将鼠标放在两个文字之间,然后在“Character”(字符)面板中更改字偶距的数值即可。

提示:可将鼠标放在任意两个文字之间,按 Option (Mac) 或 Alt (Windows) 键的同时点击键盘上的左箭头或右箭头,快速直观地调整字偶间距。

图片

 

紧排与宽排

文字与文字的间隔(字距),或是行与行的间隔(行距),关系到文章的可读性与易读性。将字距或行距变小称为“紧排”。一般来说适当压缩字距,可以让整行文字更容易阅读,如果过度压缩就会容易无法阅读。

紧排

“紧排”也能运用在行距上,当行距缩小到比易于阅读的间隔更小后,文字就会无法阅读。“紧排”可以制造出紧张感和密度感,所以“紧排”应该适可而止,不宜过度使用。如图紧排在可阅读范围之内,加上合理的布局让版面更和谐。

图片

 

宽排

文字拉大字距的设计称为“宽排”。“宽排”可以展现轻松柔和的空间感。在儿童绘本的图画书中,常见字与字之间留有足够的空间。古诗词中字距也会适当拉大给人轻松的阅读节奏。

还有在海报、音乐封面中常常把文字当成点来处理,拉大字距营造一个高级优雅的氛围。当然这里的文字不是最重要的信息,如果将重要信息过于形式化而忽略易读性,这会是一个失败的设计。如图版面的主题就采用了宽排,适当的拉大字距让版面有呼吸感,整个界面看上去更加高低。

 

图片

 

字间距在产品界面中的应用

移动端

在产品界面设计中,设计师可能很少去关心字间距,我也请教过资深iOS开发人员,字间距可以定义,但是还是用系统默认的多,很少去改动。

在几个月前微信改版时,我尝试研究过微信改版后的字间距。由于当时找不到汉字的字间距的调整规范,只好运用了最傻的方法,截图然后像素级对照去尝试整理微信APP的字间距的规律。

图片

图片

也整理了iOS系统默认的字间距。

图片

图片

 

从整理的字间距来看,普通都是字号越大,字间距越紧凑。汉字是等宽字体,不同字号的字间距也没有强制的规范。宋朝大书法家苏东波说:“大字难于结密而无间,小字难于宽绰而有余。”意思是说大字要写紧凑,而小字要写的宽松。虽然这是书法理论,但是用于文字排版也一样成立。

图片

如图是微信聊天对话框口的界面,左边是宽度375的一倍图,右边是手机截图的3倍图,左边字号大小16px,字间距为0.65px;右边字号大小40px,字间距为-0.55px。图片和字号等比放大后,字间距从宽松到紧凑了。也是符合书法理论的。

短短几个月过去了,今天再次写这篇文章时,微信、iOS的字号、字间距都重新做了调整,导航栏的标题字号从原来的17px改成了16px,整体页面布局也更加紧凑了。其他很多微信界面的字号都缩减了1px。

图片

我的界面中的「名称」和公众号详情页的「标题」都是21px,但是我的界面中字间距为0.15px,而公众号详情页的「标题」字间距为1px。相同字号运用了两套字间距的规则,由于公众号标题一般文字比较多,适当宽松一点更易于阅读。如果我们对于字间距需要定义一套标准,微信就是最好的标准,用户多,使用率高,界面简洁。微信会根据不同的界面场景去定义对应字间距的规则,其实在「字符」章节中我也提到过。

图片

 

B端、Web端

B端、Web端主要还是参考Material Design的字间距进行定义或微调,毕竟西文字体和汉字还是有一定区别的。

图片

 

总结

字间距没人关心,没人去研究,这样的研究才会跟有意义。时代在变,字库厂商的字型设计在变,人们对事物感知也在变化,好的设计系统应该是动态持续变化的。我们在成长的道路上也是需要学习复杂的系统,学习是痛苦的,也是人一步一步成长成熟的体现。

 

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

作者:水手哥

图片

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

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