方圆之间 · 字缘新颜

方圆之间 · 字缘新颜

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


域名

domainnameo.svg-2-1024x320.png

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

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


标识

logo.svg-1-1024x320.png

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

biang-1024x320.png
思源宋体的biáng,繁体与简体

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

sqf0-1024x320.png

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

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

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

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

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


字体排印

字体选择

typography.svg-1024x320.png

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

shsksc.svg-1-1024x320.png
思源宋体韩文版与简体中文版对比

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

AGP.svg-1-1024x320.png
左:使用思源宋体自带的西文字体Source Serif;右:西文部分使用了Adobe Garamond Pro

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

yamamoto-1024x320.png

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

koz-1200x580.png
新岛实设计的小塚明朝字体样张

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

字号与字重

fontweight-1-1024x320.png
思源宋体包括SemiBold、Bold、Heavy三种字重,对应Adobe Garamond Pro的SemiBold与Bold两种

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

fontsize-1024x320.png

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

kozshs-1024x320.png
相较小塚明朝,思院宋体的横画作加粗处理

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


元素

image.png

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

elementmobiletop-1.png

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


布局

image.png

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


…………

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


结语

drawingfatetypo2.svg-1024x683.png

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

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


Some rights reserved
Except where otherwise noted, content on this page is licensed under a Creative Commons Attribution 4.0 International license