3type 关于丁卯点阵体的设计思考
3type 字体
作者: Mac玩儿法编辑部 发布时间: 2021-01-25 #type #字体

3type 关于丁卯点阵体的设计思考插图

1987 年 9 月 20 日,一封电子邮件从北京发至德国卡尔斯鲁大学。邮件由英德双语写成,开头一句话便是「越过长城,走向世界」。

3type 关于丁卯点阵体的设计思考插图1

——这是中国向海外发出了第一封电子邮件,中国的互联网时代随之到来。这一年,正是农历丁卯年。

如今,计算机和互联网早已融入我们生活的方方面面,而这一切的背后,是一代科学家和工程师的付出。「丁卯点阵体」以此命名,意在致敬那些将中文世界带入信息化时代的先驱们。

3type 关于丁卯点阵体的设计思考插图2

「丁卯点阵体」是一套像素风格的中文字库,设计初衷是探索小尺寸像素汉字的可能性。经过实验,确认汉字在最低 7×7 的像素网格中仍然可读——这一尺寸,是最常见的国标点阵字(16×16)的四分之一。

3type 关于丁卯点阵体的设计思考插图3

之后,经过长达三年的设计开发,为之匹配了外文字母和标点符号,又全新匹配了一套 9×9 的像素字体。今年上半年面向公众开放了试用版本后,收到了热烈的反响;经过上个月的预售活动后,全套字体终于在今天正式发布了!

3type 关于丁卯点阵体的设计思考插图4

这是迄今为止第一款小至 7×7 的中文像素字体,也是唯一一款 9×9 的矢量格式的像素字体。为像素画创作、游戏开发、风格化平面设计开启了全新的可能性。

设计

「丁卯点阵体」分为 7px 和 9px 两个尺寸,全部汉字都在 7×7 和 9×9 的像素面积中表现。在这样有限的空间中,笔画的减省和粘连无可避免——但设计师尽量还原汉字的整体造型特征,让每个字都具有相当的可识别性,在上下文语境中则可以流畅地读出来。

3type 关于丁卯点阵体的设计思考插图5

在设计的过程当中,总体上并不回避笔画堆积造成的黑色「斑块」。尤其对于笔画多的字而言,有时「笔画密集」正是这个字的主要特征。

相对于 7px,9px 的设计空间要宽裕得多,因此有机会让笔画之间的区分更加明显,大段文字的阅读也更轻松。两者配套使用,可以在极低分辨率的环境下形成信息层级。

3type 关于丁卯点阵体的设计思考插图6

虽然可用的像素尺寸很小,但依然提供了一定的发挥空间,因此这套字体中,设计师根据不同字的需要,调节偏旁部首的宽度和细节,并在整体上保持风格一致。

3type 关于丁卯点阵体的设计思考插图7

「丁卯点阵体」中匹配设计了整套西文部分,包括拉丁字母、希腊字母、西里尔字母。这里并不只是功能性的随意匹配,而是和汉字部分同样的「小尺寸极限」的追求。

3type 关于丁卯点阵体的设计思考插图8

其中 7px 的大写字母是可保持清晰的最小拉丁字母尺寸——大写 5px 高;小写字母则在极限的 4 像素 x 高度(字母 n、x、 v 等所占的纵向空间)中完成。在此基础上,甚至制作了仅 4 像素高的小型大写字母!

每对字母之间的字偶间距都经过精心的调整(以像素为单位),让它们间距适中;另外也设计了可以自由开启的自动合字功能。

3type 关于丁卯点阵体的设计思考插图9

「丁卯点阵体」中的拉丁字母不仅 26 对大小写字母,还包括带有各种变音符号的扩展拉丁字母。这套字体不仅可以用于英语,还可以用于德语、法语、意大利语、冰岛语……以及汉语拼音。

3type 关于丁卯点阵体的设计思考插图10

拉丁字母的大小是根据汉字大小精心推敲而来的。这样的设计可以让汉字无论和大写字母还是小写字母混排时,都能获得最和谐的效果。

3type 关于丁卯点阵体的设计思考插图11

另外,还专为网页排版设计了 9px 基础拉丁字母部分的意大利斜体和等宽两个版本。意大利斜体的设计也相当有趣且极端,大家不妨自己试用体会一下!

3type 关于丁卯点阵体的设计思考插图12

还配备了颇有「东亚特色」的全宽字母和半宽假名。这两种字符都是早期像素游戏中的熟面孔,如今制作复古游戏的时候也少不了它们。

3type 关于丁卯点阵体的设计思考插图13 3type 关于丁卯点阵体的设计思考插图14

