移动端字体在网页设计中的六大标准
新闻来源：优漫教育
日期：2021-08-09
或许你听过这样的说法，好的字体是隐形的，但是更准确的说，该是好的字体，让阅读行为不费力。当视线穿过一行文字时，它在跳跃，我们称之为扫描。你读的不是字母，甚至不是单词，而是单词某一部分的图像，大脑会补充它预期的内容。
如果超出大脑的预期，会促使眼睛回去验证假设是正确的。网页设计培训学校好的字体通过在字里行间创造流畅的视觉流动，大大减轻了眼睛的负担。对于任何字体工作者来说，移动设备都面临着天生的挑战:空间有限，环境光通常较弱。但是稍微调整一下已经用于网络的技巧，就可以提高移动设备的可读性。
一、留有足够的空间。
与一般观点相反，字体不是屏幕上弯曲的线条；主要在于周围和空间。字母本身对字体的影响字母本身对字体的影响要小得多。
要理解这一点，了解字体来自哪里是很有帮助的:字母o中间的圆孔(b、c、p等。)被称为凹槽。在最原始的印刷机上，铅字是用金属雕刻的，这些凹槽来自雕刻的金属活字，排列在盘子里。第一个字体设计师处理的模具其实不能用于印刷。相对于构成它的空间，字母本身对字体的影响要小得多。
谈到层次，我们通常指h1到p，有时是h6。但也有一个层次会影响行或段落的视觉流，这是一个特殊的层次：字母间距小于字间距，字间距小于行间距等等。为了在移动终端上创造最佳的可读性，我们应该特别注意这些特殊的水平。这些格式塔式的单词、行、段的文本组合在自然光环境中很重要。
二、行宽。
宽度是一行文本的长度。或者确切地说，这是一行文本的理想长度，因为很难准确匹配每一行。
众所周知，舒适阅读的理想宽度约为65个字符。宽度产生的物理长度取决于字体设计、字距(见下文)和你使用的具体字符。本文开头65个字符(译者注:请参考英文原文)，PTSerif字体26.875em宽，OpenSans28.4375em宽，Ubuntu字体27.3125em宽。如果加上斜体、大小写等字体细节，差别会更大。
在桌面浏览器中，65个字符很难触及边缘，但在移动设备中，65个字符(如果至少可以清晰地看到)将超过浏览器的边界。因此，在移动设备中，您必须减少行宽。移动终端没有普遍认可的宽度标准。但是，传统上报纸和杂志的狭窄列倾向于39个字符。考虑到这个理想的宽度经历了几个世纪的考验，移动字体也很好。
三、行距宽松，行距紧凑；
行距是行间的空间，行距太紧凑，视线很难从行尾看到下一行。行距太宽，字间距开始形成队列，形成我们通常意义上的河流，阻断行的视觉流。从左到右:理想的行距紧凑，太宽松。行距标准一般为1.4em，但根据我的经验，这对于屏幕来说太紧凑了：在屏幕上表现良好的字体有一个关键特征——大槽，需要更大的行距来维持空间层次。
另一方面，更短的行宽需要更小的行距。因此，您可能需要将桌面端的行距设置为松散点，并记住将移动端设置为紧凑点。
四、找出最佳状态。
所有字体至少都处于最佳状态，最佳尺寸显示在屏幕上，最佳字体的抗锯选项保持在浏览器中。在最佳状态下，大多数笔画通常可以排列在像素网格中——像素字体。如果你还记得，那些字体只有在字体大小调整到最佳状态时才有效。将字体设置为最佳状态可以形成更强的比较。在设计移动终端时，特别重要，因为室外强光可能会分散注意力。您将发现微调行距可以使每一行脱离完美的像素匹配。移动屏幕比行距更重要。所以，如果你必须在行距上妥协，以保持每一行都符合像素网格，那就这么做吧。
一般情况下，设计者通过基线网格排列文字。但在移动设备上，我们需要使用x高度(顾名思义，x高度是小写字母x高度)。通过易读研究，我们知道大脑识别的是文字的顶部，而非底部。所以要达到更加流畅的视觉流动，就必须确保字符顶部最适合像素网格。
五、不要忽视起伏边缘。
起伏边是文字的边缘。你读的内容的一部分是左对齐(至少是拉丁语系)，右差不齐。当视线从行尾跳到下一行时，大脑最好判断下一次跳的角度和距离。把每一次跳跃都想象成一个跳板。如果间距一致，会快很多。因此，文本的左边应该是平的，每行应该从同一个地方开始(对于从右到左的语言，正好相反)。
1、您不能将两三行以上的文字对齐。
一般情况下，文字会设置为两端对齐，这意味着每行文字用的空间相等，因此两侧没有起伏边缘。我怀疑两端对齐的流行与响应式设计有关，它教设计师以块状的形式思考。两端对齐的文本之间的空白不统一。最糟糕的情况是，一行只有几个字，这是非常不协调的。狭窄的行宽会加剧两端对齐的问题，所以移动终端很难阅读两端对齐的文本。
2、从左到右:左对齐，中间对齐，两端对齐。
如果整洁真的很重要，那么使用连字符号使起伏边缘更光滑，移动端两端绝对不能对齐。
在移动端，文字右边的波动边缘还有一个额外的好处：人们通常在分心的情况下阅读文字，读者的视线经常从文字上移开-查看站名或接电话。波动边缘创造一个随机的形状，使右撇子的视线通过重读最少的文字返回到刚才的位置。
六、减少对比。
在加强文本与背景对比的同时，还应减少不同层次文本之间的对比。在移动终端上，实际可见的文本很少，所以比较被放大了。原因是我们的大脑根据环境来判断重要性。在桌面上，标题可能是文大小的两倍甚至三倍，因为屏幕上有更多的文字，所以这是有效的。在网页设计培训学校的移动终端上，实际上可见的文字很少，所以比较被放大了。大多数设计师使用斐波那契数字列号组合。在移动终端，比例应该降低，以减少字体之间的比较。比如你用1.618的黄金比例乘号。在移动终端，应该用比例较小的1.382代替。桌面屏幕比移动终端允许更夸张的字体缩放。
