免费移动字体 7个字体排版指南以提高移动设备的可读性
本文的作者将向您介绍7项移动字体排版的指南:为您自己留出空间,标准线宽度,松动和紧凑的线间距,找到最佳点,不要丢失抹布(文本的起伏边缘),减少对比度(减少对比度)(减少对比度),并根据比例调整跟踪。
您可能听说过良好的排版是看不见的,但是排版好的排版使阅读毫不费力。
当眼睛沿着文字线移动时,它会跳跃,称为扫视。您不会阅读字母,甚至短信,而您会阅读一些单词的快照,而大脑则填补了它的期望。如果大脑感到惊讶,它将回顾一下并检查其假设是否正确。良好的版式通过沿线创造平滑的流动来最大程度地减少您的眼睛所需的作品。
移动设备对任何打印机都有固有的挑战:有限的空间和较差的环境光。
但是,通过对已经用于网络的技术进行简单的调整,我们可以提高移动设备的可读性。
翻译本文时,我发现周围的许多设计师和产品经理没有区分移动字体和网络,其中许多人直接使用了网络的标准。关于这一点,我将在将来找到可以与您分享的相关信息。这次,我只讨论针对手工字体排版的7个移动字体指南。
1。为自己留出空间
与普遍的看法相反,排版不是关于屏幕上小曲线的布置。版式主要是关于它们内部和周围的空间。
要理解这一点,它有助于理解字体的来源:“ O”(和“ B”,“ C”,“ P”等)中间的孔称为“凹面”。当字体在原始压力机上的金属上雕刻时,这些计数器由金属打孔器制成,然后将其雕刻成板形。
第一类设计师实际上是在使用无法打印的形状,并且版式所需的字体本身要比构成的空间要少得多。
当我们谈论层次结构时,我们通常是指
,这可能意味着。但是,有一个额外的层次结构会影响线或段落的流动,这是空间层次结构 - 字母之间的空间小于单词之间的空间,而单词之间的空间小于线之间的空间。
要在移动设备上进行最佳的可读性,请特别注意空间层次结构,以及在自然光下的角色,字符串和段落中的格式塔(Gestalts)分组更为重要。
2。线宽标准
线宽是文本行的长度,或更确切地说,是文本行的理想长度,因为每行都是精确的。
普遍接受的理想舒适线宽度约为65个字符,线宽的物理长度取决于字体的设计,跟踪以及您使用的确切文本。本文的前65个字符设置为PT Serif的26.875EM,在sans,28.4375em,在Ubuntu,27.3125EM中。如果我添加斜体,小型大写字母或十几个其他打印细节,那将是不同的。
65个字符很少扩展到桌面浏览器的边缘,但是在大多数移动设备上,65个字符(如果显示的大小足够大,以至于可读),则延伸到浏览器的边界之外。因此,对于移动设备,您必须减少指标。
移动屏幕上没有普遍接受的线路宽度标准,但是传统上,报纸或杂志中的狭窄列文本往往是39个字符。由于这种理想的线宽度方法已经测试了几个世纪,因此它对移动版式很好。
3。松散而紧凑的行间距
线间距是行之间的空间,当设置得太紧时,从线的末端跳到下一个难以遵循的跳跃。当设置得太松时,单词之间的缝隙将开始安排,创建通常称为河流的东西,从而破坏了线的平稳流动。
理想的线间距不会太紧或太松。
线间距的通常标准约为1.4em,但以我的经验,屏幕太紧了 - 屏幕上正常工作的字体的关键功能是大型计数器,需要额外的额外功能,从而维持空间层次结构。
为了扭转这一规则,较短的措施需要更少的线间距。因此,尽管您可能为桌面样式设置了一个稍微松散的区域,但请记住将其拧紧以与移动屏幕一起使用。
4。找到最好的观点
所有字体至少具有一种甜点(最佳状态),它们在屏幕上最能繁殖的尺寸的组合以及在浏览器中应用的抗恶化点尽可能少扭曲字体的设计。
最好的状态通常是大多数触诊与像素网格对齐的点 - 像素字体,如果您记得这些,则只有在它们处于最佳位置时。
将字体设置为最佳点将导致更大的对比度。在设计移动设备时,对比度尤其重要,因为它可能会在智能照明实验室外分散注意力。
您会发现对领导者的轻微调整将推动和拉动整个像素的线条。我认为,对比度比移动屏幕好,因此,如果您必须妥协导致整个像素的线路,那就这样做。
设计人员的标准方法是使用基线网格进行键入,但是对于移动设备,我们需要使用X-Height(X-Height实际上是LowerCase'X'的高度)。我们从合法性研究中学到的是,大脑识别文本的顶部,而不是底部,因此为了获得更大的扫视流,我们需要确保角色的顶部与像素最紧密地对齐。
5。不要失去抹布(文本的起伏边缘)
一块抹布是一段文本的边缘。您阅读的大部分内容都是对齐的(至少对于拉丁语言),从而导致右边缘锯齿状。
当您的眼睛从线的一端跳到下一端时,如果所有跳跃都保持一致,大脑可以更好地判断下一个跳跃的角度和距离。考虑一下它穿过践踏的石头,如果它们的间距相同,速度要快得多。因此,文本的左边缘应该是平坦的,每行是从同一位置开始的(对于从右到左读取的语言而言,相反)。
因此,您不应核心对齐两三行文本。
通常,文本是合理的,这意味着线上的文本均匀间隔,因此两侧都没有抹布。 (我怀疑合理的文本很时髦,因为响应式设计教会设计师在街区中思考。)合理的文字导致空白不一致,在最坏的情况下,导致一条线上几个单词,这非常苛刻。较短的措施加剧了合理文本的问题,因此无法在移动设备上阅读合理的文本。
从左到右:左对齐,中心对齐,两端对齐。
如果整洁对您真的很重要,请使用文本连字符来软化抹布,但切勿证明您的移动设备上的文本是正确的。
右侧右侧文本在移动设备上具有额外的好处:文本通常会分散注意力,并且读者经常远离文字 - 检查站名称或接听电话。抹布在右色谱柱上创建一个随机的形状,从而帮助眼睛重新定位其最后一个位置,最少的重新读物。
6。减少对比度(减少对比度)
虽然我们希望鼓励文本和背景之间的对比,但我们希望在不同类型之间减少它。
这样做的原因是我们的大脑根据背景来判断重要性。您的标题可能是桌面上身体大小的两次甚至三倍,并且效果很好,因为屏幕上还有更多文本。在移动设备上,可见文本大大减少,因此对比度夸大了。
大多数设计师使用某种斐波那契序列来调整文本大小。对于移动设备,将比率提高以减少类型大小的对比度。例如:如果使用黄金比率增加尺寸,则乘以0.618。对于移动设备,将较小的比率乘以0.382。
桌面屏幕比移动屏幕更容忍更极端的打印量表。
7。根据比例调整跟踪
当我们调整移动设备的字体尺寸时,我们需要了解跟踪的必要更改。
(让我首先说明您不应该调整Kerning。Kerning是两个字母对之间的间距,以便它们在视觉上与其他字符之间的空间一致。在构建字体时添加Kerning将添加到字体中,这可能需要几个月的时间。如果您选择了一个专业的字体,则可以正确地构建字体免费移动字体,如果您认为它是正确的,并且可以正确地找到它的不同Font,则可以找到它。
跟踪不是kerning,跟踪是应用于字体中所有字符的字母间距,并且通常也不应该调整跟踪。
此规则的例外适用于大型文本,例如标题和小文本,例如脚注。较大的文本需要更少的跟踪,而较小的文本需要更多的跟踪。前者是由于分组而造成的,而后者是为了比较的好处。如果您对标题进行了更改,或者使用的是通常具有更严格跟踪的显示字体,则可能需要在收缩时放松跟踪。
概括
排版是设计师在生活上花费的终生磨练过程,这正是因为每个文本,每个字体和每种技术都带来了新的挑战。在每种情况下,任何严格的规则始终都会起作用。
当您渴望可读性时免费移动字体,您需要记住三个原则:平滑线流,清晰的空间级别和足够的对比度。对于移动网络尤其如此。
没有规则不能被您自己的证据推翻,但是这里的准则将是在移动设备上精美布置文本的理想起点。