Getting Typography Right in Digital Design

在数字设计中正确使用字体

字体可以成就也可以毁灭一个产品,本文将教会你如何善用字体

15041561034435.jpg

优化字体就是在优化可读性,理解性,可用性,综合所有的一切图形平衡。

这里有10条建议:

1. 尽可能少的使用字体数目

15039840801171.jpg

当你使用太多字体时,所有的字体都在争取注意力。

为了防止发生这种情况,尽可能的限制你用的字体的数量

同时使用超过三种字体,会导致记得设计结构看起来很杂乱,将使用的字体家族限制在一个很小的数目内(两个已经足够多,一个通常也已经很满足需求),并且尽可能的再整篇幅内使用同一个字体。

首先对你的设计主题文字选择一个字体

主题文字通常是你的产品内最常见的元素,将会是你的用户能看到和体验到的,你的主题文字将会占据你设计最大部分的影响力。

尽可能的使用同一个字体,知道你完全掌握

对于初学者,建议最好使用一种字体,直到完全掌握。多使用同一种字体的不同样式,现代字体大多有不同的样式,意味着他们共用统一字重。样式的多样化,可以帮助你在不同位置使用字体。一个很好的例子是苹果的 San Francisco typeface

15039847339343.png
确定所选的字体家族是互相补充的

如果你还是需要多个字体,确保字体们可以互相补足。下方的 Gerogia 和 Verdana 相比较右边的 Baskerville 与 Impact ,左边的字体表达了相同的价值,悦目的搭配,而右侧则显得过于大的字重导致 Imapct 对整个搭配都带来了极大的阴影。

15039853353396.png

2. 选择正确的字号

15039853655363.png

字号的不同,严重影响到你的屏幕阅读体验:

  • 字太小导致阅读困难,这就导致很多读者会跳过其所呈现的信息。尤其是对于移动设备,小的字对于小且亮的屏幕简直就是阅读灾难。

  • 字太大会导致分心,并且更倾向于单个字本身。

这就是为什么你需要选择合适于你设计的正文。提供一个统一适用所有的标准是不可能的,以下是一些建议:

  • 对于桌面,使用 16 px 或更大的正文字号。不过分大并且适合阅读

  • iOS 设备:使用至少 11 点的字体,可以适应大多典型阅读距离而不用缩放

  • Android:最小的可读字体在 12 sp,但仍然建议最少使用 14 sp 在主体文字上。

Tip : 分布式缩放「modular scale」是一种用于确定字号的方式,首先选择一个字体比例,例如黄金比,然后选择一个基本的字号,通过连续加倍或者缩小,得到有序的字号,这些可以帮助你选择不同字号来应用于设计。Gridlover 是一个可以方便确定字号的工具。

3. 左对齐以及留意空白

15039965188330.png

在西方世界,阅读习惯为从上到下,从左到右。将左侧对齐,将会更方便于阅读。左对齐有助于帮助眼睛换行阅读找到左边界。

留白也是非常重要的,要尽量避免一行内只出现了一个单词「widow」。

15039966913779.jpg

4. 选择一个能够在大多字号下良好表现的字体

15039979115673.png

用户会通过各种各样的方式访问你的网页或者 APP,要选择大多时候都能在各种字号下呈现良好可读性的字体。

尽量不要使用草体的脚本字体,这些字体虽然很美观,但是却难以阅读。

15039987850252.png

5. 使用可以区分字母的字体

15039989009496.png

辨识度「Legibility」是用来衡量一个字符于另一个字符在特定的字体中能够多容易辨别出来的概念。并不是所有的字体都优先考虑了辨识度,很多字体将 「i」和「l」设计的很难区分。有些时候,字间距也是十分重要的问题,字间距不够,会导致 「r」与「n」很容易的被混识为「m」。需要尽量避免使用此类字体,否则会在小屏幕上非常难读。

6. 限制每行的文字长度

15040564395795.png

行长「Line Length」是一段文字的横向长度。长文字是在设计中最常见的问题,每行拥有刚刚合适的文字是阅读体验良好的秘诀。最为主流的观点是,理想的行长在桌面阅读上不能超过60个字符,包含所有的空格在内。这种行长能够积极的影响我们的阅读节奏,人的心会在跳到下一行的时候感到愉悦,只要这个动作不是特别频繁。

15040574802835.png

很少有出现60个字符就超出桌面屏幕范围的,但是对于移动平台来说,很容易越界。对于移动平台来说,最佳规则是30-40个字符每行。

下图中左侧图使用每行50-75字符,右图则使用30-40个字符每行。

15040849731008.jpg

在网页设计中,你可以通过使用 em 单位或 pixels 来严格限制你的文本宽度。

7. 禁止全部大写

15040852971431.jpg

全文本大写,在不牵扯阅读的地方全大写并没问题,但是最好不要在又阅读情况的时候全部大写,会十分影响可读性。也不要全大写的温饱超过一整行。

8. 不要忽视边缘文字

15040854845534.jpg

边缘文字一旦被对齐,会导致整个文本都被平均的分布在一行里,如果使用强制对齐,会导致出现不均匀的留白。

右侧留白对移动用户又额外的优点,阅读人的注意力很容易被各种因素带走,行留白在右侧留下了随机的停留区,帮助眼睛快速的重新定位之前阅读的最后位置。

9. 不要最小化行间距

15041471543517.jpg

排版就是对空间的掌控。

15041475542456.png

行间距就是两行文字之间的距离。

错误的行间距要么使文字看起来拥挤,要么使文字阅读起来容易间断。

良好的行间距,有助于提升阅读性。恰当的使用间距,已被证明可以增加理解:使读者首先了解到这段文字密度不大,并且容易阅读。一个简单的规则是你的行间距要比你的词间距要大些。最佳规则是大约 30% 即可表达足够好的阅读性。

“The main factors that will influence the readability of your text are a good balance between font size and line spacing”

主要影响可读性的因素是如何在字号和行间距间取得最佳平衡

15041495240888.jpg

10. 确保你的文字拥有足够的颜色差异

15041496280614.png

即便对比很高的文字,也在高亮度下难以阅读。

使用色彩和对比来帮助用户阅读和理解你的文字。对比在移动设计中尤为重要,因为有可能会导致注意力分散。

对比的正确使用是非常复杂并且非常常见的设计者需要面对的问题:

  • 选择的色彩与背景色过于相似,难以阅读。
15041500066510.jpg
  • 文字与背景的色彩对比度过高。通常会导致视觉疲劳。
15041501518870.jpg

WC3’s Web Content Accessibility Guidelines 有完整的颜色对比指导。描述了对比度的最低标准,以帮助设计者能够设计出良好视觉阅读的文本。在正文中有以下两条建议:

  • 小文字应当有至少 4.5:1 的对比对,7:1 的对比度是最佳的。

  • 大文字「在 14 pt 粗体或 18 pt 普通 以上」应当有 3:1 的对比度。

15041513878289.jpg

Tip: 使用 对比度工具 来快速确定你的优化范围。

Bonus: 有帮助的资源

结论

良好的排版应当不仅能让人阅读,也能让人感受。排版是每个设计师都需要在数字时代所掌握的技能。对于任何设计计划,指导和技巧都只是开始要掌握的。最好的方法就是练习,当你做的时候,你才能真的学习。当你尝试越多的排版样式之后,你就能更好的理解用户如何看待你的设计。

原文:Getting Typography Right in Digital Design by Nick Babich from Springboard

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,491评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,856评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,745评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,196评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,073评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,112评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,531评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,215评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,485评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,578评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,356评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,215评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,583评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,898评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,497评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,697评论 2 335

推荐阅读更多精彩内容