Fuente de 5x5 píxeles para pantallas pequeñas

 (maurycyz.com)
15 puntos por GN⁺ 2026-04-23 | 3 comentarios | Compartir por WhatsApp
  • Una fuente monoespaciada ultracompacta diseñada para que todos los caracteres quepan dentro de un cuadrado de 5 píxeles y puedan dibujarse con seguridad en una cuadrícula de 6x6, pensada para pantallas pequeñas y entornos con memoria limitada
  • El tamaño de 5x5 resuelve los problemas de representación de E, M y W que quedaban cortos en 4x4, y además permite dibujar la mayoría de las minúsculas 1 píxel más pequeñas que las mayúsculas para asegurar distinción visual
  • La fuente completa ocupa apenas 350 bytes, así que encaja muy bien en microcontroladores de 8 bits como el AVR128DA28, y mejora mucho la eficiencia de píxeles en pantallas pequeñas como OLED de 160x128 o 128x64
  • Incluso comparada con una fuente vectorial renderizada a un tamaño similar, el resultado es peor que esta fuente hecha a mano de 350 bytes, aun usando antialiasing y datos de código y fuente mucho más grandes
  • También se hicieron pruebas con tamaños más pequeños como 3x5, 3x4, 3x3, 2x3, 3x2 y 2x2; 3x5 sigue siendo bastante legible, 3x2 funciona mejor que 2x3, pero 2x2 se degrada hasta quedar prácticamente como un código secreto

Fuente de 5x5 píxeles

  • Diseñada para que todos los caracteres entren en un cuadrado de 5 píxeles y puedan dibujarse con seguridad en una cuadrícula de 6x6
    • Está basada en font-inline.h 5x6 de lcamtuf, y esa fuente a su vez está influenciada por la fuente 8x8 de ZX Spectrum
    • 5x5 se definió como el tamaño mínimo sin perjudicar la legibilidad
  • 2x2 es imposible y 3x3 es técnicamente viable, pero difícil de leer; 4x4 no alcanza para dibujar bien E, M y W
    • En 5x5 ese problema queda resuelto
  • 5x5 permite dibujar la mayoría de las minúsculas 1 píxel más pequeñas que las mayúsculas, así que se distinguen visualmente
  • También son posibles variantes más angostas como 4x5 y 3x5, pero sacrifican M, el 0 con punto y la diferenciación entre U/V/Y
  • Ajustar todos los caracteres a un ancho constante simplifica la programación
    • En pantalla, la longitud de una cadena siempre se calcula como 6 veces la cantidad de caracteres
    • No hace falta preocuparse porque "8978" termine siendo más largo que "1111" y rompa el diseño
  • El tamaño total de la fuente es de apenas 350 bytes, así que encaja muy bien en microcontroladores de 8 bits como el AVR128DA28
    • En el texto se indica que el AVR128DA28 tiene 16 kB de RAM
    • Estos chips son baratos, de bajo consumo y robustos, pero tienen poco margen para procesamiento gráfico
  • Incluso una pantalla de 384x288 tiene unos 110 mil píxeles, demasiado para guardarlos en la memoria de un AVR
    • En cambio, pantallas más pequeñas como una OLED de 160x128 o 128x64 resultan más prácticas y económicas
    • En ese tipo de pantallas, una fuente dibujada a mano y eficiente en píxeles ofrece ventajas
  • También se compara con una fuente vectorial renderizada a un tamaño similar
    • Esa fuente vectorial en realidad tiene 6 píxeles de alto, pero los caracteres son más angostos
    • Aun usando antialiasing, varios megabytes de código y 1 MB de datos de fuente, el resultado queda por debajo de esta fuente artesanal de 350 bytes

