跟你聊聊移动端字体的7准则!

   当视线掠过一行文字时,它是跳跃前进的,我们称之为扫视。你读的不是字母,甚至不是词语,而是文字某部分的影像,大脑会补上它预期的内容。如果超出大脑预料,它会促使眼睛回去核实假设十分正确。通过在字里行间创造平顺的视觉流动,好的字体极度减轻了眼睛的负担。

  对任何字体工作者而言,在移动设备上要面临与生俱来的挑战:空间有限,环境光通常比较微弱。不过将已经用于web端的技巧稍加调整,我们就可以提升移动设备的易读性。

  一、留足空间

  与普遍观点恰好相反,字体并非屏幕上弯弯曲曲的线条排列;它主要在于周围和相互间的空间。

  字母本身对字体的影响,与构成它的空间相比,要小得多。

  要理解这一点,了解字体从何而来很有帮助:字母o(还有b、c、p等等)中间的圆孔被称作“凹槽”。在最原始的印刷机上,铅字由金属雕刻而成,这些凹槽来自雕刻成型、排列在盘中的金属活字。第一个字体设计师所处理的模具,实际上并不能用于印刷。字母本身对字体的影响,与构成它的空间相比,要小得多。

  谈到层次时,我们通常指的是h1到p,有时候还会到h6。但另外还有一种层次在影响着行或段落的视觉流,这是特殊的层次:字母间距小于字间距,字间距小于行间距,以此类推。

  要在移动端创造最佳易读性,尤其要注意这些特殊层次,这些格式塔式的词语、行、段落的文字组合,在自然光环境下同样至关重要。

  二、行宽

  行宽是一行文字的长度。或者确切的说,是一行文字的理想长度,因为很难让每一行都精确吻合。

  众所周知,舒适阅读的理想行宽是65个字符左右。行宽产生的物理长度,取决于字体的设计、字间距(见下文)和你使用的具体文字。本文开篇的65个字符(译者注:此处请参见英文原文),用PT Serif字体是26.875em宽,用Open Sans是28.4375em宽,用Ubuntu字体是27.3125em宽。如果再加入斜体、大小写和一大堆其他字体细节,还会有更大的差异。

  在桌面端浏览器中,65个字符很难触及边缘,但在移动设备上,65个字符(如果至少大到看得清)会超出浏览器的边界。所以,在移动设备上,你必须得缩减行宽。

  移动端并没有普遍认可的行宽标准。不过传统上,报纸或杂志上每一个窄列都会趋向于39个字符。鉴于这个理想行宽已经经历了数个世纪的考验,它在移动端字体上也运转良好。

  三、宽松行距、紧凑行距

  行距是行之间的空间,行距太紧凑,会让视线难以从行尾扫视到下一行首。行距太宽松,字间距会开始形成队列,产生了我们通常意义上的河流,阻断了行的视觉流。


  从左至右:理想行距、太紧凑、太宽松。

  行距的标准通常是1.4em,但以我的经验,这对于屏幕来说太紧凑了:在屏幕上表现良好的字体都有一个关键特征——大的凹槽,大凹槽需要更大一些的行距来保持空间层次。

  反过来,更短的行宽需要更小的行距。所以你可能需要将桌面端的行距设得宽松点,同时记得将移动端的设置得紧凑些。

  四、找到最佳状态

  所有字体至少都有一种最佳状态,在屏幕上展现最佳的尺寸,还有在浏览器中最能保持字形的抗锯齿选项。

  最佳状态下,多数笔画通常都能排列在像素网格中——像素字体,如果你还记得的话,那些字体仅仅在字号调整到最佳状态下才有效。

  将字体设为最佳状态能形成更强烈的对比。为移动端设计时,对比尤其重要,因为户外的强光可能分散注意。

  你会发现,微调行距会使每行脱离完美像素匹配。我觉得,在移动设备屏幕上,对比的重要性胜过行距。所以如果你不得不在行距上妥协,来保持每行契合像素网格,那就这么做吧。

  通常设计师通过基线网格来排列文字。但在移动设备上,我们需要使用x高度来代替(x高度顾名思义,就是小写字母x的高度)。从易读性研究中,我们知道大脑识别的是文字顶部,而不是底部。所以要成就更加平顺的视觉流,我们要确保字符顶部最契合像素网格。

  五、不要忽视起伏边

  起伏边是一段文字的边缘。你读的多数内容是居左对齐的(至少对于拉丁语系而言),导致右边沿参差不齐。

  当视线从行尾跳至下一行首时,大脑最好要能判断出下一次跳跃的角度和距离。把每次跳跃都想象成跑过跳板,如果间距保持一致,就会快很多。因此,文字左侧边缘应该是平的,每行从同一个地方开始(对于从右至左的语言,恰好相反)。

  因此你绝不应该将两三行以上的文字居中对齐。

  通常文字会设置成两端对齐,这意味着每行文字所占空间相等,所以两侧都不会有起伏边。我怀疑两端对齐的流行和响应式设计有关,它教设计师们以块状形态思考。两端对齐的文字产生的留白不统一。最糟的情况会导致一行中只有几个字,相当不协调。更窄的行宽会加重两端对齐的问题,所以两端对齐的文字在移动端是难以阅读的。


  从左至右:左对齐、居中对其、两端对齐。

  如果整洁真的非常重要,那么使用连字符号来让起伏边更平滑,绝不能在移动端使用两端对齐。

  文字右侧是起伏边在移动端还有一项额外好处:人们通常在易分心的场合阅读文字,读者视线频繁地从文字上移开——查看站名,或是接电话。起伏边创造了一个随机形状,让右撇子的视线可以通过重读最少的文字,回到刚才的位置。

  六、减少反差

  增强文字与背景对比的同时,我们也要减少不同层次文字间的反差。

  在移动端,实际可见的文字更少,所以反差被放大了。

  其原因是我们的大脑基于环境来判断重要性。在桌面端,标题可能是正文字号的两倍甚至三倍,因为屏幕上有更多文字,所以这是有效的。在移动端,实际可见的文字更少,所以反差被放大了。

  多数设计师使用斐波那契数列式的字号组合。在移动端,应该缩小比率来减少字号间的反差。比如,如果你使用黄金比例1.618与字号相乘。在移动端,应该用更小的比例1.382来替代。


  桌面端屏幕比移动端容许更夸张的字号缩放。

  七、按比例调整字间距

  为移动端调整字号时,我们要意识到字间距发生了必要的变化。

  (先说一句,不应该调整固有字距。固有字距是两个字母相互组合时的距离,使它们的间距与其他字母间距在视觉上统一。创作字体时,就纳入了固有字距的考量,这个过程可能要花上数月。如果你选用了一款专业的字体,它的固有字距就是合适的,如果你觉得不对,请换一个字体。)

  字间距并不是固有字距。字间距是字体中应用在所有字符上的间距。通常你也不应该调整字间距。

  大字号是个例外,拿标题和小号文字(比如脚注)举例。大号文字需要减少字间距,小号文字需要增加字间距。前者是考虑到分组,后者则是为了增强对比。如果你在调整标题,或是用了通常字间距紧密的艺术字体,缩小时可能就需要把字间距放开一点。

  总结

  字体是一门工艺,设计师终其一生都在精心打磨。的确如此,因为每个文字、每种字体和每项技术都带来了新的挑战。没有一成不变的普适规律。

  假如你追求易读性,要牢记三条原则:行内的视觉流要平顺,空间层级要清晰,要有足够的对比。这尤其适用于移动端页面。

  没有不可撼动的规则,全凭你双眼决断。不过本文的指南可以作为理想的出发点,让你在移动设备上优美地排列文字。

