最初,因为关注思源宋体背后的技术细节,翻译小林剑博客中的开发日志,将其发布在这里。字缘 Fate/Typo 发展至今,内容也包括文字设计、品牌设计、开源与技术等。由字体出发,探索各领域的奥秘是我的兴趣所在,因此将其从原先的博客中剥离出来,单独成站,更换了域名,并重新设计网页。本文将介绍这一转变,欢迎反馈意见。


域名

如果你一直关注了 Fate/Typo,应该会觉得 drfun.xyz/typeface 这么长且夹杂斜杠的域名很难记。虽然已开通了联动的其他平台,不过使用宋体作为屏幕正文字体是我的一个实验,希望得到读者的反馈。

因此,我将网站迁移至 fatetypo.xyz,推动其成为主要阅读场所。「.xyz」意为代表包含 X、Y、Z 三个世代的全球社区,寓意潜力启发。


标识

思源宋体可通过 ccmp 的 GSUB 特性实现 biáng 的合字。近日,包含扩展 G 区的 Unicode Plane 3 开放商用,其中包含该字(30F1C 和 30F1D)。字缘的草创中借鉴了这一「彩蛋」,拆开了「字」,将「缘」塞入其中。作为标识,如此繁复的线条结构极大地削弱了辨识度。

思源宋体的 biáng,繁体与简体

新标识的设计灵感是诸多来源的糅和。IBM 新字体 IBM Plex 的介绍短片 “Eye On” Episode 2: The Font 的片头中,以点构成 Bézier 曲线,由圆至方。这在现代字体设计的流程中并不陌生。据此我制作了一段动画,发布在 Behance哔哩哔哩

□-○

自上世纪初,许多艺术家围绕圆形、方形、三角形这些基本几何造型展开研究与创作。马列维奇以方形、三角形与圆形摒弃对自然物品的描述,转而表达直接感受,创立绝对主义。包豪斯亦受马列维奇的影响,但表示与其在根本上是不同的。曾于包豪斯教习色彩与造型的俄国艺术家康定斯基,尝试以圆形、三角形、方形同红、黄、蓝配对,用最基本的造型与色彩证明二者间的呼应,以及可创造出的和谐与不和谐。奥普艺术的奠基者瓦沙雷利亦使用圆形、方形、三角形等基本几何造型,拒斥个性,主张创造与观者同感。上世纪六十年代,Bruno Munari 从古希腊、古埃及以及巴克敏斯特·福乐、勒·柯布西耶和阿尔瓦尔·阿尔托的作品中找出圆形、方形、三角形的关系——神、安全与封闭、设计师的关键连接形式,发布于《Bruno Munari: Square Circle Triangle》一书中。在字体设计领域,受包豪斯运动影响,Paul Renner 设计的几何无衬线字体 Futura 经久不衰,影响了包括 Avenir 在内的一大批著名字体。

左:马列维奇,《黑圆》,1915 年;右:康定斯基,《软硬》,1927 年
Futura 及近百年来受其影响的诸多几何无衬线字体字体

今天,基本几何造型也依然是各种设计语言的重要表达方式。Google 于 2014 年推出 Material Design,主张元素的「质感」。后丰富了「运动」等概念,已不再仅限于 Android 平台。为增强这一设计语言的扩展性,Google 更注重对基本线条和几何造型的强调。而其标识、识别系统及整个品牌系统字体,也是在 Android 8.1.0 中的「突出」字体,Product Sans,也是以几何圆形为基础构成的几何无衬线字体。

Nicholas Jitkoff, Design Is Never Done, Google Design
Product Sans 建立在纯数学几何圆形之上,但为保证易读性而进行了视觉调整

因此,在 Fate/Typo 的重新设计中,我选择了构成世界的基本几何造型——方、圆与三角。下面的章节中将介绍是如何在各方面体现出来的。


字体排印

字体选择

首先,我将网站的汉字字体由본명조换成了思源宋体。二者同属 Source Han Serif 字体家族,前者为韩文版本,大体符合「传承字形」;后者依据中国大陆现行字形标准。从个人喜好出发,我一定是选择前者,这也是本站投票渠道中的一致选择。不过,在实际对照测试后,我发现后者的易读性更高。这是因为这款字体基于日本字体小塚明朝,保留了大中宫、大字面的特点,在与具有「延展性」假名一同排印的日文中可以保持和谐,但在基本全是汉字的中文排印中则存在重心不一的问题。Adobe 的合作方常州华文对中文版作出了符合中文排印的优化。故在「传统」与「视觉」之间,选择了后者。