Pantallas reales y pruebas con tamaños más pequeños

  • Los píxeles reales no son cuadrados perfectos, así que el aspecto en pantalla no coincide exactamente con el render superior
    • El efecto de pseudo sombra paralela creado por los subpíxeles se valora de forma positiva
    • En pantallas monocromáticas ese efecto no existe, pero aun así se ve más suave de lo esperado
  • El espacio entre píxeles hace que e y g se vean más convincentes
    • A partir de ese mismo efecto también se explora la posibilidad de fuentes aún más pequeñas
  • 3x5 no es la resolución mínima absoluta sin concesiones, pero se lee bastante bien
    • En este tamaño hay 32,768 glifos, de los cuales 27,904 se distinguen entre sí
    • M, W y Q salen perjudicadas, pero O y 0 siguen siendo distinguibles
    • Puede ser una opción cuando hace falta meter 50% más columnas en pantalla
  • 3x4 sigue siendo legible, pero con restricciones mayores
    • Hay 4,096 glifos, de los cuales 3,392 se distinguen entre sí
    • En este tamaño ya no se puede diferenciar entre mayúsculas y minúsculas, así que se elige un único estilo que encaje mejor en el espacio limitado
    • La expresividad numérica también empeora, pero todavía funciona
  • En 3x3 la pérdida más grande se da en los números
    • Hay 512 glifos, de los cuales 400 se distinguen entre sí
    • Las letras siguen siendo reconocibles hasta cierto punto sin duplicados
    • Al mostrarse en hardware real, esta fuente mejora bastante
  • 2x3 ya se acerca a un nivel excesivamente forzado
    • Hay 64 glifos, de los cuales 44 se distinguen entre sí
    • La mayoría de las letras son difíciles de reconocer y también hay muchas duplicaciones
    • La línea de más abajo dice "Hello World"
  • 3x2, con la proporción invertida, resulta mucho mejor que 2x3
    • En este tamaño también hay 64 glifos, de los cuales 44 se distinguen entre sí
    • Como hay más letras que necesitan detalle horizontal —como M, W, N, Q, G y P— que letras que dependen más del detalle vertical, como E y F, sale favorecido
    • La línea de más abajo dice "you can probably read this", y se puede leer si entrecierras los ojos o haces zoom out
  • 2x2 queda solo como referencia comparativa de hasta dónde se puede llegar
    • En teoría existen 16 imágenes posibles en 2x2, pero una es un espacio en blanco y cinco son solo copias desplazadas de otros glifos, así que en la práctica quedan 10
    • Alcanza para representar todos los números, pero como ya no se parecen a su forma original, se acerca más a un código secreto que a una fuente

Lecturas relacionadas

3 comentarios

 
tangokorea 2026-04-23

Gracias por la buena información. Me dieron muchas ganas de probarlo.
 
tangokorea 2026-04-23

¿Cómo metemos el coreano aquí? ;_; Puelk
 
