A1636f361d94d539668ae20ae14a4d53
字体指南「让内容清晰可读」

原文 Learn Typography


设计中 80% 以上都是文字内容,所以对字体的理解至关重要。要始终把可读性放在第一位。

字体基础

学习下面这些字体术语并理解其含义,这一步非常重要,因为在解释字体时会经常提到它们。

优秀字体的准则

字体首先需要的是整洁和简单,并不一定要是原创的,除非你是一名字体狂热爱好者。良好的字体让用户更愿意阅读,所以最好专注在字体的实用性上。看一下良好字体的 5 条准则,并应用在现代移动应用和网站的设计上。

San Francisco 字体

iOS 默认字体是苹果自己做的 San Francisco,在这里可以下载这款全新的字体。漂亮、免费,但最重要的是,这款字体是为易读性而设计的。建议观看此视频以理解它是如何影响 iOS 设计的。

SF Pro 字体的字间距

iOS 会根据字体大小自动调整 San Francisco 的字间距(tracking value)和 Text/Display 间的切换。这样可以确保字体的易读性。20 pt 及以上时会使用 SF UI Display,否则则会使用 SF UI Text。tracking value 只能应用在 Photoshop 中,但以下公式可以供 Sketch 进行转换。

使用这款 Sketch 插件来快速应用正确的字符间距值(character spacing value)。

动态字体(Dynamic Type)

辅助功能是 iOS 11 的重头戏。现在预设了很多动态字体,如下图所示,如果把 text 设置为 Body 并启用 Dynamic Type 的话,系统会根据用户的设置自动增大尺寸。

正文

选择一款在正文中看起来很棒的字体。如果拿不定主意,就选择一款清晰易读的。我的最爱是 San Francisco、Helvetica Neue、Open Sans、Roboto、Proxima Nova 和 Museo Sans。这些字体全部都可以在 Google FontsTypekit(用 Creative Cloud 账户)免费下载。

字体大小

字体大小应该至少为 11pt,以便在 iPhone、iPad 和 Apple Watch 上进行阅读。然而这只是最小值,建议的正文尺寸实际上是 15-19pt

字体大小正确和错误的做法

文字不应该小于 10 pt 以免让大多数读者无法阅读。

字重

SF 这样的现代字体都有多种额外的字重:ThinUltralightLightMediumSemiboldHeavyBlack 以及常规的 RegularBold

基本上来说,11-19 pt 使用 SF Text Regular20-34 pt 使用 SF Display Medium34 pt 以上使用 SF Display Bold。需要注意的是,字体越大就越适合细的字体,例如 Light 和 Ultralight,但我的建议是除非你对字体很了解,否则就不要用。在 iOS 11 里,大标题通常也更粗。

行高

行高应该介于字体大小的 120%145% 之间。

在右边的例子中,行高等于字体大小(100%)。左边则为 145%。差距很明显。如果把字数再乘以十倍,你就知道阅读这种紧凑的文字有多烦人了。

每行 45-90 个字符

如果一行太长了,阅读就很难保持专注。每行太多字效果会适得其反,因为阅读完一行文字会产生兴奋感,但如果一行太长,兴奋感就会减少。

明智地使用字体(Typeface)

知道一款字体(Typeface)并不代表会使用它。好看的字体效果(Typography)不是天上掉的,需要精心的策划和定制。比如,如果该字体不支持加粗或斜体就不要强求。

使用斜体、下划线、加粗、列表和颜色来加强层次结构和交互性。

top Created with Sketch.