推荐CSS库: 更佳网站可读性项目

Vladimir Carrer在半个月前发布了一篇博文,讨论《我们如何在网站上阅读以及如何改进 》,然后他总结了一些规则并创建了更佳网站可读性项目(Better Web Readability Project)。该项目的主要目的是让屏幕的友好性,让网站字体更易读。不同于其它CSS库的是,该项目的默认字体大小和行高一样。它包括其它一些很值得参考的特性:

  • 默认16px正文大小
  • 部分26px 基线网格
  • 标题Serif字体,段落使用sans-serif 字体
  • 较低的文字色彩对比度
  • 增强的段落间距(换行+ 缩进)
  • 更大的行距(line-height) 1.625

值得注意的是,Carrer在其博文中指出,我们大部分使用电脑来阅读新闻、博客和其他网站,但是绝大部分人是浏览而不是阅读。然后他对比了一下读书和读电脑屏幕的区别,然后总结出“在电脑屏幕上进行阅读比较困难”的三个原因:

  1. 我们保持书籍的标准(12pt)字体大小到网站上(12px)。但是人眼到电脑屏幕的距离是到书的三倍。把报纸贴到你的电脑屏幕上去看看,一样不容易阅读!
  2. 纸是反射光线,而屏幕是发射光线。如果你还在使用古老的CRT显示器的话,会可能会感觉它简直就是一个电灯泡。(电脑屏幕的亮度比较高)
  3. 你同样还会遇到会让你分心的干扰因素:强烈的色彩、链接、动画、横幅,不太明确的网站结构、点击这里、顶一下、follow me on twitter… 太多的杂乱无章的东西了。

然后,Carrer创建了一组标准和规则,并将其整理成这个CSS库,你可以根据它来创建更好的更易读的网站界面。该库的字体比较漂亮而且看起来比较舒适。下面是一个实例:

更佳网站可读性项目 示例截图

该项目已经开源,你可以在Google code找到它的项目主页,下面是一些演示的页面:

你可以完全下载上面的演示

这个项目并不一定完全适合中文网站,但是有些地方还是很值得我们参考的,比如默认字体大小、行距、色彩对比度以及网站字体等。这里的serif字体也未必会适合中文网站,感兴趣的童鞋可以研究一下。另外,射雕童鞋之前研究过《网页设计中的默认字体》,分析的挺到位,大家可以去看看。