Estoy diseñando fuentes de píxeles monospace para un juego, y hasta ahora solo he podido trabajar con tamaños extremadamente pequeños (el más grande que he manejado es 5x9) porque esos son los más fáciles de probar y errar. Muchas veces, los resultados que obtengo para tamaños incluso tan pequeños como 7x13 son todos bloqueadores y poco atractivos.

He analizado algunas otras fuentes de píxeles, y la mayoría de las gráficamente atractivas hacen muchas consideraciones alternativas que nunca hubiera pensado hacer, como hacer secciones enteras conectadas solo en diagonal.

¿Hay tamaños de bloque especiales que sean "óptimos" para diseñar fuentes de píxeles? ¿Hay algunas ubicaciones especiales de píxeles que deba tener en cuenta? Porque a veces cuando dibujo una línea de solo 11 píxeles de largo (o hago que las cosas se crucen en tamaños tan pequeños), termina pareciéndose a otra cosa una vez alejada.

Las fuentes de píxeles no son terriblemente diferentes de las fuentes de impresión minúscula cuando llega el momento *. La única gran excepción es que sabes lo que hará el medio con las fuentes de píxeles, una gran ventaja.

Realmente no hay una cuadrícula de píxeles ideal, per se. Obviamente, una cuadrícula más grande le da más espacio para trabajar. Los tipos más pequeños que he visto funcionar con éxito son los diseños de 7px. Los diseños MiniFonts de Joe Gillespie lo ayudarán a comprender el diseño en el umbral de legibilidad. Otra pregunta aquí se ocupó de esos micro diseños y puede darle más referencias.

Donde empezar

Cada problema de diseño comienza con una restricción. Con una buena fuente es [generalmente] el uso previsto. ¿Dónde debe caber su fuente de píxeles? ¿Se beneficiaría su juego de leer fácilmente el texto o el texto debe mantenerse alejado y solo estar disponible para "descifrarlo" cuando sea necesario?

Deberá aclarar si desea o no una minúscula. Una fuente en mayúsculas puede caber en una cuadrícula más pequeña debido a las formas relativamente simples y la falta de extensores (debajo de la línea de base y por encima de la altura de la tapa). Pero las minúsculas también pueden ser bastante pequeñas: Gillespie's Minx proporciona un excelente punto de referencia para lo que yo consideraría el alfabeto minúsculo razonable más pequeño.

Los detalles

Notarás algo incluso en las mejores fuentes de píxeles: se ven terribles cuando te acercas e intentas resolverlos. Están destinados a ser "percibidos", es decir, las lagunas en el diseño las llena el cerebro. Entonces dos cuadrados alineados a 45 ° se convierten en una línea diagonal. A veces, un agujero en la cuadrícula es la línea "delgada" entre dos trazos gruesos.

Diseñe de cerca desde lejos : ese es el desafío del diseñador de fuentes de píxeles. En otras palabras, creas y modificas tus formas a distancias ridículamente cortas mientras consideras cómo se verá cuando se ve en su tamaño normal.

La computadora es nuestra amiga en esta situación confusa: solo mantenga una segunda ventana abierta con una vista del 100% para que pueda ver cómo se ve realmente su diseño . Tener un segundo monitor para esta "vista de realidad" hace las cosas mucho más convenientes.

Acomodando las minúsculas

Como mencionó la necesidad de minúsculas a 6 x 12 ...

Aquí hay un ejemplo rápido que reuní para ilustrar las consideraciones específicas con ese requisito.

Para empezar, corté un píxel de tu altura. Al trabajar en tamaños tan pequeños, notará que la legibilidad se beneficia de un cuerpo de personaje más amplio. Las mayúsculas solo deben ser marginalmente más altas que las minúsculas. Eche un vistazo a 9px Verdana para ver cómo un cuerpo ancho puede beneficiar la legibilidad.

Los caracteres en minúscula con ascendentes prominentes a menudo se leerán mejor si se extienden ligeramente más allá de la altura de la tapa (como ben mi ejemplo). Mi ejemplo todavía se las arregla para permanecer en un cuerpo alto de 11px. Esto se ve ayudado por el hecho de que la legibilidad está menos influenciada por los descendientes largos: solo un par de píxeles funcionarán allí.

Incluso en esta cuadrícula restrictiva, puedes ver qué pequeños toques de estilo puedes agregar sin una legibilidad total.

Con la altura xy el cuerpo resaltados como referencia:

En el tamaño ampliado, Milustra una consideración notable. Con una cuadrícula de números pares no tiene un punto medio único para que caiga un píxel. Esto no es necesariamente algo malo, solo tendrá que tomar algunas decisiones que parezcan extrañas cuando esté cerca. La segunda M, por ejemplo, parece bastante incómoda cuando se acerca, pero en realidad es una mejora en el tamaño de la pantalla. Ese tipo de líneas implícitas son un componente crítico de la mayoría de las fuentes de píxeles.

Por supuesto, también tendrá que tener en cuenta el espacio adicional requerido para el espacio entre letras. Ciertamente no tienes mucho espacio para jugar allí, pero es una parte importante de la legibilidad.

Mira a los maestros

Como con cualquier forma de arte, aprenderás más al tratar de hacer lo que hacen los maestros. Los ejemplos que he vinculado anteriormente le proporcionarán una gran cantidad de información.

Un caso de estudio clásico en la excelencia de la fuente de píxeles es el Unibody 8 de Underware . La novela vertical "cursiva" logra su efecto al usar alineaciones de 45 ° para implicar el ángulo de una fuente cursiva sin comprometer toda la fuente en el proceso.

Emigre fue otro de los pioneros, junto con Susan Kare en los primeros Mac OS.

* Nota al
margen : Retina es un ejemplo fantástico de cómo una fuente de impresión representa lo inesperado en tamaños pequeños, ya que es lo que consideraría su predecesor Bell Centennial .