ピクセルフォントの設計にはどのような考慮事項がありますか?


14

私はゲーム用の等幅ピクセルフォントを設計していますが、これまでのところ、非常に小さいサイズ(管理している最大のものは5x9です)しか使用できませんでした。多くの場合、7x13ほどの小さなサイズでも思い浮かぶ結果は、すべてブロッシーで魅力的ではありません。

他のいくつかのピクセルフォントを分析しましたが、グラフィカルに魅力的なフォントのほとんどは、セクション全体を斜めに接続するなど、考えもしなかった多くの代替検討事項を作成します。

ピクセルフォントの設計に「最適な」特別なブロックサイズはありますか?覚えておく必要がある特別なピクセル配置はありますか?ときどき、たった11ピクセルの長さの線を描く(または、そのような小さいサイズで交差させる)と、ズームアウトすると他の何かのように見えることがあるからです。

回答:


11

ピクセルフォントは、小さな印刷フォントとそれほど違いはありません*。1つの大きな例外は、メディアがピクセルフォントで何をするかを知っていることです。これは非常に大きな利点です。

本来、理想的なピクセルグリッドはありません。明らかに、グリッドが大きくなると、作業スペースが増えます。私が見た中で最もうまく動作するのは、7pxのデザインです。Joe GillespieのMiniFontsデザインは、読みやすさのしきい値でのデザインを理解するのに役立ちます。ここでの別の質問は、それらのマイクロ設計に関するものであり、さらに参考になるかもしれません。

どこから始めれば

設計上の問題はすべて、制約から始まります。良いフォントでは、[通常]意図した使用法です。ピクセルフォントはどこに収まる必要がありますか?あなたのゲームはテキストを簡単に読むことから利益を得ますか、それともテキストは邪魔にならないようにし、必要なときにのみ「解読」できるようにする必要がありますか?

小文字が必要かどうかを明確にする必要があります。比較的単純な形状とエクステンダー(ベースラインより下、キャップの高さより上)がないため、すべて大文字のフォントは小さなグリッドに収まります。しかし、小文字もかなり小さくなります。GillespieのMinxは、最小の妥当な小文字のアルファベットと考えられるものに対する優れた参照ポイントを提供します。

Minxは小文字とほぼ同じくらい小さい

詳細

最高のピクセルフォントでさえ何かに気付くでしょう。近くに行って理解しようとすると、ひどく見えます。それらは「知覚される」ことを意味します。つまり、デザインのギャップは脳によって埋められます。したがって、45°に配置された2つの正方形は対角線になります。グリッドの穴は、2つの太い線の間の「細い」線である場合があります。

遠くから間近でデザインする:それがピクセルフォントデザイナーの挑戦です。つまり、通常のサイズで表示した場合の外観を考慮しながら、途方もなく近い距離でシェイプを作成および変更します。

この紛らわしい状況では、コンピューターが私たちの友です。100%のビューで2つ目のウィンドウを開いたままにしておくと、デザインが実際にどのように見えるかを確認できます。この「リアリティビュー」用に2台目のモニターを配置すると、物事がずっと便利になります。

小文字に対応

あなたは6 x 12で小文字の必要性を述べたので...

この要件に関する具体的な考慮事項を説明するためにまとめた簡単な例を次に示します。

お許しください、大まかなイラストです

手始めに、私はあなたの高さからピクセルを切り取りました。このような小さなサイズで作業している場合、文字の幅が広いと読みやすさが向上することがわかります。キャップは、小文字よりもわずかに高い必要があります。9px Verdanaを見て、幅の広い体が読みやすさにどのように役立つかを確認してください。

アセンダーが目立つ小文字は、キャップの高さをわずかに超えて伸びていると読みやすくなります(b私の例のように)。私の例では、高さ11ピクセルの体にとどまっています。これは、読みやすさは長いディケンダーによる影響が少ないという事実によって助長されています。わずか数ピクセルで実行できます。

この制限的なグリッド上でも、読みやすさを完全に損なうことなく、スタイルのちょっとしたタッチを追加できます。

拡大すると、奇妙なことがどのように起こるかを見ることができます

参照用に強調表示されたx-heightとbodyを使用:

ここに画像の説明を入力してください

拡大したサイズではM、注目すべき考慮事項を示しています。偶数グリッドでは、ピクセルが着陸するための単一の中間点がありません。これは必ずしも悪いことではありません。近くにいると奇妙に思えるいくつかの決定をする必要があります。Mたとえば、2番目の例はズームインするとかなり厄介に見えますが、実際には画面サイズが改善されます。このような暗黙の行は、ほとんどのピクセルフォントの重要なコンポーネントです。

もちろん、文字間隔に必要な追加のスペースも考慮する必要があります。あなたは確かにそこでプレーする余地はあまりありませんが、それは読みやすさの重要な部分です。

マスターに目を向ける

他のアートフォームと同様に、マスターが行うことを実行しようとすることで最も多くを学びます。上記でリンクした例は、豊富な情報を提供します。

ピクセルフォントの卓越性に関する古典的なケーススタディは、UnderwareのUnibody 8です。新しい直立した「イタリック」は、プロセス中のフォント全体を損なうことなく、イタリックフォントの角度を示すために45°の配置を使用することにより、その効果を実現します。

Emigreは、初期のMac OS でのスーザンカレとともに、先駆者の1人でした。

* 補足事項:
Retinaは、印刷フォントが小さなサイズで予期しないものをどのように説明するかの素晴らしい例です。これは、前のBell Centennialであると私が考えるものです。

H&FJの網膜


私は実際に小文字が欲しいです。たとえば、コンソールで6x12フォントを使用できるようにします。
ジョーZ.

しかし、はい、これは非常に良い答えであり、さらに多くのリソースを見ることができます。ありがとうございました。
ジョーZ.

1
非常にわずかな追加:新しいウィンドウを作成し(ウィンドウメニュー>配置> docname-1の新しいウィンドウ)、それらの1つを100%ズームサイズのままにして「プレビューコピー」
ホレイショ

1
心配ありません、あなたはアイデアを得る。余分な高さが必要になるとは思いません。幅に余分なピクセルを追加し、高さを10〜12のままにします。数文字で遊んで、最終的にどこに行くかを確認します。
私服

1
ちなみに、ローマ字の基本的な形状を説明する標準のテストワードはHamburgefontsです。多くのタイプのデザイナーが始まりますHnと、o本質的な特徴の感触を取得します。
私服
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.