响应式Web之文字排版

文字在页面上永远占据大量空间,所以在响应式设计中我们的目标是开发出具有高可读性、高适应性的文字排版效果。

良好的字体栈

为 HTML 元素设置字体时,我们应使用 font-family 属性。在这个 CSS 声明中应包含多种字体,因为我们需要候补字体,以防前面的字体由于某些原因不能正确加载。

通常,候选字体应尽量与正选字体类似,这样在万一使用了候补字体的情况下页面的显示效果不会看起来完全不同。

自适应的字体大小

通常在进行设计时,字体大小是以像素为单位进行确定的。但在 Web 页面中使用固定像素大小的字体有严重的问题,一是字体大小不能进行自适应,二是在书写媒体查询代码时会带来
额外的工作量。

绝对与相对

像素是一个绝对度量单位,绝对度量单位拥有一套定义使得其度量值所表示的大小在不同的场景下被认为总是相同的的。

另一方面,相对度量单位,在定义了一个起始点之后,与其他值之间是相对关系。

em和rem

与像素(px)恰好相反,em 和 rem 均是典型的相对度量单位。

一个 em 大小等于一个元素当前的字体大小。如果父元素字体大小改变,那么采用 em 作为字体单位的子元素字体大小也会跟着改变。而这正是我们想要的结果。

下面这个公式可以将子元素字体大小像素单位转化为 em 单位:

子元素字体大小 px 值 / 父元素字体大小 px 值 = 子元素字体大小 em 值

rem 与 em 类似,只不过 em 是相对于最近父元素,rem 则是相对于根元素(<html>)而言。

一般来说,浏览器根元素的默认字体大小都是 16px。

推荐的字体大小配置方案

为了使文字排版效果中字体大小具有响应性,建议采用模块化方案。

  1. 将整个页面根据文字特征划分为几个模块,如导航、标题和正文
  2. 每一个模块最外层元素,采用 rem 作为单位,相对于根元素(16px)设置字体大小
  3. 每个模块最外层元素的字体大小,则作为该模块内部各元素字体大小的基准,也就是说模块内部元素的字体大小均采用 em 作为单位

合理的行高/行长

合理的行高、行长很重要,因为这也是直接影响用户阅读体验的因素。

下面是一个大神使用黄金分割比例处理字体大小、行高和行长之间关系,并据此制作的一个计算器。只要设定字体大小,行长,就能计算出最合适的文字排版方式。

Golden Ratio Typography Calculator