高级排版功能

「丁卯点阵体」虽然看上去是像素的,但并不是老旧的像素字体格式,所有的「像素」都是由轮廓围合出来的。

作为一款当代的字体,「丁卯点阵体」配备了丰富的高级排版武器——这是坊间称做「OpenType 特性」的字体功能。在专业的平面设计和排版软件(比如 Adobe InDesign 和 Illustrator)以及网页开发中,它能够让文字以更加灵活的方式呈现。

比如,按照西方排版惯例,自动将一些字母连写的「合字(ligature)」功能:

3type 关于丁卯点阵体的设计思考插图15

(你也可以选择关掉这样的连写。)

比如,使用更古典的、可以伪装成小写字母的「老式数字(old-style figures)」:

3type 关于丁卯点阵体的设计思考插图16

再比如这个小细节:Q 的尾巴可以自动给后面的字母让出位置——

3type 关于丁卯点阵体的设计思考插图17

以及竖排汉字的标点符号会移动到字框的右上角,这也是 OpenType 特性所实现的。

3type 关于丁卯点阵体的设计思考插图18

字体技术指标

「丁卯点阵体」使用 TrueType 格式和 WOFF2 格式打包,可分别用于桌面应用及网页排版等。

7px 包含 GB/T 2312–80 字符集及其他常用字(共 7300+ 汉字,遵循大陆字形标准)、拉丁字母、扩展拉丁字母、西里尔字母、希腊字母、日文假名和其他杂项符号。

9px 包含 GB/T 2312–80 字符集及其他常用字(共 11000+ 汉字,覆盖两岸三地及日文常用汉字,遵循大陆字形标准)、拉丁字母、扩展拉丁字母、西里尔字母、希腊字母、日文假名和其他杂项符号。

9px Italic 和 9px Code 包含 ASCII 字符集(基本拉丁字母及数字和标点符号)。

应用展示

「丁卯点阵体」丰富的字符集大大扩宽了它的应用范围。其中配备的各类图标字符可以显著丰富其应用效果。

3type 关于丁卯点阵体的设计思考插图19 3type 关于丁卯点阵体的设计思考插图20

如今像素复古之风盛行,除了常居一隅的像素风独立游戏和插画,早期的计算机界面、红白机和街机游戏、单色屏功能机以及 QQ 秀等古早产物也常常被人提起。而这些,就是「丁卯点阵体」的原生应用场景。

3type 关于丁卯点阵体的设计思考插图21
TapTap 9.4 分独立游戏《如果可以早一点回家》
3type 关于丁卯点阵体的设计思考插图22
Rogue-lite 游戏《Metal Mind》
3type 关于丁卯点阵体的设计思考插图23
Game Boy 风格游戏《奴隶斗士莎拉》

如果可以应用在公交、地铁的 LED 显示屏上,更是能大大提高信息密度——

3type 关于丁卯点阵体的设计思考插图24
通行线点阵电牌测试效果

由于「丁卯点阵体」字形大幅简化、文件体积小,适合用作 Webfont(网页字体),这在中文字体中是极其难得的。

3type 关于丁卯点阵体的设计思考插图25
《内核恐慌》播客主页

3type 关于丁卯点阵体的设计思考插图26

3type 关于丁卯点阵体的设计思考插图27
《Anyway.FM》播客主页皮肤「八比特复古」

作为一款现代的 OpenType 轮廓字体,「丁卯点阵体」的使用场景也不局限于低分辨率的场景。应用于平面设计、户外广告等场合,也能传达出一种复古感或科技感。

3type 关于丁卯点阵体的设计思考插图28
线下场景应用
试用下载 | 购买

本文转载自 3type 日志


除了丁卯点阵体,3type 设计团队还推出了 Ellenda、Faustina、Ryan Serif、海豹休息体等多款经典字体集,感兴趣的朋友可以下载试用。

Ryan Serif

3type 关于丁卯点阵体的设计思考插图29

试用下载 | 购买

Ellenda

3type 关于丁卯点阵体的设计思考插图30

试用下载 | 购买

Faustina

3type 关于丁卯点阵体的设计思考插图31

试用下载 | 购买

海豹休息体

试用下载 | 购买

Magnet:窗口定位法

Yu Writer:一款能找到写作乐趣的 Markdown 文本编辑器

Simple Timers 可同时运行多个计时的 app

如何去掉”打开方式”菜单中重复应用项

Silo:待办事项快速记录工具

Wallcat:随心而动的小巧壁纸软件「macOS」

暂无评论
24小时热文
刚刚被浏览过的文章
软件下载频道