GN⁺ 2026-04-23
Comentarios de Hacker News

  • Aprovechando el renderizado subpíxel, incluso 1x5 puede ser suficiente https://www.msarnoff.org/millitext/

  • 5x5 está bastante bien y 3x5 tampoco está mal, pero ninguno de los dos cubre todo ASCII
    También hay un poco de ilusión óptica con el tamaño real: si agregas el espaciado entre letras, en la práctica hace falta una cuadrícula 6x6 o 4x6
    Por eso me gusta bastante Spleen de https://github.com/fcambus/spleen
    Tiene una fuente 5x8 que soporta todo ASCII, y la mayoría de los glifos en realidad son casi 4x8 con el espaciado horizontal incorporado
    En mi proyecto la modifiqué para que todos los glifos quedaran en 4x8, y así pude renderizarla de forma agradable en una cuadrícula 5x9, garantizando siempre un espacio horizontal y vertical de 1 píxel entre cada carácter

    • A principios de los años 80, algunos procesadores de texto para Apple II realmente implementaban 60 columnas en la pantalla base de 40 columnas usando una fuente 5x5 en modo gráfico, y eso era parte del gancho de venta
      Si querías resolverlo por hardware, podías comprar una 80 column card y usar texto de 80 columnas de verdad, aunque el monitor tenía que soportarlo

  • La mayoría de las fuentes ultrapequeñas son realmente horribles para leerlas de pasada a escala 1:1
    Hace tiempo, al hacer un mod de juego, necesitaba una fuente muy pequeña y compacta, y probé mucho con 3x3, 3x5 e incluso 2x5, pero todas eran demasiado difíciles de leer
    Al final encontré Gremlin-3x6, hecha por zephram, y aunque era 1 píxel más alta, seguía siendo muy compacta horizontalmente
    Sobre todo, distinguía bien las letras latinas estándar y se podía leer sin necesidad de ampliarla tanto
    Por desgracia, cuando zephram borró su cuenta de FontStruct, también desaparecieron todas sus fuentes, pero dejé una copia y la licencia CC0 en el repositorio de mi mod, y el render real se puede ver en la captura
    [0] - https://fontstruct.com/fontstructions/show/1488093
    [1] - https://codeberg.org/janAkali/isaac-extended-icons-mod/src/branch/master/assets/fonts
    [2] - https://codeberg.org/janAkali/isaac-extended-icons-mod/media/branch/master/assets/screenshots/screenshot.png

    • El [0] ahora da 404

  • También hubo una discusión parecida del lado de los caracteres CJK
    https://chinese.stackexchange.com/questions/16669/lowest-pixel-resolution-needed-to-support-chinese

  • Si el autor llega a ver esto, creo que sería mejor poner un píxel más sobre el trazo horizontal de la t minúscula
    En su forma actual se parece demasiado a la T mayúscula
    Aun así, en general está muy bien hecha, y gracias por compartirla

    • Yo haría la t minúscula algo así
      x
      xxx
      x
      xx
    • También pensé que la l minúscula quizá se vería más así
      xx
      x
      x
      x
      xx

  • Se dijo que en 4x4 no alcanza para dibujar bien E, M, W, pero en realidad 5x5 también se queda corto para dibujar bien una e
    Si quieres que las minúsculas queden más bajas que las mayúsculas, necesitas al menos 6 píxeles de alto, y si además quieres descendentes bien definidos, hacen falta al menos 7
    En sentido estricto, sería mejor tener 8 para que g e y crucen la línea base y aun así se distingan los descendentes horizontales, pero aquí parece que se puede aceptar el compromiso
    Y en la práctica, para dejar un espacio visible debajo y a los lados de cada letra, al final necesitas por lo menos 8x6 píxeles por carácter

    • Si realmente pudiera hacer una fuente tan pequeña, la primera propiedad a la que yo renunciaría sería la regla de que la altura de las minúsculas debe ser menor que la de las mayúsculas
    • La e en la parte de real pixels del ejemplo de hecho me parece mejor
      A mis ojos, llena un poco el vacío de arriba y por eso se lee mejor, y dentro de una frase larga el contexto probablemente bastaría para entenderla
      Claro, no es perfecta, y en el ejemplo superior de píxeles limpios ampliados la rareza sí destaca más

  • Si en vez de usar solo dos estados on/off para los píxeles usas una escala de grises de varios niveles, se puede crear texto legible incluso en tamaños más pequeños
    Pero aquí lo importante es que se trata de texto, no de letras
    Aunque cada letra individual quede demasiado borrosa, la persona termina leyéndola por inferencia a partir del contexto
    De hecho, este método ni siquiera requiere necesariamente una fuente diseñada especialmente
    Ejemplo: https://imgur.com/a/text-80-characters-per-line-240-pixels-wide-AlYrnSS
    Aquí, incluso contando el espaciado entre letras, el promedio apenas llega a 3 píxeles de ancho por carácter

  • El sistema operativo LAP6 de la minicomputadora LINC incluía una fuente 4x5, pero no tenía minúsculas

  • Esto me recuerda a los intentos de implementar 80 columnas por software en la C64
    Usaban una cuadrícula de 3x7 píxeles, reservando una fila y una columna para el espaciado, y algunos productos comerciales realmente lo incluyeron
    https://www.pagetable.com/?p=901
    No es fácil hacer que un juego de caracteres 4×8 se vea bien y sea legible, y como hace falta 1 píxel de espacio entre letras, en la práctica el ancho útil del carácter se queda en 3 píxeles
    Por eso letras como M o N son especialmente complicadas

  • Se dijo que si renuncias a M, al cero con punto y a distinguir claramente U/V/Y, entonces 4x5 o 3x5 podrían funcionar, pero yo diría que 3x5 sí es suficientemente práctico
    https://robey.lag.net/2010/01/23/tiny-monospace-font.html