原文: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)不是天上掉的,需要精心的策划和定制。比如,如果该字体不支持加粗或斜体就不要强求。

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

衬线与无衬线

无衬线字体(sans-serif typeface)在笔划结尾处没有被称为“衬线”的伸出去一点点的部分。衬线和无衬线都是很好的选择。

衬线字体在传统的 app 里更常见,例如 Medium、iBooks 和 The New York Times,用于鼓励阅读和增强故事性,很有魅力。我个人认为在设计时一定要从最根本的地方开始考虑,所以我非常建议在讲述故事时采用衬线字体。再加上衬线字体在现代 app 里很少见,这样就会更加给用户一种独特的感觉。

无衬线字体则更加实用、中性,大量使用在现代 app 中,但这也意味着普通。有无数种无衬线字体,所以在挑选时一定要仔细。

人们说设计不是艺术。事实并非如此,伟大的设计就是艺术。

字偶距(Kerning)

字偶距用于调整某两个字符间的距离,以便优化视觉效果。

这个网站很棒,可以测试不同的字偶距。

如何寻找字体

有一些字体很贵,但也有很多免费的好字体。只要选择你钟爱的那款就好了。如果要寻找字体,下面几个网站是最好的。

Google Fonts

可以在 Google Fonts 里免费下载字体,并在项目中任便使用。由于在 iOS 中只能通过下载和导入字体文件来使用自定义字体,所以下载选项就非常实用了。至少有两款非常杰出的字体:Open SansRoboto,默认使用在现代的安卓手机里。

可以用 SkyFonts for Mac 来自动同步到桌面。

如果你想下载 Google Fonts 的全部可用字体的话,可以借助这个 GitHub repository

TypeKit

Typekit 是 Creative Cloud 订阅的一部分,有很多杰出的字体可供选择。对于刚上手的人来说很棒。我喜欢的字体包括:Proxima NovaMuseo、Adelle Sans 和 Brandon Grotesque。

Fontstand

Fontstand for Mac 最棒的地方是购买字体前可以先试用一个小时。此外也可以不购买字体,每个月花一点钱来进行租借。

fonts.com

fonts.com 是按月订阅的,可以使用任意数量的字体,字体选择是目前最多的。字体的选项非常具体。例如,Avenir Next 有一个收费的 Rounded 字体。

fonts.com 也允许自行托管字体文件,也就是说你可以下载并在自己的服务器上托管。由于我对字体的痴迷,所以我在所有项目里都大量使用了这项服务。

资源

字体是一项值得探索的艺术,不止局限于 iOS。

字体指南

如果你想继续学习如何组合字体、撇号、引号、破折号和括号的话,建议看一下 typogui.de。

让字体更棒的五分钟指南

读起来真的很有趣。精心设计,留出时间给你停下并思考每一点。动画设计的很聪明,会给你更好的印象。

字体搭配指南

某些时刻,你会希望在设计中使用多种字体,以便增加正文文本、标题、说明文字或大段引用间的对比。这篇指南非常有用,根据一系列标准帮你搭配字体。

手写字体

关于手写字体有一门非常棒的课程。借助这些技术,可以创建 logo、个人品牌并探索字体。

Font Base

FontBase 是一款非常棒的字体管理 app,可以通过它在整个团队间共享字体,只要把他们添加到任意一个云端文件夹中即可。

只要点击一下,还可以访问 Google 库中的任意一款字体。

这个工具真的很有意思,此外还有一些隐藏功能。

Right Font

Right Font 也可以在团队间同步字体,还可以收藏任意一款字体。它会自动同步 Google Fonts 和 Adobe Typekit 上的字体。此外还可以访问不同的图标并用在设计中,真的是一款很棒的 app。

What The Font

是否曾经有这样一种情况,看见了一款字体,但是不知道到底叫什么?这个工具就是干这个的。你可以用 What The Font 这款 app 上传一张图片,然后它会从数据库中找出最接近的匹配。此外还有一个 iOS 版本。