科技猎推荐CSS库: 更佳网站可读性项目 | CSS | 前端观察
推荐CSS库: 更佳网站可读性项目
神飞 发表于 30. May, 2009, 分类: CSS, Resource , 3 条评论 »
标签：css & CSS库 & 可读性
Vladimir Carrer在半个月前发布了一篇博文，讨论《我们如何在网站上阅读以及如何改进 》，然后他总结了一些规则并创建了更佳网站可读性项目(Better Web Readability Project)。该项目的主要目的是让屏幕的友好性，让网站字体更易读。不同于其它CSS库的是，该项目的默认字体大小和行高一样。它包括其它一些很值得参考的特性：
- 默认16px正文大小
- 部分26px 基线网格
- 标题Serif字体，段落使用sans-serif 字体
- 较低的文字色彩对比度
- 增强的段落间距(换行+ 缩进)
- 更大的行距(line-height) 1.625
值得注意的是，Carrer在其博文中指出，我们大部分使用电脑来阅读新闻、博客和其他网站，但是绝大部分人是浏览而不是阅读。然后他对比了一下读书和读电脑屏幕的区别，然后总结出“在电脑屏幕上进行阅读比较困难”的三个原因：
- 我们保持书籍的标准(12pt)字体大小到网站上(12px)。但是人眼到电脑屏幕的距离是到书的三倍。把报纸贴到你的电脑屏幕上去看看，一样不容易阅读！
- 纸是反射光线，而屏幕是发射光线。如果你还在使用古老的CRT显示器的话，会可能会感觉它简直就是一个电灯泡。(电脑屏幕的亮度比较高)
- 你同样还会遇到会让你分心的干扰因素：强烈的色彩、链接、动画、横幅，不太明确的网站结构、点击这里、顶一下、follow me on twitter… 太多的杂乱无章的东西了。
然后，Carrer创建了一组标准和规则，并将其整理成这个CSS库，你可以根据它来创建更好的更易读的网站界面。该库的字体比较漂亮而且看起来比较舒适。下面是一个实例：
该项目已经开源，你可以在Google code找到它的项目主页，下面是一些演示的页面：
- Typography
- Absinthes to Go Mad Over – NY Times
- An American Prayer – The Doors
- Critique of Pure Reason – Immanuel Kant
- Excerpt from No Way To Paradise – Charles Bukowski
- How To Sniff Out A Liar – Forbes
- Hubble – Ars Technica
- One Day in Spring – Rabindranath Tagore
- Shaman’s Blues – The Doors
- Tarantino – NY Times
- The Alchemist – Paulo Coelho
- The Last Question – Isaac Asimov
- The Raven – Edgar Allan Poe
- Viva Las Vegas – Elvis Presley
你可以完全下载上面的演示。
这个项目并不一定完全适合中文网站，但是有些地方还是很值得我们参考的，比如默认字体大小、行距、色彩对比度以及网站字体等。这里的serif字体也未必会适合中文网站，感兴趣的童鞋可以研究一下。另外，射雕童鞋之前研究过《网页设计中的默认字体》，分析的挺到位，大家可以去看看。
标签：css
Vladimir Carrer 值得注意的是，Carrer在其博文中指出，我们大部分使用电脑来阅读新闻、博客和其他网站，但是绝大部分人是浏览而不是阅读 然后，Carrer创建了一组标准和规则，并将其整理成这个CSS库，你可以根据它来创建更好的更易读的网站界面。该库的字体比较漂亮而且看起来比较舒适。下面是一个实例： 该项目已经开源，你可以在Google code找到它的项目主页 你可以完全下载上面的演示 这个项目并不一定完全适合中文网站，但是有些地方还是很值得我们参考的，比如默认字体大小、行距、色彩对比度以及网站字体等。这里的serif字体也未必会适合中文网站，感兴趣的童鞋可以研究一下。另外，射雕童鞋之前研究过《网页设计中的默认字体