思源宋体韩文版与简体中文版对比

拉丁文部分的字体选择了历史悠久的 Adobe Garamond。历史上第一位冲压活字字体设计师 Claude Garamond 设计了影响至今的 Garamond 字体。Adobe Garamond 是诸多 Garamond 字体中对原活字复刻最佳的字体之一,为 Adobe 自 1989 年始的「Adobe Originals」字体系列中最早的字体中的一款。小林章策划《西文字体 2》时,在 Tokyo TDC 的协助下进行的问卷调查中,这款字体超过 Helvetica 荣登「最经常使用的字体」榜首。

左:使用思源宋体自带的西文字体 Source Serif;右:西文部分使用了 Adobe Garamond Pro

「宋体」是对汉字印刷字体的泛称,今日流行的宋体相比雕版印刷时代的字体,仅保留了「折角」的装饰与横细竖粗的笔画特征,承袭了曲线简洁鲜明的小塚明朝的思源宋体已然不见历史遗韵。故西文采用 Garamond 也是希望在现代与历史之间找到平衡。另外,Adobe Garamond Pro 字宽更窄,在中西文混排时,相同空间可传达更多信息。

小塚字体与思源字体的设计师山本太郎在今年的 ATypI 的演讲中认为,像小塚明朝或者思源宋体这样的「现代」字体与「传统」的 Adobe Garamond 是无法匹配的。但在实际阅读中,由于表意文字中丰富的曲线,即使细节处十分「锋利」,观感更加舒适。思源宋体的西文部分,采用了已有的 Source Serif,但并非是原封不动加入,而是做了笔画粗细调整,但这一做法也十分容易减损西文字体的表情。Fate/Typo 的正文中,同为 SemiBold,Adobe Garamond 要比思源宋体「粗一些」,阅读起来实际更为流畅。关于这一点,可以继续阅读下一章节。

新岛实设计的小塚明朝字体样张

本文发布之日(2017 年 12 月 1 日)适逢小塚明朝发布 二十周年

字号与字重

思源宋体包括 SemiBold、Bold、Heavy 三种字重,对应 Adobe Garamond Pro 的 SemiBold 与 Bold 两种

字重,Weight,即字体的笔画粗细。通过不同的字重,可以满足不同文本内容的更好表达。例如顶部的标识中使用了 Bold 字重的 Adobe Garamond,更易辨识。又如思源宋体最粗的 Heavy 仅在首页文章标题中使用,而文章中的一级、二级标题等则使用的是次级的 Bold,这是因为大字号文字中「留白」有利阅读(实验性)。

正文字号为 20px。屏幕媒介早年与衬线字体水土不服,即使在今天,像素密度已然超过人眼可分辨的程度,但还是很少有厂商会选择衬线字体作为系统默认字体,除了因为无衬线字体的「现代感」已深入人心,也是因为大多数衬线字体,特别是汉字的宋体、明体在屏幕下的易读性较弱。而即使思源宋体针对屏幕作出了优化,若字号过小,也依然无法实现流畅阅读。

更新:2018 年初,在经过数月的阅读实践,访问多为读者后,决定将字号缩小至 16px,提升阅读体验。

相较小塚明朝,思院宋体的横画作加粗处理

细心的你可能留意到,前文提及的基本几何造型包括圆形、方形和三角形。然而,三角形并不容易融入网页元素的设计中。通过字体,三角形悄然加入到 Fate/Typo 中来。


元素

网页元素与标识的规则统一,非圆即方。在很多地方都存在方与圆的对比,例如评论框与按钮,再如首页的网格排版的文章方块与推荐的热门文章的缩略图。

移动端相应布局中的顶部交互元素,大胆地使用了毫无符号特征的几何图像作为菜单与搜索的按钮。与标识不同的是,方的边长与圆的直径并非等长,而是根据相同面积作出了微调。


布局

以往的布局设计中,我力求在更少的空间内「塞」下更多文本,从而忽略了易读性。在将文章同步至 Medium 后,发现减少正文的宽度可使阅读更为流畅。


…………

还有更多变化等待你的发现~


结语

Fate/Typo 已运行逾半载春秋,今次改版希望为自己营造一个易展现内容的场所,也希望成为更多字体爱好者的聚集地。如果你对 Fate/Typo 的建设有什么意见和想法,可以加入 Fate/Typo Group 参与讨论,关注 Fate/Typo 频道 ,每日接收最新字体相关资讯。

如果你觉得本站对你有所帮助,不妨把字缘告诉你的朋友们。


 

发表评论

电子邮件地址不会被公开。 必填项已用*标注