时间: 2024-11-13 03:51:34

跟你聊聊移动端字体的7准则!的相关文章

移动端字体7准则

  可能你听过这说法,好的字体是隐形的,不过更准确来说,应该是好的字体让阅读行为毫不费力. 当视线掠过一行文字时,它是跳跃前进的,我们称之为扫视.你读的不是字母,甚至不是词语,而是文字某部分的影像,大脑会补上它预期的内容.如果超出大脑预料,它会促使眼睛回去核实假设十分正确.通过在字里行间创造平顺的视觉流动,好的字体极度减轻了眼睛的负担. 对任何字体工作者而言,在移动设备上要面临与生俱来的挑战:空间有限,环境光通常比较微弱.不过将已经用于web端的技巧稍加调整,我们就可以提升移动设备的易读性. 1

Js动态设置rem来实现移动端字体的自适应代码_javascript技巧

下面一段代码给大家介绍了Js动态设置rem来实现移动端字体的自适应,以此做个记录,方便以后需要,感兴趣的朋友一起看看吧. 具体代码如下所示: //设置根元素字体 var win = window, doc = document; function setFontSize() { var winWidth = $(window).width(); //750这个数字是根据你的设计图的实际大小来的,所以值具体根据设计图的大小 var size = (winWidth / 750) * 100; do

