浅谈网站字体的选择与优化

标签: 博客世界 | 发表时间:2012-09-04 09:19 | 作者:Packy
分享到:
出处:http://fairyfish.net

如同“想要抓住男人的心,首先要抓住男人的胃”一般,想要留住浏览者,首先站长本身就要注重网站页面的布局和其他细节优化。近期Packy也是在折腾自己的主题,看了一些前端设计的资料。今天,拿《 Responsive Typography: The Basics》一文的翻译和个人的见解来与大家分享一下:选择怎样的字体适合您的网站!

响应式布局

首先,我们要知道什么是响应式布局,因为原文标题就是“响应式字体排印”嘛~百度百科告诉我们,响应式布局就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。也就是现在屏幕越来越大,移动设备越来越多,你需要选择一个好的字体和样式,来兼容这些所有的设备。

响应式布局最典型的2种就是

  1. 自适应布局:分步地调整布局以适应有限种(屏幕)大小。
  2. 流体布局:持续不断地调整布局以适应各种可能的宽度。

其中的第二种是目前比较火热的布局,因此 WordPress 上出现了很多瀑布流的主题。

到底是用以往的布局方式好还是响应式布局好呢,这个要根据每个网站的内容来决定啦。如果一个纯文字的网站用瀑布流来显示文章,浏览者永无止尽的看到一堆一堆的文字,必然会感到枯燥。

选择字体

制作一款主题或建设一个网站的时候,你终究要决定用什么字体来确立网站的基调。由于每种字体都有它自己的品质要求(或限制)特定的处理方法,字体的选择会带来诸多视觉和技术上的结果。现在字体成千上万,你有很多的字体可以选择,于是找到一种合适的字体又变成一项挑战。

对于中文的网站来说,似乎没必要纠结字体,因为真正能用的字体也就那么几个…但是,同样的,不同的网站需要的字体还是不同的,这就要引入下一个话题来了解了。

衬线还是无衬线?

好了,我们这里又要解释下神马是衬线和无衬线了。

西方国家字母体系分为两类:serif 以及 sans serif。

serif 是有衬线字体,意思是在字的笔画开始、结束的地方有额外的装饰,而且笔画的粗细会有所不同。相反的,sans serif 就没有这些额外的装饰,而且笔画的粗细差不多。

serif 字体容易识别,它强调了每个字母笔画的开始和结束,因此易读性比较高,sans serif 则比较醒目。在走文阅读的情况下,适合适用 serif 字体进行排版,易于换行阅读的识别性,避免发生行间的阅读错误。

sans serif 强调每一个字母,serif 更强调于一个单词。

中文字体中的宋体就是一种最标准的 serif 字体,衬线的特征非常明显。字形结构也和手写的楷书一致。因此宋体一直被做为最适合的正文字体之一。不过由于强调横竖笔画的对比,在远处观看的时候横线就被弱化,导致识别性的下降

以上的解释依旧来自百度百科。为了让大家更加直观的了解,我制了张小图,方便大家对比:

serif 以及 sans serif 字体

许多人还是认为,就屏幕上的字体排印,“衬线还是无衬线”这个问题本身就能回答。实际上没那么简单。与普遍观念相反,如果你设置的正文字体大于12像素,衬线和无衬线的表现就会一样好。低于12像素,衬线字体渲染的不够锐利,但反正(这把我们带到第二点)在现代的显示器上12像素实在太小。

所以你需要按照网站的字体大小需求来决定用衬线还是无衬线,因此对于字体大小我们又值得讨论下了…

大小

你的正文字体的大小并非由你的个人喜好决定。它取决于阅读距离。考虑到通常电脑要比书本远,桌面字体的尺寸需要比印刷品上使用的字体更大。

下边的插图说明,正文文本离你越远,它就应该更大。两个黑色的A和两个红色的A的尺寸相同。但由于右边放的较远,看上去更小。右图中的红色A看上去和左图中的黑色A一样大:

