视觉规范——文字编排

在文字编排中如何使行高、行长看上去更舒适

行高

字号的设置

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

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

根据需求随意组合

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

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

英文的行高

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

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

英文的行间距

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

中文的行高

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

中文的行间距

中文的行间距就比较好理解了，跟英文的行间距的道理相同。是指一行中文的最底部与下一行中文的最顶部之间的距离。也可以理解为行与行之间的距离。

行高的禁忌

不管是标题、正文还是注释，他们的行高都不宜过高，行高过高会导致内容不易阅读，文字之间的整体性也会被打散。标题的字号越大行高应该越小，正文的字号越小行高应该越大。当然这些规则都是相对的，行高大小要合理把控，不能太大或过小。那要如何合理设置行高呢？

标题行高

标题的行高由字号决定的。平面设计中有时候可以把行高设置与字号相同，例如120pt的字号设置120pt的行高是没有问题的。在页面中行高是这么计算的，字号x倍数=行高。例如下图所示，大标题H3设置的字号是48px（12a），那行高就是62.4，即48x1.3倍=62.4。字号与行高的倍数是一点点测的，因为字号与行高的比例不会小于1.0（1倍），我就根据自身审美进行测试，从1.0/1.1/1.2/1.3….开始测，直到测出自己满意的行高。如下图所示，带颜色数字的是倍数。

最终的行高还是由设计师直观判断决定的。所以做设计要理性中夹杂感性，规则与创意并存需要兼备。拿中文字号36px和英文字号24px来举个例子，如下图所示：

从测试结果中找到自己满意的行高就可以了。字号x倍数=行高，这里也不怕倍数小数位太多的问题。在绘图软件中是以像素为单位，但有时候前端代码会用父继承单位“em”。例如：大标题H3的字号是48px，行高是62.4px（48x1.3倍），62.4px=1.2816667em，那转换为前端代码就是h3.test{line-height: 1.3em}，直接做约等于就行了，差一点点看不出来的。

正文行高

正文行高与标题行高相同，差异就字号的不同选择的行高也不同。标题行高倍数大概1.0-1.6不等，正文行高倍数大概1.6-2.4不等，这也没有一定的标准，还是得根据项目情况与实际效果综合来看。如下图所示，带颜色的数字是行高的倍数。

在做设计时都会采用1.5/2倍关系，但这不是绝对的，行高的倍数也是受字号大小影响的。像新浪新闻的正文，字号是18px，行高设的是32px，即字号（18px）x1.777（倍数）=32px（行高），如果行高倍数设置2倍以上，字与字之间的距离变大，就不太好阅读了。

混合编排

综上所述可以得到文字编排，大标题字号40px、正文字号20px、正文行高40px、注释字号18px、注释行高32px、标题与正文的间距88px、正文与注释的间距64px。

字体选择

做页面常用字体就只有那几种，微软雅黑、宋体、Verdana、arial、Times New Roman，就不举例说明了。中文网站最常用的就是微软雅黑+Arial，浏览器兼容性也最好。虽然载入其他字体也可以，但像做功能页面、后台页面，载入其他字体几乎就不可能了。所以还是要估计实际项目需求/品牌需求来选择与其相符的字体样式。

行长

字间距

常用的字间距有三种排版形式，分别是标准排版、紧凑排版和留白排版。标准排版就是软件默认的字间距，字与字之间的距离不会太大也不会太小；紧凑排版是每个字之间的距离会向里缩进一些；留白排版是每个字之间会多留一些空白。三种排版形式如下图所示。

字间距-使用场景（字号）

不同字号字间距也不同，字号越大字与字的间距就越小，字号越小字与字的间距就越大。字间距过大或过小都会影响阅读体验，文字的易读性就会被影响。在设计以古典为主题的作品时，要营造拘谨和严肃感，就可以在常规的字间距的基础上再减少一些间距；在设计以现代或科技为主题的作品时，要营造开放的态度和流行的感觉，就可以在常规的字间距的基础上再增加一些间距。如下图所示，带颜色的是字间距的数值。

反其道而行之就会造成不好的阅读体验，字间距过大就会影响阅读体验，非常大就会影响文字的易读性。字间距非常小，字与字就会重叠，字的可读性就很差。所图所示（错误的示例）：

字间距-使用场景（字体）

不同的字体结构也都不同，中文的无衬线体要比衬线体更粗犷占得位置也会更多一些，就导致字与字的距离会小一些，这种情况下就不能过多的减少字间距了，越缩减就越紧凑就会影响阅读。相反衬线体的周围间距要显得大一些，这时可以适当缩减一些行间距，给读者一种舒适的阅读体验。

下面是中英字体测试，中文衬线体/无衬线体，英文衬线体/无衬线体，字体、字形和字号的不同字间距也不尽相同。由于中文字体与英文字体结构不同，在处理英文的无衬线体时，粗犷的线条会增加的行的宽度，这时候可以多缩减一些间距，让它与其他文本之间保持视觉的平衡。

附加一张字体间距的错误示例吧。字间距之间的差别非常微小。中文差异很小，英文那里比较明显，英文的标题占的宽度太大了，就要进行缩进。

了解行长

因为受不同语言、字体、字形和字号的影响，行长也会不尽相同。主要以微软雅黑来做示例，微软雅黑也都是页面中比较常用的字体，如图所示。

不同语言、字体、字形和字号，行长也不尽相同。

行长规定

行的长度也是有一定的规定的，正文的行长在页面设计中的最大长度不能超过110个字符，而标题的行长在页面设计中的最大长度最好保持在60个字符以下。中文一个字占两个字符，英文一个字占一个字符。但有时候吧由于页面栅格较宽，行长最大长度也可以不超过120个字符，但像行长占满一个栅格的宽度，这种情况是不允许的。行长过长易读性就会变差，读者阅读一行时容易串行，换行时由于上一行末尾与下一行开头之间距离过长就会造成阅读困难，不易阅读等难题。

中文-微软雅黑

行的长度不一定就是整整一行，也会按照需求划分为不同的段组。像新闻页啊就需要比较小的段组，页面过长可以划分为两个段组，一般在页面中较为常见的就是以标题加一个段组的形式进行排版的。

下图是较小字号的展示效果。字号越小行长就越小，中文字体12号字更适用于比较传统的企业网站中，栅格控制在1000px以内，显示效果最理想。