18565526634

网站建设 SEO优化 小程序

KNOWLEDGE/知识

网站建设,seo优化,小程序制作相关知识学习

网站设计中手机字体七大原则

发表时间:2020-12-18 16:07

文章来源:日成传媒

浏览次数:

也许你听过一句话,好的字体是看不见的,但更准确的说,应该是让阅读毫不费力的好字体。

视线越过一行字,就向前跳,我们称之为扫描。你读到的不是字母,甚至不是单词,而是单词的某一部分的图像,大脑会填充它预期的内容。如果超出了大脑的预期,它会会促使眼睛回去验证假设是否正确。通过创造流畅的视觉线条,良好的字体极大地减轻了眼睛的负担。

对于任何拥有任何字体工作的人来说,移动设备都存在固有的挑战:空间有限和环境光微弱。然而,我们可以通过稍微调整已经在网络上使用的技术来提高移动设备的可读性。

1.留有足够的空间,与一般观点正好相反。字体不是屏幕上的缠绕线条排列;它主要在于周围和相互的空间。

字母本身影响比构成的空格得多小。

要理解这一点,知道字体从哪里来很重要帮助:字母o(和b,c,p等)中间的圆孔。)叫做“凹槽”。在最原始的印刷机上,活字是由金属成雕刻而成的,而这些凹槽则来自于刻在版内的成型金属活字。第一个字体设计者处理的模具实际上不能用于印刷。字母本身影响比构成的空格得多小。

说到层次,我们一般指h1到p,有时也指会到h6。但是影响处还有一个带有行或段落的视觉流,这是一个特殊的层次:字母间距小于单词间距,单词间距小于行间距,等等。

为了在移动端创建最佳易读性,应特别注意这些特殊级别。这些格式塔中文字、线条、段落的组合在自然光环境下也很重要。

2.线宽线宽是一行文本的长度。或者说,它是一条线的理想长度,因为很难使每一条线都精确匹配。

众所周知,舒适阅读的理想线宽是65个字符左右。线宽的物理长度取决于字体设计、单词之间的间距(见下文)和您使用的特定文本。本文开头的65个字符,pt serif字体26.875em宽,open sans字体28.4375em宽,ubuntu字体27.3125em宽。如果加上斜体、大写和很多其他字体细节,会会有更大的区别。

在桌面浏览器中,65个字符很难触碰到边缘,但在移动设备上,65个字符(如果至少与看得)超出了浏览器的边界。因此,在移动设备上,您必须得减小线宽。

移动终端没有普遍接受的线宽标准。然而,传统上,报纸或杂志的每一个窄栏都倾向于会 39个字符。由于这种理想的线宽已经被测试了几个世纪,它在移动字体中也能很好地工作。

3.宽松紧凑的行距行距是行间的间距,行距太紧凑,所以会很难从行尾扫视到下一行的开头。行距太松,单词间距会开始形成成队列,造成我们通常意义上的河流,阻碍了线条的视觉流动。

从左到右:理想的行距,太紧凑太宽松。

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

相反,较短的线宽需要较小的行距。因此,您可能需要在桌面上设置得行距,并记住得使手机得上的设置更加紧凑。

4.寻找最佳状态所有字体都至少有一个最佳状态,在屏幕上显示最佳大小,以及可以最好地将字体保留在浏览器中的抗锯齿选项。

在最佳条件下,多笔画通常可以排列在——像素的像素网格中。如果您还记得得,这些字体只有在字体大小调整到最佳状态时才有效。

将字体设置为最佳状态可以产生更强的对比度成。为移动终端设计时,对比度尤其重要,因为室外眩光可能会分散注意力。

您会发现,微调行间距会,使每一行偏离完美的像素匹配。我觉得得,在移动设备的屏幕上,对比度比行距更重要。因此,如果您不得在行距上妥协,以保持每条线都适合像素网格,那么让我们这样做做。

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

5.不要忽视起起落落。起伏是文字的边缘。您读取的多数字是左对齐的(至少对于拉丁文而言),导致右边缘不均匀。

当视线从线的终点跳到下一条线的起点时,大脑应该能够判断下一次跳跃的角度和距离。把每一跳都当成成跑过跳板。如果距离一致,则会快多。因此,文本的左边缘应该是平坦的,每一行都应该从同一个地方开始(从右向左的语言则相反)。

因此,您永远不要将超过两行或三行的文本居中。

通常情况下,文本会设置为成,也就是说每行文本所占的空间相等,所以两边没有会起伏的边缘。我怀疑端部对齐的流行与响应式设计有关,它教会设计师以块的形式思考。对齐文本产生的空白不均匀。最坏的情况会,一行只有几个字,相当不协调。较窄的线宽会突出了两端对齐的问题,因此两端对齐的文本在移动端很难阅读。

如果整洁真的很重要,用结扎线来平滑起伏的边缘,永远不要在移动的一侧使用末端对齐。

在移动端,文本的右侧还有一个额外的优势:人们通常在分散注意力的场合阅读文本,读者的视线经常从文本——移开,以查看看电台名称或接听电话。起伏边创造了一个随机形状,让右撇子的视线可以通过重读最少的文字,回到刚才的位置。

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

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

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

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

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

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

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

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

总结

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

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

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

深圳网站建设|网站制作|网页设计|app开发|网站建设公司

 

相关标签:[db:TAG标签]

相关方案查看更多