Likee 可变系统字体

这个是正在推进的一个项目。这是可变字体，主要用在likee APP 的界面里面。现阶段正在调试与修改细节，部分公关宣传、周边物料已进行运用当中～

通过这个项目，我总结了一些关于可变字体的规律，并总结了一篇文章：

【腾讯文档】简单的编程语言与字距规律
https://docs.qq.com/doc/DS2xYbUdEYnRQQVBI

我们先拿出 Likee 的原生 logo 作为比对，首先，我们对于这款字体的定位是正文字体。所以用 logo 的字体去进行延展显然是不可行的，太具有个性的字体并不适合大篇幅的去使用。所以我们需要把这款字体做成既有 Likee 的感觉，又能够适配到大篇幅的阅读需求。

同时，又是由于这款字体是需要大篇幅阅读，所以我们将 Counter 设计的更加开阔，保证在阅读当中不会太过于疲劳。并且，开阔的 Counter 空间在文字缩小的时候更不容易糊掉，导致识别出现困难。

首先我想在这里陈述一下我们开展这个设计的思路。我们做西文字体可不是直接从A开始设计的啊，当然是有一个规律在这里的。所以我们通过查阅资料还有总结，得出这样一个设计的顺序：

接下来当然就是开始进行 n 的设计啦～首先我们要确定风格，第一个 n 字定下来，那么风格基本上就走了大半了。我们可以看看下图的 Noto Sans Symbols ，他的小竖竖和右边的圆弧曲线是相交的。而我们的字体是希望它的几何感更强一些，更加规整，相对而言更加对称，所以我们会选择让他平滑过渡，看起来更加工整一些的！

然后的话，为了避免字体缩小的时候相交的位置糊掉，所以我们选择留出3个单位的空间，让他稍微不那么重。

我们的 n 在前面的段落中已经定下来是平滑过渡的，所以，凡是有这种相接方式的字母，我们都会这么去处理，然后问题就解决一大半了！

然后我们就来统一这些圆圈的弧度，当然是不可能一毛一样的哦，视觉调整是设计师独有的能力，AI智能无法替代哦！

然后我们再根据 n 来把升部确定下来。

非常丝滑～定下来升部之后就可以铺开来设计～

继续推进！我们把这些有圆的结构的字体都延展一遍，尽量让他们感觉相近，并且保持平衡～

上面的任务完成！我们开始做大写字母！又是一波丝滑的延展～

好了，接下来就是一些成果的展示了！我们来看下整体的效果是怎么样的：

这是不同的字重的一些展示：

关于我们选择怎么样去做小写 a ，我们是这样去考量的：

还有这个 s、g、e 的切口角度问题，在推进设计的时候，团队里的小伙曾经提出过疑问，就是这几个切口会不会是统一都是平切或者斜切？事实上，我们通过寻找一些案例发现，其实不是一个规定死的规则，他是可变通的，根据实际情况去比对，才能得到一个相对满意的答案。

还有这个 f ，我们很容易掉入到凡事都要对齐的圈套里面，一不小心这个升部就要和横线对齐，看起来就容易倒了。事实上，做字体和做图是一样的，都是需要视觉调整的。下面两个就是非常生动的例子。

然后我们就要开始调整字距（对了，做可变字体比较有难度，我后面会专门开一篇文章，讲讲我是怎么去克服这个困难的）

我们把这些标点设计的比较靠居中（当然不是完全居中）因为我们的 APP 里面有很多这种场景，比方说用户 ID 什么的，所以我们把它重点拿出来设计。

这是一些在端内使用的一些场景：

包括这些数字的设计，也是经常出现的：

这里面其实有一些争议的部分，为了避免大家产生疑问，我在这里先解释一下。就是大家会发现这里面的 e ，封面上是正的，正文部分有些地方是斜的。因为我们品牌小组在设计这个字体的时候，更多的去考虑到他的品牌性格和识别度，恰好一个微微倾斜的 e 可以去作为他的视觉记忆点。但是这当中与 UI 的同学有一些讨论，就是是否需要这么重的一个记忆点，所以这一关键点也是我们讨论的一个点，因为项目还没有正式结束，还在不停的调整，所以上述的设计都一直在变化当中，这就是设计的有趣所在，我们不同的探索，不同的讨论，一边工作一边学习，能够学到更多书上网络上都找不到的知识～