文字大小比较

你把文本放得越远,它看起来就越小。文本放的越远,你需要把它设的更大来弥补一个更大的阅读距离。到底要多大,这里边也有学问。如果你没有经验,一个好用的办法是,手举一本印刷良好的书,把它放到一个能够让你舒服地阅读的距离,同时朝你的网站看来比较。

没有 Web 设计经验的平面设计师会对 Web 上良好的正文字体与印刷品相比需要达到的大小感到吃惊。注意,只有当你把它边靠边比较时它才算大,在一定距离看则不会。

文字大小和电脑屏幕对比

如果在增大正文字体大小来匹配后,新的文字大小一开始吓到你,别担心,这是正常的。不过,一旦你习惯了它,你就不会再去用“标准”的字体大小了。

2006年开始推这些 “perspectively proportional (远视比例)”字体大小。当一开始宣扬用16像素 Georgia 做正文字体的基准引来不少愤怒的眼光和嘲笑,但现在它或多或少已经是一项共同标准。随着分辨率的不断提高,那项标准正慢慢过时。

行高和对比度

虽然正文文字大小可以通过距离观察的方法来估算,行高则需要一些调整。考虑到更大的阅读距离和(我们所说的)像素点问题,最好给屏幕文本比印刷文本更多一点的行高。140%是一个不错的基准,但当然,这取决于你所用的字体。

行高

今天你要确保对比度不是太低(如,灰色文字在浅灰色背景上)或太花哨(如,粉红色在黄色上)。由于屏幕字体排印是设计为白底黑字,用较暗的背景会遇到点困难,但如果做的正确的话,也可以。现代高对比度屏幕让深灰色文字或浅灰色背景的使用也成为可能,取代深黑色字体加白色背景。但这也并非最重要的问题。

部分内容来自: http://informationarchitects.net/blog/responsive-typography-the-basics/

原文还有更多的讨论,关于移动设备的,如果你有兴趣可以去探索探索。

>>> 继续阅读全文 ...


欢迎关注我们关于 WordPress 技巧的微博:
新浪微博: http://weibo.com/wpjam
腾讯微博: http://t.qq.com/WordPressJam

© 我爱水煮鱼 / 收藏本文 / 4条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关 [网站 字体 选择] 推荐:

浅谈网站字体的选择与优化

- - 我爱水煮鱼
如同“想要抓住男人的心,首先要抓住男人的胃”一般,想要留住浏览者,首先站长本身就要注重网站页面的布局和其他细节优化. 近期Packy也是在折腾自己的主题,看了一些前端设计的资料. 今天,拿《 Responsive Typography: The Basics》一文的翻译和个人的见解来与大家分享一下:选择怎样的字体适合您的网站.

HTML5:新闻网站的新选择

- - HTML5研究小组
HTML5是HTML语言的更新版,被业内公认为是近十年来 Web 标准最大的飞跃,将成为下一代的Web语言. 随着新技术的发展,移动阅读已经成为一种不可逆转的趋势. 智能手机、平板电脑则上升为人们接触媒体、阅读新闻的首选. 在这样的背景下,新闻网站面临两难选择:. A选项——继续把原有网站做好,吸引用户浏览.

网站CSS选择器性能讨论

- - 阿里巴巴(中国站)用户体验设计部博客
    CSS选择符由一些初始化参数组成,这些参数指明了要应用这个CSS规则的页面元素. 作为一个网站的前端开发工程师,应该避免编写一些常见的开销很大的CSS选择符模式,尽量编写高效的CSS选择符,从而加快页面的渲染速度,缩短页面呈现时间. 我们先来看一下safari和webkit的架构师David Hyatt的两段话:.

GDIPP——字体渲染的另一种选择