网页端字体加载优化

本文讲的是网页端字体加载优化, 网络字体加载看起来也许非常复杂,但如果你使用本文的字体加载模式的话,这也并不是一件复杂的事情.你可以将这些模式组合起来,创建一个兼容所有浏览器的字体加载方式. 这些模式的代码样例都使用了 Font Face Observer,一个精简的网络字体加载器.Font Face Observer 将会根据浏览器的兼容情况使用最高效的方式来加载字体,所以这是一个非常棒的网络字体加载方式,同时你不需要为跨浏览器的兼容性而操心. 基础字体加载模式 分组字体加载模式 限制字体加载

移动端布局设计神器ADOBE COMP CC

  越来越多的设计师开始借助移动端的工具做设计了,当然这也是必然的趋势.比较典型的设计类APP Paper,就是来自美国的高大上创业公司Fifty-Three,这个iPad应用居然还有一个更为高大上的木质绘图笔Pencil,国内著名修图工具美图秀秀更是干脆转型做手机厂商,可见移动端"红海"还不足以抵挡大家对于大趋势的追随. 当然,设计类软件开发商Adobe自然是不会放弃移动端的.较早使用移动端PS的同学可能会记得,这款在桌面端大杀四方的必备软件,在移动端上经历了怎样的涅磐--几乎每一版

移动端开发:架构那点事!

此前,58 同城的技术委员会执行主席沈剑在 OneAPM 的技术公开课上分享过一个主题,「好的架构不是设计出来的,而是演技出来的」.因为对很多创业公司而言,随着业务的发展,网站流量或者移动端用户都会经历不同的阶段.前期的时候,很难去设计一个百万或者千万级并发的架构,所以后期往往不断对架构进行更新迭代. 当然,在这里也推荐一篇文章<移动开发中的痛点>,本文是 infoQ 举办线下聚会的一次讨论整理,当时参与的讨论者包括唐巧.郭亮.郭虹宇.邓宇光.代码家等国内知名移动开发者.其中就谈及了 MVC

前端知识图谱,你值得收藏

综合类 - [前端知识体系](http://www.cnblogs.com/sb19871023/p/3894452.html) - [前端知识结构](https://github.com/JacksonTian/fks) - [Web前端开发大系概览](https://github.com/unruledboy/WebFrontEndStack) - [Web前端开发大系概览-中文版](http://www.cnblogs.com/unruledboy/p/WebFrontEndStack.h

最全前端资源汇总

一.概要 这份汇总整理,很程度上参考了GitHub最全前端资源汇总:云集前端教程.开发资源.免费书籍.手册规范.求职面试等等,旨在为前端学习 & 技能提升提供方便.当然,并不期望这成为一个前端武学收藏夹:毕竟,只有自己掌握,才是真正拥有:况且前端发展如火如荼,日新月异.这里会尽量保持探索 & 学习 & 更新.欢迎大家推荐,反馈,谢谢! 二.优秀的网站 JS前端开发群月报 前端开源资源库 国内老牌技术社区:OSChina.博客园.CSDN.51CTO 免费的it电子书:http://

飞腾排版怎么用

  1.将维思的矢量图库转移到飞腾中 早前的维思中提供了丰富的矢量图库,但飞腾中却没有,如何才能让飞腾共享这些矢量图库呢?首先要将维思中的矢量图库按照类别排成文件.比如将 Animal里的108张矢量图按顺序排成一个Animal.pub文件.接着用飞腾打开这个Animal.pub文件,将矢量图按照顺序拖放到库管理窗口中,存盘为Animal.odf文件.以此类推,可将维思中所有的矢量图库转移到飞腾库管理窗口中.如果要在多套飞腾系统中使用,只需将飞腾目录下的 ODF子目录中的文件复制到相应系统中即可

飞腾软件排版工具怎么用

  1.将维思的矢量图库转移到飞腾排版软件中 先将维思中的矢量图库按照类别排成文件.举例:将Animal里108张矢量图按顺序排成一个Animal.pub文件.接着用飞腾排版软件打开这个Animal.pub文件,将矢量图按顺序拖放至库管理窗口中,存盘为Animal.odf文件.同样,可将维思中所有的矢量图库转移到飞腾排版软件库管理窗口中.如果要在多套飞腾排版软件系统中使用,只需将飞腾排版软件目录下的ODF子目录中的文件复制到相应系统中即可. 2.巧用图像变形工具 在报纸排版过程中经常会遇到改变标