继text-shadow, optimizelegibility之后,justFont要向大家介绍这系列文章中最后两个让网页更好读的设定:
3-1 每一行中的字数、每一行的距离很重要:
关于如何决定每一行中的理想字数,与各行之间的理想行高,一直是个充满争论的话题。美国心理学家Susan Weinschenk提出:人眼喜欢短行文字,例如一行45-75个英文字,或30-40个中文字,但阅读上却是“长行”比较易读 ── 至少读得比较快。
这的确是个难题,所以要斟酌:或许真的有一个完美字数,但我们还没发现,或是至少也还没取得共识。所以目前我们只能说,对你的个案而言,到底“偏好”比较重要,还是“易读性”比较重要。但也要特别注意:有时人们要求的事情,对他们而言不一定是最好的选择。
而在排版上,“行距”(line spacing / leading)也与单行字数密切相关。顾名思义,行距就是文章里每一行之间的距离,行距较高就表示行与行的空间比较大。
关于行距对阅读的影响,我们先实地测试两种行距设定:
行距:default
信黑体出于大师柯炽坚之手。柯老师深暗书法形体结构之奥:“知白守黑”。在白纸上留下的每一点、每一划皆削掉了纸上的空白。在中国书法中,黑与白同样重要。信黑体秉承这个传统,非常着重黑白两者的平衡。线条简洁明快,削除了不必要的细节,加上视觉上等粗细的线条,更为清晰易辨。
行距:200%
信黑体出于大师柯炽坚之手。柯老师深暗书法形体结构之奥:“知白守黑”。在白纸上留下的每一点、每一划皆削掉了纸上的空白。在中国书法中,黑与白同样重要。信黑体秉承这个传统,非常着重黑白两者的平衡。线条简洁明快,削除了不必要的细节,加上视觉上等粗细的线条,更为清晰易辨。
上面的例子显示,适当行距对文章的易读性是很有影响的。我们很明显可以看出哪一种设定比较好读。
至于我们应该怎么抓行与行之间的适当距离呢?,很肯定不一定是浏览器默认行距,网页设计时应该要注意到适当行距对阅读的影响。朱其明老师在《字由字在谈字型》中提出字型学上的著名公式:
字体大小(pt)*0.2+字体大小(pt)=适当行距(pt)
但这套公式单位是pt,是基于简单明了的印刷品设计的;但在像素(pixel)显示、分辨率等设定各异的数位装置上,会遇到多如牛毛的影响因素,例如使用何种字体、字体大小或者其他设定,例如不同浏览器、作业系统出现的不同设定……上面的公式可以姑且参考,但实在有太多因素影响萤幕显示,设计师多半要自求多福。只能说行的长度越高,距离也要越高。
调整行距可以使用下列这个CSS设定:
p { /* Your selector */
line-height:–px; /* 也可以用其他单位,例如 “em",或者如同justFont网志内文设定的行距是200% */
}
3-2 选择适当的对比(contrast):有个工具很好用
选择萤幕上内文与背景的适当的色彩对比又是另一个充满争议的主题。不过至少有一个普遍同意的点是,文字必须要达到最基本的对比率(minimum contrast ratio),才能成为适合广大观众阅读的内容。根据WCAG2.0(Web Content Accessibility Guidelines 2.0),网页内文应该要达到4.5:1的基本对比率。
要决定两种颜色(内文颜色与背景颜色)的对比率可以使用一个线上工具。对比率设定取决于比较内文与背景的相对明亮度(relative luminance)。有些人说较高的对比总是比较好的,也有些人认为对比太高其实会伤眼,所以在内文并不采用100%全黑内文或全白背景。关于这一点并没有太多数据可以参考;另外,有些来源则指出,太高的对比对于有阅读障碍的使用者来说是更难读的。
综合以上各种考量,有些设计师选用了#333的文字色码,而不是全黑的#000,如此一来阅读会更舒服些,例如justFont网志目前版型的默认字体颜色,也并非全黑。
这系列关于更经营好读内容的文章,就到此告一段落。当然,相关知识可说无穷无尽,justFont以后还会接着推出更多与大家分享。