中文网页阅读字体新鲜人

到底什么样的网页我们阅读起来才能更轻松,阅读效果最好呢?我们打算从字体、字号、行长、间距及背景五个方面来进行学习与研究。

当然我从网络上获取学习资源的时候,我们可以通过文字、图片、声音、视频等方式对相应的资源进行视或听,从而获得信息。对我个人而言,我更习惯是静静地通过文字的阅读来获取信息。当读过不同风格的网页之后,就发现,有些网页上的内容读起来很轻松,获取内容的效果也较好,但有些网页,真是看了一眼,还没读内容,就有些受不了,于是就关掉。

个人认为,网页文字内容呈现的好坏,能极大的影响我们的阅读。那么,到底什么样的网页我们阅读起来才能更轻松,阅读效果最好呢?由于我们国人更多的是中文网页的阅读,后面我打算从中文网页阅读这个方面来进行学习。

学习内容

  • 字体。适合网页阅读的中文字体有哪些,字体样式方面,是正体、粗体还是斜体?
  • 字号。
  • 行长。正文一行文字,多少个字是比较合适我们阅读的?
  • 间距。字与字之间的间隔。
  • 背景颜色。

计划学习时间

上面共计列了五个方面我需要去学习的。学习时间方面,我的初步打算是这样的:

  • 第一周,准备工作及学习内容的第1,2点。收集整理自己常去的网站,将我觉得阅读起体验比较好的收集起来。
  • 第二周,学习3-5点。
  • 第三周,总结。

根据学习内容及时间安排,先是收集,然后再是分类学习,每周完成一个学习主题相关的小结,最后一周汇总成总结。

学习方式

  • 本微课下讨论交流。
  • 微博:通过话题#网页阅读#进行在线交流。
  • 利用印象笔记,将整理出来的笔记及总结进行分享。

第一周:准备工作及字体、字号

在准备工作方面,我根据自己平时使用网络浏览网页时的感受,将一些认为比较好的网站收集下来,以此来作一个研究的样本。

时间

第一周我的时间安排是从2014年01月14日-01月20日。

话题交流

由于我所列举的一些网站,要么是我自己常用的,要么是偶尔见到而收集的,内容是比较有限的,为了收集更多的体验好的站点,我在知乎和微课上有发起问题,大家可以在上面交流,后再我根据收集的情况进行整理汇总到这里来:

收集到的内容

我整理的一些我常去的网站:

  • 简书:http://jianshu.io。这个站的号口是“找回文字的力量”。这个站网在阅读体验上确实花了大功夫,字体,字号,间距等元素都很考察。
  • 多看阅读/豆瓣阅读:这两个站都很好找,这里就不多说了。两个网站都在线卖电子书,就我平时观察而言,多看你的图书内容更加丰富。有在线图书阅读功能,阅读模式做得很棒。
  • 42qu:http://42qu.com。这个站不知道什么原因,现在更新得挺少,但文章的单独阅读页面,也做得很不错的,整个页面非常简洁。
  • 印象悦读。这虽说不上是网站,但对于普通的网页文字内容,通过空上插件处理之后,带来的阅读体验绝对是超一流的,如果你第一次使用这个工具的话,你一定会说声“哇!”的。

还有一些是我偶到收集到的网站:

  • Medium:https://medium.com/。Medium 是一个内容发布平台,该平台会把相似主题的内容以专集的形式组织起来,以期望此举能改变人们在互联网上获取信息的体验。关于Medium的更多介绍可以阅读《向Medium.com学习交互设计创新》。
  • 36氪:http://www.36kr.com/
  • 阅FM:http://yue.fm/
  • Pocket:稍后阅读工具,收集后,可以在手机上使用APP阅读,也以在PC上在线阅读。

字体

回顾下自己使用的各类系统平台及移动工具吧。

  • Windows XP。这个操作系统中使用的网页阅读字体为宋体,如果按照英文字体的分类,衬线体和无衬线体的话,那么宋体的字体特征是可以放入衬线体类的。
  • Windows 7。这个操作系统加,大多数使用的仍然是宋全,在一般的网页中,CSS所指定字体,宋体或是其它衬线体仍是排在前面的。当然也有不少网站开始使用”微软雅黑”这种针衬线体字体。
  • Ubuntu & Fedora。我个人使用这两个系统的时间也是比较长的,大概两三年前,其默认字体为文泉驿黑体,但我印象当中,一般网页上呈现出来的字体还是象宋体。后来Ubuntu有了自己的 Ubuntu Font,同时文泉驿也新开发出来了文泉驿微米黑,仍是属于无衬线体类的。这时的中文字体显示效果,真是比XP,以至于Win7都好了一大截。
  • Mac OS X。我自己使用这个系统不久。但上网页呈现上,字体为黑体类的无衬线体,再加上很赞的Retina屏,字体效果非常之好。
  • IOS。黑体类的无衬线体,我在知乎是查到了相关的信息,有兴趣的朋友可以前去阅读下[1]。
  • Android。当我同样使用Google搜索的时候,惊奇的发现,说法就有些太不统一了。但基本能确定的是,Android 使用了一种叫“Droid Sans”的字体。

