Kerning!坑您~

用户头像
南京/平面设计师/10年前/2983浏览
Kerning!坑您~

昨天刚刚撸得一篇文章,其实想给大家介绍两个游戏来着。对,就是游戏!

但是,对于一个有最求、有气质、有理想的设计类公众号,一定要在快乐的游戏中学点什么…………(捂脸中)………

108a56b0121932f875520f8cc308.jpgcf0e56b012326ac7256cb0d1de7b.jpg

被封面图吸引进来的?

.

.

.

.

.

.

it's OK~~~不用面壁思过的 : )


—————————————————————————————————————————————————


其实今天想给大家介绍两个游戏来着。

对,就是游戏!

但是,对于一个有最求、有气质、有理想的设计类公众号,一定要在快乐的游戏中学点什么…………(捂脸中)………


注意到 A 和 V 当中那一抹娇艳的桃红了吗?那就是今天要讲的一个小小的概念

对!

非常小的一个概念

smaller than smaller

……

那就是「字偶间距」— Kerning(中文读作:坑您)


在字体排印(Typography)领域里面字偶间距是一个基础的概念,它细微但又至关重要~关系到文字、段落的易读性(Legibility)以及美观度等等……


到底什么是字偶间距?

字间距倒是很好理解~

就是字与字之间的距离嘛~

可字偶间距……文字与其配偶的间距?:-O

当然不是咯,文字哪里来的配偶嘛~

其实

简单来说就是

特定的两个字母之间的距离


不明白?

请看下图

f39c56b0129b6ac7256cb0c75ff8.jpg

A 和 W 如果像第一排那样排列,在“尺规作图”的层面上它们是无可厚非的,因为它们彼此的外框紧紧相靠。

如下图

8bc756b012de6ac7256cb066883f.jpg

这样排列确实从数学上来讲是准确的,每个字母按照其字框等距排列似乎就是最完美的做法~

.

.

.

但是,可是,可但是!

有没有觉得浑身哪个部位不对劲??!

有没有觉得你的眼睛和你的灵魂不舒服了?

闭上眼睛感受一下

有没有觉得第一行里 A 和 W 的距离太疏远了?

如果你是这样觉得的

恭喜你

你还可以继续看下文

如果不是

依然可以看下文

因为有……游戏


在西文字母中,还有很多类似 A 和 W 的特殊组合,需要我们去人为调整他们的间距。

请看下图

845556b0130532f875520f844262.jpg

聪明如你,应该看出来这两行文字间距的差异了吧?第一行字间距明显欠考虑。so,这样你理解什么是字偶间距(Kerning)了吗?说白了,就是具体字母具体对待他们的间距。


要把字排列舒服、整齐并不是靠尺规作图那样严格按数字来设定的,因为西文中很多字母的形状差异很大。A 是三角形、O 是圆形的、T 是倒三角形的,所以要让他们排列成文时文字均匀、协调,字间距就必须特殊字母特殊对待。

d27556b0133632f875520ff2e5ff.jpg


—————————————————————————————————————————————————


Tips :当我们说到字体设计,特别是字库字体设计的时候,在西文体系下,不是光光设计26个字母大小写(语种不同,也可能不是26个字母)加上数字和常用标点符号就可以的,设计师们需要抽出很很多精力和时间来设置字偶间距,尝试不同的字母排列时他们的间距是否协调(产生“字距对”,大多数字体有其固定的200-500种字距对。高质量的字体也有超过上千种的字距对。)这个工作量是巨大的,比设计字形本身大得多,然而又是隐性的。


—————————————————————————————————————————————————


回到本文顶端,看看字母组合 AV ,尽管 A 或 V 侵犯了对方周围的一些空间,但这样做却使得它们看起来协调、舒适。

834d56b013cc6ac7256cb01ca566.jpg

所以,你现在应该有足够的底气来抨击上图那个画框里的设计了!

请不要说“这里或那里感觉不舒服、不对劲”这么业余的话了,实际就是因为它没有正确的……字偶间距!


……等等!

讲了这么多,都是用西文举得栗子

汉字存不存在字偶间距这个概念?

答案留给大家去思考吧。


—————————————————————————————————————————————————


Tips 2:对于西文字体来说,字库(Open Type)是含有字偶间距的信息的。就是说,你只要正常输入文字就可以了(不用手动去调整字偶间距),显示出的字母、单词、段落都是有正确的字偶间距的。你可以理解为电脑自动帮你把字偶间距做好了。


—————————————————————————————————————————————————


但是,如果你使用中文字库去输入英文,就要小心了。很多中文字库中的西文字符是没有做字偶间距设置的。

见下图

153856b0141432f875520fd22ed4.jpg

So,输入中文选择中文字体,输入英文选择英文字体才是安全(妥协)的做法。




游戏终于来了!



没错,他们是关于字偶间距的

有两个~

第一个是移动端APP: TYPESPACE(iOS版免费,安卓的不知道…没安卓机啊……)

界面截图:

df3756b014416ac7256cb08c18b3.jpg扫二维码免费下载

7e1f56b0149c32f875520f46ba4e.jpg


第二个是网页版游戏(强烈建议用台式电脑玩这个游戏,在手机端上网页宽度显示不全,玩不了)

cf4156b014bc32f875520f5e13bf.jpg

链接:http://type.method.ac/#


这两个游戏都很有趣也很简单,但想得高分不容易。玩一下这两款游戏,会使你深刻理解 Kerning,绝不坑您~

希望您玩得愉快~学得开心~


—————————————————————————————————————————————————


一些观点,与各位求学中的同学分享~

1、相信眼睛而不是数字

2、字体学习要更多去关注排印、应用,而不仅仅是字形,这点很重要!

3、平面设计是(很)基(重)础(要),所有视觉设计都需要有她的支撑

4、软件只是工具,更多的精力应该放在设计方法、原理和眼界上

5、祝大家新年愉快!猴年大吉大利!

ps:文中如果有没说清楚的地方,欢迎线上交流探讨。


—————————————————————————————————————————————————


如果觉得本文对你有帮助,请转发、请点赞。

时间不早,要晚饭了~年后再见!


⬇️

55
阅读原文
|
举报
|
39
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
金色颗粒质地的平面
平面插画设计女孩喝咖啡
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
平面设计风格的粉色草莓味马卡龙
“知识宅急送”外卖,快递,平面,海报,素材,教育
古风平面仕女与瓷器
海底世界插画
空的平台平面和自然景观
平面男孩喝咖啡插画设计
平面风格黄绿色系花朵装饰
金色颗粒质地的平面
平面书法字手写
城市园林平面布局航拍
牛奶乳液层次梯田平铺平面
中秋节可爱呆萌平面兔子蛋黄月饼贴纸素材
金色颗粒质地的平面
金色颗粒质地的平面
城市园林平面布局航拍
水蜜桃和李子的平面水果图案
城阙凡花
中国传统纹样创新图案设计
平面插画情侣/矢量
平面花卉图案扁平简约无缝拼接插画
平面设计 吊牌设计
牛奶乳液层次平面平铺平面
你可能喜欢
大家都在看
登录注册