字体&排版策略

我对界面内文字的要求相当严苛。该分类包含了我在 Web 上的字体特点研究,以及文字排版处理技巧等。随着对文字样式的了解逐渐深入,一些设计策略成为了我的「教条」。


安妮薇时报 Anyway.News 推荐

高级排版功能:Case-Sensitive Forms 是什么?

自从转换到 Figma 工作后,我发现在部分字体下的字体设置里,有一个选项叫「Case-Sensitive Forms」,来回切换后,发现了一些有意思的现象。经过一段时间的查阅资料和实践后,获得了新的认识,遂写下这篇笔记来记录这有趣的现象。

2022-05-14

细数 Pingfang SC 的七宗罪

2019年11月17日,我发布了一篇名为《PingFang SC 不应该作为移动端网页字体的首选项》的文章,这是我目前为止阅读量最大的文章。还记得那时候我刚毕业在屈臣氏的移动电商部门工作,发现了网上流传的 “字体用苹方” 的说法并不靠谱,并写下了自己的看法。

2021-11-07

keep-all 断词换行规则的两个使用案例分享(含实践)

前段时间我对网页的断词换行规则做了一次深入的学习,当时我对一个不常见的规则 word-break: kepp-all; 感到疑惑,想象不到什么情况下该使用它。 这几个月以来我一直带着这个问题来工作,刚好发现了这个规则的两个适用场景,于是写下这篇文章来做记录。

2021-11-07

LIZ设计周报 推荐

Apple 官网里三个令我惊叹的中文排版细节

无论是软件还是硬件,Apple 公司对于细节上面的执着程度可以说无人能出其右。我作为一名设计师,时常也会翻阅 Apple 的官网,拜读、细品,每次都会有点新发现。

2021-08-15

SF Pro SC 是什么字体?

苹果悄悄地在官网上用了一款名为 "SF Pro SC" 的中文字体。下图是在苹果官网截下来图片,你能发现它与我们平常在设计软件中使用的 PingFang SC 或者 SF Pro Display 有什么区别吗?如果想知道其中的差别,请看下文。

2021-07-28

探索 Web 网页内字符的换行规则

前不久在验收公司项目内一个讨论区相关需求时,看到界面的样式出现这种问题,让从业界面设计两年多的我感到意外和不安...这篇文章将会记录我对 Web 网页内换行规则的理解、实际应用中的解决方案,以及一个突破性新发现。

2021-03-14

等宽数字 Monospaced Numbers 在界面中的使用

在上一篇文章的3.2章节里,提到了 AntD 组件会全局默认使用等宽数字。这对我来说是比较新的概念,所以也花了点时间观察、总结了等宽数字在界面上的几个使用场景,以及普遍的实现方式,正好也可以作为文章记录下来。

2020-12-25

Moonvy 月维设计素材周刊 推荐

PingFang SC 不应该作为移动端网页字体的首选项

我在做设计时会经常观察市面上各类应用,途中一个字体使用的问题使我陷入了沉思...

2019-11-17