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


14

我正在为游戏设计等宽像素字体,到目前为止,我只能使用很小的字体(我管理的最大字体是5x9),因为这些字体最容易尝试和犯错。通常情况下,即使是7x13的尺寸,我得出的结果都是块状且不吸引人。

我已经分析了其他一些像素字体,并且大多数图形上吸引人的字体都提出了许多我从未想过的替代考虑因素,例如使整个部分仅对角连接。

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

Answers:


11

当您开始使用像素字体时,像素字体与微小的打印字体并没有很大的不同*。一个大例外是您知道该媒体将如何使用像素字体-这是一个很大的优势。

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

从哪儿开始

每个设计问题都始于约束。好的字体通常是预期的用途。您的像素字体需要放在哪里?您的游戏会从容易阅读的文本中受益吗?还是需要使文本远离干扰并且仅在需要时才可以“解密”?

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

Minx大约和小写字母一样小

细节

您甚至会注意到最佳像素字体中的某些内容:当您靠近并尝试找出它们时,它们看起来很糟糕。它们是被“感知”的,也就是说,设计中的空白被大脑填补了。因此,与45°对齐的两个正方形成为对角线。有时,网格中的一个洞是两个粗笔划之间的“细”线。

近距离设计:这是像素字体设计师的挑战。换句话说,您一直在创建和修改形状时离得很近,同时考虑以正常大小查看时的外观。

在这种令人困惑的情况下,计算机是我们的朋友:只需打开第二个窗口,并以100%的比例查看,即可了解设计的真实外观。有了第二个用于“现实视图”的监视器,事情变得更加方便。

容纳小写

由于您提到需要6 x 12的小写字母...

这是我汇总的一个简单示例,用于说明该要求的具体考虑因素。

原谅我,这是一个粗略的例证

首先,我在身高上切了一个像素。在如此小的尺寸上工作,您会注意到可读性得益于更宽的角色体。顶盖只需要比小写字母略高。看看9px Verdana,看看宽身如何有益于提高可读性。

如果小写的字符具有上升的突出字符,则通常会略微超出上限高度(如b我的示例中的),因此通常会读起来更好。我的示例仍然设法保持在11px高的身体上。易辨认性受长倾斜度影响较小的事实有助于:在此只需几个像素即可。

即使在这个限制性网格上,您也可以看到可以添加什么漂亮的样式,而不会完全破坏可读性。

放大后,您会看到奇怪的事情

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

在此处输入图片说明

在放大尺寸的情况下,这M是一个值得注意的考虑因素。使用偶数网格,您就没有像素可以落在单个中点上。这并不一定是一件坏事,您只需要做出一些在关闭时看起来很奇怪的决定。M例如,第二个在放大时看起来很尴尬,但实际上是屏幕尺寸的改进。这些暗示的线是大多数像素字体的关键组成部分。

当然,您还必须考虑字母间距所需的额外空间。您当然没有太多的游戏空间,但这是易读性的重要组成部分。

仰望大师

与任何艺术形式一样,您将通过尝试做大师的工作来学习最多。我上面链接的示例将为您提供大量信息。

Underware的Unibody 8是一个出色的像素字体经典案例研究。新颖的直立式“斜体”通过使用45°对齐来暗示斜体字体的角度而不会影响整个字体,从而达到其效果。

EmigreSusan Kare一起是早期的Mac OS 的先驱之一。

* 旁注:
Retina是一个出色的例子,说明了打印字体如何解决小尺寸字体的意外问题,正如我认为它是其前身Bell Centennial一样

H&FJ的视网膜


实际上,我确实想要一个小写字母。我希望6x12字体可以在控制台中使用。
JoeZ。

但是,是的,这是一个很好的答案,有很多资源可供我进一步研究。谢谢。
乔Z.

1
非常小的附加功能:在Photoshop中,通过创建一个新窗口(docname-1的窗口菜单>排列>新窗口)并以100%的缩放比例将其中一个保留为一侧,可以轻松实现“近距离和远距离”。 “预览副本”
horatio 2012年

1
不用担心,您就会明白。我什至认为您不需要额外的身高。我只需要在宽度上添加额外的像素,然后将高度保留在10到12之间即可。玩几个字符,看看最终结果。
便衣

1
顺便说一句,解释罗马字母基本形状的标准测试单词是Hamburgefonts。许多类型设计师将从,和开始H,以领会基本特征。no
便衣
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.