Las fuentes de píxeles no son muy diferentes de las fuentes de letra pequeña cuando se llega al fondo*. La única gran excepción es que sabe lo que hará el medio con las fuentes de píxeles, una gran ventaja.

Realmente no existe 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 que funcionan con éxito son los diseños de 7px. Los diseños de MiniFonts de Joe Gillespie lo ayudarán a comprender el diseño en el umbral de legibilidad. Otra pregunta aquí trata sobre esos microdiseños y puede brindarle más referencias.

Donde empezar

Cada problema de diseño comienza con una restricción. Con una buena fuente, [generalmente] es el uso previsto. ¿Dónde debe encajar la fuente de píxeles? ¿Su juego se beneficiaría de un texto fácil de leer o el texto debe mantenerse fuera del camino y solo estar disponible para "descifrar" 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 (por debajo de la línea de base y por encima de la altura de la tapa). Pero las minúsculas también pueden volverse bastante pequeñas: Gillespie's Minx proporciona un excelente punto de referencia para lo que yo consideraría el alfabeto en minúsculas más pequeño razonable.

Los detalles

Notarás algo incluso en las mejores fuentes de píxeles: se ven terribles cuando te acercas y tratas de descifrarlas. Están destinados a ser "percibidos", es decir, los espacios en el diseño son llenados por 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ñar de cerca desde lejos : ese es el desafío del diseñador de fuentes de píxeles. En otras palabras, crea y modifica sus formas a distancias ridículamente cercanas mientras considera cómo se verá cuando se vea en su tamaño normal.

La computadora es nuestra amiga en esta situación confusa: simplemente 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 la realidad" hace que las cosas sean mucho más convenientes.

Acomodar las minúsculas

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

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

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

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

Incluso en esta cuadrícula restrictiva, puede ver los pequeños toques de estilo que puede agregar sin arruinar por completo la legibilidad.

Con la altura x y el cuerpo resaltados como referencia:

En el tamaño ampliado, el Milustra una consideración notable. Con una cuadrícula de números pares, no tiene un único punto medio para que caiga un píxel. Esto no es necesariamente algo malo, solo tendrá que tomar algunas decisiones que parecen extrañas cuando se acerca. El segundo M, por ejemplo, se ve bastante incómodo 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 necesario para el espaciado entre letras. Ciertamente no tienes mucho espacio para jugar allí, pero es una parte importante de la legibilidad.

Mira a los maestros

Al igual que con cualquier forma de arte, aprenderá más si intenta 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 fuentes de píxeles es Unibody 8 de Underware . La novedosa "cursiva" vertical logra su efecto mediante el uso de alineaciones de 45° para implicar el ángulo de una fuente en 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 impresa da cuenta de lo inesperado en tamaños pequeños, al igual que lo que yo consideraría su predecesor Bell Centennial .