Quelles considérations y a-t-il dans la conception de polices pixel?


14

Je conçois des polices pixel monospace pour un jeu, et jusqu'à présent, je n'ai pu travailler qu'avec des tailles extrêmement petites (la plus grande que j'ai gérée est 5x9) parce que celles-ci sont les plus faciles à essayer. Souvent, les résultats que je propose pour des tailles aussi petites que 7x13 sont tous bloquants et peu attrayants.

J'ai analysé d'autres polices de pixels, et la plupart des polices graphiquement attrayantes font beaucoup de considérations alternatives que je n'aurais jamais pensé faire, comme faire des sections entières uniquement connectées en diagonale.

Existe-t-il des tailles de blocs spéciales qui sont «optimales» pour la conception de polices pixel? Y a-t-il des emplacements de pixels spéciaux que je devrais avoir à l'esprit? Parce que parfois, lorsque je dessine une ligne de seulement 11 pixels de long (ou que les choses se croisent à de si petites tailles), cela finit par ressembler à autre chose une fois dézoomé.

Réponses:


11

Les polices pixel ne sont pas très différentes des minuscules polices d'impression lorsque vous y arrivez *. La seule grande exception est que vous savez ce que le support fera avec les polices pixel - un très gros avantage.

Il n'y a vraiment pas de grille de pixels idéale en soi. De toute évidence, une grille plus grande vous donne plus d'espace pour travailler. Les plus petits types que j'ai vu fonctionner avec succès sont des conceptions 7px. Les conceptions MiniFonts de Joe Gillespie vous aideront à comprendre la conception au seuil de lisibilité. Une autre question ici concernait ces micro-conceptions et pourrait vous donner des références supplémentaires.

Où commencer

Chaque problème de conception commence par une contrainte. Avec une bonne police, c'est [généralement] l'utilisation prévue. Où votre police pixel doit-elle s'adapter? Votre jeu bénéficierait-il d'un texte facile à lire ou le texte doit-il rester à l'écart et ne peut être "déchiffré" qu'en cas de besoin?

Vous devrez préciser si vous souhaitez ou non un minuscule. Une police tout en majuscule peut tenir dans une grille plus petite en raison des formes relativement simples et du manque d'extendeurs (en dessous de la ligne de base et au-dessus de la hauteur du capuchon). Mais les minuscules peuvent aussi devenir assez petites: le Minx de Gillespie fournit un excellent point de référence pour ce que je considérerais comme le plus petit alphabet minuscule raisonnable.

Minx est à peu près aussi petit que les minuscules

Les détails

Vous remarquerez quelque chose, même dans les meilleures polices de pixels: elles ont l'air terribles lorsque vous vous en approchez et essayez de les comprendre. Ils sont destinés à être "perçus", c'est-à-dire que les lacunes dans la conception sont comblées par le cerveau. Donc, deux carrés alignés à 45 ° deviennent une ligne diagonale. Parfois, un trou dans la grille est la ligne "mince" entre deux traits épais.

Concevez de très près : c'est le défi du concepteur de polices pixel. En d'autres termes, vous créez et modifiez vos formes à des distances ridiculement proches tout en considérant à quoi elles ressembleront lorsqu'elles seront vues à leur taille normale.

L'ordinateur est notre ami dans cette situation déroutante: il suffit de garder une deuxième fenêtre ouverte avec une vue à 100% pour voir à quoi ressemble vraiment votre design . Avoir un deuxième moniteur pour cette "vue de la réalité" rend les choses beaucoup plus pratiques.

Accueillir les minuscules

Puisque vous avez mentionné le besoin de minuscules à 6 x 12 ...

Voici un exemple rapide que j'ai jeté ensemble pour illustrer les considérations spécifiques à cette exigence.

Pardonnez-moi, c'est une illustration grossière

Pour commencer, j'ai découpé un pixel de votre taille. En travaillant à de si petites tailles, vous remarquerez que la lisibilité bénéficie d'un corps de personnage plus large. Les majuscules doivent seulement être légèrement plus hautes que les minuscules. Jetez un coup d'œil à 9px Verdana pour voir comment un corps large peut bénéficier de la lisibilité.

Les caractères minuscules avec des ascendeurs proéminents liront souvent mieux s'ils s'étendent très légèrement au-delà de la hauteur de la casquette (comme bdans mon exemple). Mon exemple parvient toujours à rester sur un corps de 11 pixels de haut. Ceci est facilité par le fait que la lisibilité est moins influencée par les décadents longs: seuls quelques pixels suffiront.

Même sur cette grille restrictive, vous pouvez voir quelles jolies petites touches de style vous pouvez ajouter sans nuire totalement à la lisibilité.

Agrandi, vous pouvez voir comment les choses étranges deviennent

Avec la hauteur x et le corps mis en évidence pour référence:

entrez la description de l'image ici

À la taille agrandie, le Millustre une considération notable. Avec une grille de nombres pairs, vous n'avez pas de point médian unique pour un pixel sur lequel atterrir. Ce n'est pas nécessairement une mauvaise chose, vous aurez juste à prendre des décisions qui vous semblent étranges à l'approche. La seconde M, par exemple, semble assez gênante lors d'un zoom avant, mais est en fait une amélioration de la taille de l'écran. Ces types de lignes implicites sont un composant essentiel de la plupart des polices de pixels.

Bien sûr, vous devrez également prendre en compte l'espace supplémentaire requis pour l'espacement des lettres. Vous n'avez certainement pas beaucoup de place pour y jouer mais c'est un élément important de lisibilité.

Regardez vers les maîtres

Comme pour toute forme d'art, vous apprendrez le plus en essayant de faire ce que font les maîtres. Les exemples que j'ai liés ci-dessus vous fourniront une mine d'informations.

Unibody 8 de Underware est une étude de cas classique sur l'excellence des polices de pixels . Le roman "italique" vertical obtient son effet en utilisant des alignements à 45 ° pour impliquer l'angle d'une police italique sans compromettre la police entière dans le processus.

Emigre était un autre des pionniers, avec Susan Kare sur le premier Mac OS.

* Note de côté:
Retina est un exemple fantastique de la façon dont un compte police d'impression pour l'inattendu à des tailles minuscules, comme ce que je considérerais son prédécesseur cloche du centenaire .

La rétine de H & FJ


Je veux en fait un minuscule. Je veux que la police 6x12 soit utilisable, disons, dans une console.
Joe Z.

Mais oui, c'est une très bonne réponse, avec beaucoup de ressources que je peux approfondir. Je vous remercie.
Joe Z.

1
ajout très mineur: "de près et de loin" est facilement réalisé dans Photoshop en créant une nouvelle fenêtre (menu fenêtre> organiser> nouvelle fenêtre pour docname-1) et en laissant l'un d'eux à 100% de zoom sur le côté comme "copie de prévisualisation"
horatio

1
Pas de soucis, vous avez l'idée. Je ne pense même pas que vous aurez besoin de la hauteur supplémentaire. Je voudrais juste ajouter le pixel supplémentaire sur la largeur et laisser la hauteur entre 10 et 12. Jouez avec quelques caractères et voyez où vous vous retrouvez.
civil

1
Soit dit en passant, un mot test standard qui tient compte des formes de base de l'alphabet romain est Hamburgefonts . De nombreux concepteurs de types commenceront par H, net opour avoir une idée des caractéristiques essentielles.
civil
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.