现在是智能手机大行其道的时候,无论是IOS还是Android,在字体表现上都非常的好,大量的无衬线体字体的使用,现在我自己更喜欢看到的是无衬线字体,对于衬线体,由于在Windows下表现的总是让人有些受不了,所以就不太有好感了。但当我在Mac上阅读简书的时候,上面的宋体及楷体,读起来体验又很好了。是显示屏的原因,还是操作系统对字体的处理不同的原因呢?

考虑到不同系统字体的表现,再参考知乎上关于中文网页字体的一个讨论:中文的网页用什么字体最合适?,综合考量,网页字体,首选“宋体”,再次是黑体。不同平台,黑体有所不同,XP就是黑体,Win7的话,就是“微软雅黑”,Mac的话,“华文细黑”。

字号:

不同字体及16px,14px,12px的表现情况:

enter image description here

由上面的情况来看,对于正文使用12号或是14号字体是比较合适的。对于标题,个人认为使用16px加粗,或使用18px的比较合适。

第二周:行长、间距及背景

行长

先附一些我找到的文字:

对文字行长的学习过程中,我想到在一些代码编写规范中,常要求代码编写中,尽量让一行代码控制在80个字符以内,这样折算成汉字的话,就大致四十个字。这个要求也正好和上面的阅读资料中所提供的40个字(含全角的标点符号)相符。

综上所述,对于中文网页行长要求,控制在40个汉字上下,字号大小为14或16px,这样读起来体验是比较好的。

间距

对于中文内容的行间距问题,你在知乎上找到了一些分享,我个人认为比较合适:

  1. 一般来说,常规正文的字号,在9pt~12pt为宜,其中,9pt~11pt相对更适合西文,10pt~12pt相对更适合中文;
  2. 基于1,如果做版面比较紧张的文字设计,可以适当再缩小0.5~1pt,例如杂志和报纸等;
  3. 行高选择为正文的1.6~1.8倍,将会是比较舒服的,如果版面紧张,可以适当缩小的1.2~1.5倍;
  4. 基于3,“可以缩小”的情况,一般是指选用了西文的Serif类字体或中文的“宋体类”字体,Sans-serif或“黑体类”的正文字体,不适宜缩小行高,反而需要更多地加大行高;
  5. 正文段间距,可以简单地取为一个空行(也就是与行高相等),这是比较常规也比较合适的做法;
  6. 为幼儿及老人进行文字设计,可以尽量靠近上述几点数值的“上界”,甚至,可以略超出上界一些;
  7. 结合开本和网格,如果页边距相对宽大,则可以适当减小正文内的“间隙”(也就是相对缩小行距及段间距,但一般不建议随意调整字符间距——也就是西文typography里通常说的kerning和tracking),反之则应增大;
  8. 在有可能的情况下,做一些实际测试,用自己的眼睛来亲自感受是最佳的——找一台相对清晰的打印机,打印出几组数值组合的文本来,亲自比较一下(有条件的话,可以找该文本的受众来简单测试一下),最快速也最方便。

背景

关于背景,我找到的内容:《什么样的背景颜色适合阅读,对眼睛好的阅读背景设置》,推荐的几种背景是:

河白 #FFFFFF rgb(255, 255, 255)

杏仁黄 #FAF9DE rgb(250, 249, 222)

秋叶褐 #FFF2E2 rgb(255, 242, 226)

胭脂红 #FDE6E0 rgb(253, 230, 224)

青草绿 #E3EDCD rgb(227, 237, 205)

海天蓝 #DCE2F1 rgb(220, 226, 241)

葛巾紫 #E9EBFE rgb(233, 235, 254)

极光灰 #EAEAEF rgb(234, 234, 239)

学习资源


最新讨论

+发言
主题 发言人 条数 时间
这个微课写完了吗? Xiulizhuang 1条回应 2014-02-13 16:17
Bootstrapping Design 新四年 0条回应 2014-01-22 01:14
第一周:你所用过的阅读体验最好的中文网站有哪些? wwq0327 7条回应 2014-01-14 22:06

线下活动

暂无线下微聚

研修列表 我要创建

暂无研修

还没学友参与呢!!!

wwq0327

爱生活,珍惜可贵的生命,期望着以某着自己尚未知的方式延续这生命。喜欢平淡生活,为人但求无愧于心。爱自由,喜欢一种无拘无束的生存状态。相信知识可启迪心智,倡导每个人都应该做终身学习者。

微课目录