前端的UI设计路 -- 文本

前言

文字作为信息传递的最重要途径，其排版和设计是非常重要的。言简意赅的总结下文本的排版设计思路。

字体

文字排版首先要思考的就是字体，对字体的基础了解是有必要的。

汉字

西文有基线、上升部、下降部的概念，而汉字是方块字：

因此，对于汉字，有字面框和字身框的概念：

汉字的字面率 = 字面框 / 字身框。

观察不同的字体，首先会体现在其字面率是不一样的，这是他们的区别之一。

除了字面率的区别，笔画的粗细、内部结构的占比（如“玉”在“国”字的比例等），也是形成不同字体风格的重要元素。

了解这些，有助于更好的帮助你去选择想要的字体。

可以去这里实践下。

字体家族

同一字体的不同家族适用于不同的场景，不同的字号等。

比如新闻等场景适合严肃、庄重的；活动页要搭配主题风格的。

参考方正字体的介绍页，可以看到这款字体的介绍、背景、适用场景：

比如这个实践案例：

（方正兰亭黑字体的中宫放松，字面较大，笔画两端去除了黑体的喇叭口，布白均匀，适合用于网页的标题和正文）

一些细节

对于常规的正文排版：

1. 字重：粗体时，字面率变大，字体内部应该调整间距，不要显得臃肿。以此来挑选字体。反之亦然。
2. 字号：字号大时，应减小字体间距，因为即使变小了也依然看的清楚。同时，应适当增加字重，增加厚重感。反之亦然。
3. 斜体起源于西文，中文排版中很少用到。

标点符号

1. 一般说分为半角、全角。

2. 中英文搭配时，应该用哪种标点，取决于当前的语境。

3. 更细致的讲，假如把一个汉字所占的空间的称作“一格”，那么一个标点所占的空间不只有“半格”和“一格”两种选择，可能是25%，或者75%。

   

   （当两个全角标点挨着时，共同占据”1.5格“具有更好的视觉效果）。

文字排版

除了遵循上述的排版原则外，纯文字排版时，为了避免内容单调，可以把文字特殊化。

遵循视觉动线设计，把部分文字图形化、放大、切割、重叠等方法即可让画面更有层次感。

举个栗子：

（加线条，体现“速度”）

（文字组合，体现主题）

（加元素，体现主题）

这些素材网上有很多，有的放矢的去找，并且将它们放在合适的地方，就能满足大部分需求了。

题外话

字体是有版权的。比如微软雅黑是方正字库的，而思源黑体则是开源的。

如果页面需要引入字体文件，一定要做好优化：压缩、兼容、预加载，避免性能问题，否则容易得不偿失。

这篇好文章是转载于：学新通技术网