北河以北

关于字体

文/宋春林

开始注意到字体还是源起这个博客,我是个有轻微完美主义倾向的人,对自己博客外观的要求就是:能够有良好的阅读体验。所以把主题改成了非常简洁的样子,然后又开始考虑字体的问题,这才发现这里面学问很大。

最初主题默认的字体是​宋体,大小为12px,我认为这太小了,因为小,所以看起来很寒碜。后来全部换成微软雅黑,看起来舒服多了。但是接触了简书过后,发现对于博客这样适于深度阅读的地方,衬线体在视觉上更美。这里有两个基本概念:有衬线体(serif)和无衬线体(sans-serif​​)。衬线体的概念最早起源于西文字体,「衬线」指的是对于字形笔画末端起修饰作用的部分,一图胜千言,下图的红色部分即为衬线:

中文里一般把宋体、楷体等字体归为衬线体;​黑体、圆体、微软雅黑则归为无衬线体。有衬线体显得更加古典、庄重,更富于美感,所以传统的印刷品上,比如报刊、书籍大多采用宋体、楷体,但是在电脑显示的中文衬线字体有一个问题:效果不好,特别是在Windows电脑上,字体边缘看起来有锯齿,非常碍眼。如果显示条件达到一定标准,衬线字体跟无衬线字体相比,看起来更漂亮:后者是冰冷而木讷的,前者的修饰让字体变得灵动和雅致。

在网页上,由于中文字体的构造特点造成了其先天的劣势,好看又实用的中文字体寥寥无几,英文字体则不存在这种情况。这里的好看很好理解,实用则指的是长时间阅读起来眼睛不累。​​如果不改进字体渲染,只有字体足够大的时候有衬线中文字体看起来的效果才会够好,简书就是这样处理的。我看过苹果电脑上面的汉字,看起来就是比Windows电脑好看,那是字体渲染技术的不同。 ​

自Windows Vista​​起,微软雅黑成了Windows电脑默认的字体,看起来比XP时代舒服多了​​。由于没有「多余」的衬线,所以看起来简洁明快。我在很长的一段时间里都把微软雅黑作为屏幕首选字体。但是微软雅黑属于无衬线字体,「实用」但是不够「美」,汉字之美在微软雅黑上没有被充分展现。衬线体的这种「美」是我在有了Kindle之后才发现的,以前我偏激地认为电子设备上只有微软雅黑、苹果丽黑这类字体才是正确的选择。我最初也把Kindle中文字体设为圆体,但是偶然的机会安装了方正准雅宋之后,我立刻移情别恋了——只有衬线字体才配得上Kindle的气质。下图为KPW一代上的截图。

screenshot_2013_03_21T10_44_50+0801

​字体的运用与内容也应该结合起来,相对而言,无衬线字体更现代,而衬线字体偏古典。所以36Kr上用无衬线字体系列的微软雅黑和Helvetica,而简书的默认字体是楷体、宋体和Georgia——这些都是衬线字体的代表。每种字体都有自己独特的气息,不同的字体给读者带来不同的感受。足够好的字体运用会让读者阅读的过程赏心悦目,更愿意停下来专注于内容。大多数中文网站都忽略了字体这一重要的影响阅读体验的因素,千篇一律地采用宋体,还使用极小的字体,行距和字间距也没有特意调整。简书使用衬线体字,但是字体大小和行距都恰到好处,读起来非常舒服。相对而言我就不喜欢知乎上面的字体和排版,要是换成微软雅黑就好了。各大门户网站的字体也是满眼的粗糙感。英文网站里,Zen HabitsiA是我觉得字体、排版运用的典范;中文里前面提到的简书36Kr在这方面也非常优秀。 ​ ​我理想的博客字体是:文章和博客标题用楷体和Georgia​​,正文用方正准雅宋和​Georgia​​,全部为衬线体系列,因为气质相符。但是考虑到大多数人用的是Windows电脑,14px大小的宋体字看起来效果还是会很差,而且我一直不知道中文字体的字间距如何调整,目前看来微软雅黑还是最佳选择。 ​ ​文章的最后,推荐一款Windows下的字体渲染软件:MacType,使用之后中英文的阅读效果会有较大的提升。真实的效果比下面图片要更为明显。 ​ ​中文不用MacType渲染效果: ​ 中文使用MacType渲染效果: 英文不用MacType渲染效果:

英文使用MacType渲染效果:

建议Windows用户都安装了试试看,对比了就会发现MacType对字体的优化效果。

Comments

永远的嘉年华: 完美主义,很棒!

Dong: 很有用,可我觉得你得博客字体有些小,看着还是有些费力。

发表于
分类 歪理邪说  标签 字体  设计