设计像素字体有哪些注意事项?

平面设计 字体 排版 界面设计 像素
2022-01-23 23:13:54

我正在为游戏设计等宽像素字体,到目前为止,我只能使用极小的尺寸(我管理的最大尺寸是 5x9),因为这些字体最容易尝试和出错。很多时候,我想出的尺寸甚至小到 7x13 的结果都是块状且没有吸引力的。

我分析了其他一些像素字体,大多数图形上吸引人的字体都做了很多我从未想过的替代考虑,比如让整个部分只对角连接。

是否有任何特殊的块大小对于设计像素字体是“最佳”的?我可能需要记住任何特殊的像素位置吗?因为有时当我画一条只有 11 像素长的线(或者让事物以如此小的尺寸相交)时,一旦缩小,它最终看起来就像其他东西。

1个回答

当您深入了解像素字体时,它与微小的打印字体并没有太大的不同*。一个大的例外是您知道媒体将如何处理像素字体——这是一个非常大的优势。

就其本身而言,确实没有理想的像素网格。显然,更大的网格会给你更多的工作空间。我见过的成功工作的最小类型是 7px 设计。Joe Gillespie 的 MiniFonts 设计将帮助您在易读性门槛上理解设计。这里的另一个问题涉及那些微设计,可能会给您进一步的参考。

从哪儿开始

每个设计问题都始于一个约束。使用好的字体,它[通常]是预期的用途。您的像素字体需要适合哪里?您的游戏是否会受益于易于阅读的文本,或者文本是否需要不碍事并且仅在需要时才能“破译”?

您需要澄清是否需要小写字母。由于相对简单的形状和缺少扩展器(低于基线和高于大写高度),全大写字体可以适合较小的网格。但是小写也可以变得非常小:Gillespie 的 Minx为我认为最小的合理小写字母提供了极好的参考点。

Minx 与小写字母一样小

细节

即使是最好的像素字体,你也会注意到一些东西:当你靠近并试图弄清楚它们时,它们看起来很糟糕。它们是用来“感知”的,即设计中的空白由大脑来填补。因此,对齐 45° 的两个正方形成为对角线。有时,网格中的一个洞是两个粗笔划之间的“细”线。

远近设计:这是像素字体设计师的挑战。换句话说,你在非常近的距离上创建和修改你的形状,同时考虑它在正常尺寸下的外观。

在这种令人困惑的情况下,计算机是我们的朋友:只需打开另一个 100% 视图的窗口,这样您就可以看到您的设计的真实外观。为这种“现实视图”配备第二台显示器会使事情变得更加方便。

容纳小写字母

既然您提到需要在 6 x 12 时使用小写字母...

下面是我汇总的一个简单示例,以说明该要求的具体注意事项。

原谅我,这是一个粗略的插图

首先,我从你的身高上切掉了一个像素。在如此小的尺寸下工作,您会注意到更宽的字符体有助于提高易读性。大写字母只需要略高于小写字母。看看 9px Verdana,看看宽体如何提高易读性。

如果小写字母稍微超过大写高度(如b我的示例中的),则具有突出上升的小写字符通常会更好地阅读。我的示例仍然设法保持在 11px 高的身体上。这得益于易读性受长减速器影响较小的事实:只需几个像素就可以了。

即使在这个限制性的网格上,你也可以看到你可以在不完全破坏易读性的情况下添加一些漂亮的小风格。

放大,你可以看到事情变得多么奇怪

突出显示 x 高度和主体以供参考:

在此处输入图像描述

在放大的尺寸下,M说明了一个值得注意的考虑因素。对于偶数网格,您没有一个像素可以落在其中的单个中点。这不一定是坏事,你只需要做出一些在靠近时看起来很奇怪的决定。M例如,第二个在放大时看起来很尴尬,但实际上是屏幕尺寸的改进。这些隐含的线条是大多数像素字体的关键组成部分。

当然,您还必须考虑字母间距所需的额外空间。你当然没有太多的空间可以在那里玩,但它是易读性的重要组成部分。

看高手

与任何艺术形式一样,通过尝试做大师们所做的事情,您将学到最多。我上面链接的示例将为您提供丰富的信息。

像素字体卓越的经典案例研究是Underware 的 Unibody 8新颖的直立“斜体”通过使用 45° 对齐来暗示斜体字体的角度来实现其效果,而不会在此过程中影响整个字体。

Emigre是另一位先驱者,与早期 Mac OS 的Susan Kare一样。

*旁注:
Retina是一个很好的例子,说明打印字体如何在小尺寸上解决意外情况,就像我认为它的前身Bell Centennial一样。

H&FJ 的视网膜