- Pan - Fonlan
gdipp是由CrendKing发起的,是一个可自定义的 Windows 文字渲染器,旨在重新实现 gdi++ 的功能,使之具有更好的兼容性、稳定性和性能的开源项目. 其实我自己用gdipp已经很久了,应该说从gdipp推出我就已经切换到gdipp了. 早就想写一篇关于gdipp的文章,好吧,我承认我比较懒…….

购物网站的颜色影响顾客的选择

- EllisLi - 东西
大多数创业者,对其网站色彩的考量,仅仅是看这些颜色是否搭配,是否协调,以及是否可以广泛的吸引眼球;然而,颜色对访客认识你的网站,并做出相应的反应和行动,其实有着更多的,你可能未曾意识到的微妙作用. 关于颜色在购买习惯方面的心理学,已经出了很多专题书籍(译者注:直译为“整本书籍”,但感觉专题、专门类书籍更方便读者理解).

向“社交网站”进军的 N 种选择

- Hybrid-Force - 爱范儿 · Beats of Bits
具有真实关系基因的“社交网站”获得了井喷式的用户增长,并对许多网站类型构成了极大的威胁,许多网站积极转型加入社交因素. 现实中,许多大型网站不仅仅是加入了社交因素,而且是直接把自己改变为社交网站. 社交网站就像一块磁石,在吸引用户的同时、也吸引其它网站形式向社交靠拢,于是在形成了网站社交化的热潮. 社交网站最重要的一个特征,就是用户姓名和信息的真实性,这也是社交网站的核心 DNA.

Flash or HTML5,网站开发人员该如何选择?

- - mo-Android
Flash还是HTML5,对我们网页制作人员来说是个很艰难的选择,Apple iPhone/iPad不支持Flash,Adobe也宣布放弃Flash在移动平台,转而开始全面支持HTML5,但是HTML5真的就那么理想吗. HTML5也还是存在很多问题的:. 1、HTML5标准目前还是起草阶段,各大浏览器厂商支持的视频格式也不统一:IE(MP4),Firefox(WebM/Ogg),Chrome(MP4/WebM/Ogg).

网站图片JPG、PNG、GIF哪个好,该选择谁

- - Web前端 - ITeye博客
目前网站图片的采用一共有流行三种,分别是JPG、PNG、GIF,然而很多人并不知道三者在选择的时候究竟应该选谁(BMP就不考虑了吧). 虽然都可以存储图片,但是如果要发布到网上,就必须考虑速度、大小和失真程度的问题. 如果你运用得好,选对图片,那样便会使网站的整体体验上升,如果你运用得不好,就会引起反效果.

选择创业方向的随想 - robbin的自言自语 - JavaEye技术网站

- heely - robbin.javaeye.com
现在移动互联网的创业如火如荼,也看了一些创业的团队和作品,有时候也会没事琢磨琢磨,如果做一个移动产品,选择什么切入点好呢. 前几天写了篇博客谈具体的产品对移动社交型app的一点思考,现在想谈谈方向性的选择:. 从市场规模的角度来说,有些市场属于垂直领域的市场,例如JavaEye做的IT技术人群,有些市场属于广泛的大市场,例如图片分享网站flickr,不限定用户群体;从需求的依赖度来说,有些需求属于刚性需求,例如手机通讯录软件,音乐软件,天气软件,拍照软件,是大多数用户都会使用的需求,有些需求属于非刚性需求,很多用户可能并不会用到的,如上图所示.

seo教程之百度权重对网站域名的选择和使用要求

- - CSDN博客推荐文章
在 seo教程工作过程中,经常发现许多的站长朋友都很关注新网站提高百度权重的问题,为此seo教程就自己的seo经验精心准备了提高百度权重的系列教程,希望对大家有所帮助. 今天我们先探讨seo教程之快速提高百度权重系列一:网站域名的选择和使用,主要有以下几点:. 第一:不要用图新鲜或域名资源广泛而使用新出的域名后缀注册,要知道你的seo经验并不丰富,可能你目前的seo水平尚在试水,那么用这样的域名相信搜索引擎并不会十分看好.