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

前言

不知道大家平时是如何给应用选择字体的呢?作者菌作为一个设计小白,每到挑选字体的时候都会非常苦恼,托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和数字1,如果它们中的两个或多个过于相近,则你的读者很可能也会在阅读中遭遇同样问题。

image.png

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

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

结语

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

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

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

推荐阅读更多精彩内容