排版教程——文字编排（行高）

版权申明：本文出自“Lawrence_V”原创，感谢“Lawrence_V”的原创教程分享！

文字编排一共两篇，这是篇文章上篇，主要讲如何设置行高、行高与行间距的差别。那下一篇主要讲行长，在页面中如何约束行长使它更合理，阅读更舒适。另外我也希望我的文章的内容由你们来定，我可以把你们想学习的知识穿插到系列文章中，来尽量满足大家的需求。

目录

1.字号的设置

2.根据需求随意组合 

3.英文的行高

4.英文的行间距

5.中文的行高

6.中文的行间距

7.行高的禁忌

8.标题行高

9.正文行高

10.混合编排

11.字体选择

1.字号的设置

字号就是字体的大小，文字从大标题H1-H7、小标题、正文、注释都要配置相对应的字号。页面的字号我是以4为基数进行递增的，最好采用偶数。像14号字的正文和13号字的注释，这种比较小的字可以不以4为基数来做。不管设计师怎么去定义字号，只要视觉上美观大方并具有关联性，采用哪种规则去约束它都可以。

另外所有的字体都要调试出深色和浅色两种配色，并分别应用在白色底色和黑色底色当中。黑色底色展示效果不好就不做展示了。

FEVTE编注：更多平面设计理论学习请访问飞特网平面设计理论知识栏目，地址：https://www.fevte.com/plan/shejililun/

2.根据需求随意组合

当我们定义好字号，标题和正文就可以根据实际项目需求进行自由搭配了。在给标题和正文选择字号时要注意它们之间的对比关系，字号差异越大它们的层级关系就越明显，但它们之间的差异又不能太大，差异过大会影响整体的视觉平衡性，给人一种不和谐不自然的感觉。

例如：标题字号20px搭配正文字号12px；标题字号24px搭配正文字号16px。选用哪种标题搭配哪种正文也是由设计师的美感决定的。

3.英文的行高

在设置文本行高的之前，需要理解一下"行高"与"行间距"的差别。前端DIV+CSS和设计Affinity Designer等绘图软件都是以"行高"来进行定义的。在CSS-Style line-height属性是行高，值分别以百分比、数值和像素来表示。例如：h1.test {line-height:112px}，那标题h1的行高就是112像素了；绘图软件中控制行上下距离的也是行高。好的言归正传，中文的行高与英文行高会有一些差异，英文的行高指的是一行英文的基线与下一行英文的基线之间的距离，如下图所示。

基线是英文字体结构中的概念，先简单了解一下它吧，以后讲到字体的时候再讲它吧。我们在绘图软件填写行高的数值时，改变的就是上图所示的这段距离。

4.英文的行间距

英文的行间距就没有行高那么复杂，也不用画基线。英文的行间距跟中文相同，指的是一行英文的底部线与下一行英文的顶部线之间的距离。其实也可以简单的理解为"行与行之间的距离"并称之为行间距。另外英文底部和顶部都有对应的专有名词的，在英文字体结构中最顶部/最底部隐性的两条线称为"上沿线/上限线"和"下沿线/下限线"。这块的知识先了解一下就行，以后在字体结构中会讲到。

5.中文的行高

接下来理解下中文的行高。上面讲到说英文的行高是由基线决定的，但中文字体与英文字体结构不一样，中文里没有基线的概念，那该怎么定义行高呢。中文的结构属于方块字没有基线，所以中文的行高指的是一行中文的最底部与下一行中文最底部之间的距离。中文字体结构中没有上沿线/上限线和下沿线/下限线的概念，它们只存在于英文字体结构中。