<写给大家看的设计书>阅读笔记 二 [字体篇]

前言

不知道大家平时是如何给应用选择字体的呢？作者菌作为一个设计小白，每到挑选字体的时候都会非常苦恼，托Google Fonts 的福，作者菌算是把工作中遇到的界面设计应付过去了，但俗话说的好，不想当设计师的前端不是好产品。这不，作者菌恰好在书里发现了关于字体挑选的章节，于是趁着机会做了点微小的工作，把经验分享给大家。

认识常见的字体分类(Typefaces Categories)

说到字体分类嘛，那可真是千奇百怪五花八门，但归结起来，在互联网产品开发过程中我们通常会关注以下六组字型：

image.png

接下来我们就详细讲讲其中的奥秘。

Oldstyle

想象一下，你手中握着一支楔形笔尖的钢笔，工工整整地写下自己名字的场景，对，这就是我们说的 Oldstyle 体。

Oldstyle 体总是带有衬线(Serif)的，你可以观察它们的收笔之处，是不是看到沟沟角角了呢？对，那就是衬线，想必有经验的各位已经很熟悉了，这里就不多做赘述。Oldstyle的另外一大特点，就是其规整的持笔角度。注意观察它们的小写形态，是不是发现字母收尾处衬线的偏斜角一模一样呢？这是因为在使用Oldstyle体时，笔尖相对于纸面的角度是固定的，因此细心的读者可能已经发现了，笔画之间有明显的粗细转换，而其中对角线处的笔画尤为纤细。
常见的Oldstyle 字体有：Goudy, Palatino, Times, Baskerville, Garamond等，它们太过常见，以至于读者很难将其中的某一个同其他区分开来，当然，这也是较为稳妥的字型选择，适用于企业官网，报告文书等等。

Modern

Oldstyle 体模拟了人类的笔触行为，但随着历史的车轮隆隆推进，字体的结构也逐渐改变，这时候，Modern体作为一颗耀眼的新星，被钦点为了机器最常用的印刷字体。

Modern 同样带有衬线，唯一差别在于，这些衬线都呈水平铺开，而非像笔尖写字似的稍稍倾斜，让Modern 体不自觉中拥有了一种冷淡的，优雅的造型。同时，由此带来的粗细笔触间的急剧转换，也令Modern 变得不太适用于文案主体——细的部分几乎消失，肉眼难以察觉，而粗的部分却又太过显眼。

你的电脑上或许已经安装了许多Modern字体，如Didot, Onyx and Times Bold等等，这里附上几种作者菌认为比较好的Modern字体，供大家参考。

• Bedini

  
  
  

  image.png

• Edition Regular

  
  
  

  image.png

• Rundfunk

  
  
  

  image.png

• Dubiel

  
  
  

  image.png

• Orgreave

  
  
  

  image.png

• Bodoni

  
  
  

  image.png

• Latin Modern Roman

  
  
  

  image.png

Slab Serif

随着工业革命的出现，广告商开始使用加细 Modern 体印制文案，然而带来的问题是，一旦用户站在一定距离之外，他们所能看见的便只剩下了竖线——就如同一道道呆立着的篱笆墙。这时候，Slab Serif 作为另一种解决方案被广泛应用到了工业之中，它还有一个别名叫做 Egyptian，因为这类字体流行的周期恰好与埃及狂热在西方文明中盛行的时间重叠，这也是为什么许多Slab Serif字体均以埃及文字命名的原因。
Slab serif 区别于前两种字体，它的笔画粗细是相当均匀的，并且适用于多种应用场合，以下是作者菌在网上搜集的Slab Serif字体:

• Sentinel

  
  
  

  image.png

• Adelle

  
  
  

  image.png

• Archer

  
  
  

  image.png

• Bodoni Egyptian

  
  
  

  image.png

• Foro

  
  
  

  image.png

Sans Serif

无衬线体是一种成熟于二十世纪中叶的字体，移除衬线并保持笔画粗细一致后，整体显得更加美观。值得注意的一点是，大多数 Sans Serif 字体都是单字重的，少数会提供不同字重的变形，如果你的字库里只有 Helvetica 或 Arial 的话，是时候认真考虑下加入一个 Sans Serif 家庭了。

然后是作者菌的优选：

• Futura

  
  
  

  image.png

• Brandon Grotesque

  
  
  

  image.png

• Gotham

  
  
  

  image.png

• Circular

  
  
  

  image.png

Script

Script 体囊括了一切模拟真实手写的——无论是用钢笔、毛刷、油性笔、铅笔或是美工笔——字体风格。 对Script 体的使用很有讲究，多一分则太繁，减之一分却又过于单调。简而言之，我们应尽可能地把 Script 用在刀刃上，比如对他人言论的引用、或是作为封皮的元素等等，切忌将其用在大段文字上，想象一下你看医生写病历时的感受吧，如果你不希望你的读者像作者菌那样一脸懵逼的话！
推荐时间:

• Big Mom Font Duo

  
  
  

  image.png

• Billaneiva typeface

  
  
  

  image.png

• Emellie Script Font

  
  
  

  image.png

• Heats

  
  
  

  image.png

Decorative

Decorative 体的使用是一门很深的学问，作者菌根据书里的内容总结了一个简单的法则，那就是：出其不意，剑走偏锋。

如果 Pious Henry 给你带来一种不正式感，试着把它用在较为正式的场合，看看会发生些什么？

image.png

假如你认为 Juniper 充满了西部的狂野，试试把它用在企业或者花店里，画面带来的冲击感一下子就不同了哦。

image.png

选择最合适的字体

说了这么多，让我们回归主题，如何为自己的产品挑选一款合适的字体呢？
在此之前，让我们先问几个问题：

• 这些字体将被应用在什么场景？书本印刷？杂志？或是网页内容？
  
  

  image.png
• 你选择的字体通用性强吗？它们是否能较好地兼容其他字体呢？
  
  

  image.png
• 字体的尺寸、空间，X-高度(小写字母的高度)合适吗？
  
  

  image.png

我们可以做一个简单的 I/l/1 测试:
试着打出大写字母I，小写字母L和数字１，如果它们中的两个或多个过于相近，则你的读者很可能也会在阅读中遭遇同样问题。

image.png

一般来说，我们可以遵循这样的步骤来挑选字体:

• 搜集那些拥有共同属性的字体，特征上较为相似的字体往往能很好的契合到一起
• 搜集来自于同一名设计师的字体，字体设计师通常都有自己独特的设计风格以及美学偏好，这类字体的兼容性也往往较好
• 为你的字体安排任务，明确每种字体的使用范围及要达成的目的，为读者营造一个清晰的视觉层次

结语

好了，一口气看了这么多，是不是感觉自己对字体设计的理解又增进了一步呢？如果你的回答是“Yes”，那作者菌饿了一天的肚子也算没白叫啦:-Ｄ，不说了，回家开饭～

Reference: https://designschool.canva.com/font-design/