Fonte de 5x5 pixels para telas pequenas

• Uma fonte monoespaçada ultracompacta em que todos os caracteres cabem dentro de um quadrado de 5 pixels e podem ser desenhados com segurança em uma grade 6x6, projetada para telas pequenas e ambientes com memória limitada
• O tamanho 5x5 resolve os problemas de representação de E, M e W que faltavam no 4x4 e também garante distinção visual ao desenhar a maioria das minúsculas com 1 pixel a menos que as maiúsculas
• A fonte inteira tem apenas 350 bytes, o que a torna adequada para microcontroladores de 8 bits como o AVR128DA28, além de aumentar a eficiência de pixels em telas pequenas como OLEDs 160x128 ou 128x64
• Mesmo em comparação com fontes vetoriais renderizadas em tamanho parecido, o resultado é inferior ao da fonte artesanal de 350 bytes, apesar do uso de antialiasing e de dados de código e fonte muito maiores
• Também foram feitos testes com tamanhos ainda menores, como 3x5, 3x4, 3x3, 2x3, 3x2 e 2x2; 3x5 continua bastante legível, 3x2 é melhor que 2x3, mas 2x2 se degrada a um nível praticamente próximo de um código secreto

---

Fonte de 5x5 pixels

• Projetada para que todos os caracteres caibam dentro de um quadrado de 5 pixels e possam ser desenhados com segurança em uma grade 6x6
  • Baseada no font-inline.h 5x6 de lcamtuf, que por sua vez foi influenciado pela fonte 8x8 do ZX Spectrum
  • O 5x5 foi definido como o menor tamanho possível sem prejudicar a legibilidade
• 2x2 é inviável, 3x3 é tecnicamente possível mas difícil de ler, e 4x4 não é suficiente para desenhar corretamente E, M e W
  • No 5x5, esse problema é resolvido
• O 5x5 permite desenhar a maioria das minúsculas com 1 pixel a menos que as maiúsculas, tornando-as visualmente distinguíveis
• Também são possíveis versões mais estreitas, como 4x5 e 3x5, mas ao custo de sacrificar M, o 0 com ponto e a distinção entre U/V/Y
• Manter todos os caracteres com largura fixa facilita a programação
  • Na tela, o comprimento de uma string é sempre calculado como 6 vezes o número de caracteres
  • Não é preciso se preocupar com "8978" ficar mais longo que "1111" e estourar o layout
• O tamanho total da fonte é de apenas 350 bytes, o que a torna adequada para microcontroladores de 8 bits como o AVR128DA28
  • O texto informa que o AVR128DA28 tem 16 kB de RAM
  • Esses chips são baratos, consomem pouca energia e são robustos, mas têm pouca folga para processamento gráfico
• Mesmo um display 384x288 tem cerca de 110 mil pixels, o que é grande demais para caber na memória do AVR
  • Em vez disso, telas menores e mais baratas, como OLEDs 160x128 ou 128x64, são mais práticas
  • Nessas telas, uma fonte desenhada à mão e eficiente em pixels leva vantagem
• Uma fonte vetorial renderizada em tamanho semelhante também é usada na comparação
  • Essa fonte vetorial na prática tem 6 pixels de altura, mas os caracteres são mais estreitos
  • Mesmo com antialiasing, vários megabytes de código e 1 MB de dados de fonte, o resultado ainda é pior que o da fonte artesanal de 350 bytes

Tela real e experimentos com tamanhos menores

• Os pixels reais não são quadrados perfeitos, então a aparência na tela não é exatamente igual à renderização mostrada acima
  • O efeito de pseudossombra projetada criado pelos subpixels foi avaliado positivamente
  • Em displays monocromáticos esse efeito não existe, mas ainda assim o resultado parece mais suave do que o esperado
• O espaçamento entre pixels faz e e g parecerem mais convincentes
  • Com base nesse mesmo efeito, a possibilidade de fontes ainda menores também é explorada
• 3x5 não é a menor resolução possível sem concessões, mas ainda é bastante legível
  • Nesse tamanho existem 32.768 glifos, dos quais 27.904 são distinguíveis entre si
  • M, W e Q saem perdendo, mas O e 0 ainda continuam distinguíveis
  • Pode ser uma opção quando for preciso colocar 50% mais colunas na tela
• Em 3x4, ainda dá para ler, mas as restrições aumentam
  • Existem 4.096 glifos, dos quais 3.392 são distinguíveis entre si
  • Nesse tamanho não dá para diferenciar maiúsculas de minúsculas, então escolhe-se um único estilo que melhor se encaixe no espaço limitado
  • A expressividade dos números também piora, mas ainda funciona
• Em 3x3, a perda nos números é a maior
  • Existem 512 glifos, dos quais 400 são distinguíveis entre si
  • As letras ainda podem ser reconhecidas até certo ponto sem repetições
  • Quando exibida em hardware real, essa fonte melhora bastante
• 2x3 chega perto do inviável
  • Existem 64 glifos, dos quais 44 são distinguíveis entre si
  • A maioria das letras é difícil de reconhecer e há muita duplicação
  • A linha inferior é "Hello World"
• A proporção invertida em 3x2 fica muito melhor que 2x3
  • Nesse tamanho também existem 64 glifos, dos quais 44 são distinguíveis entre si
  • Como há mais letras que exigem detalhe horizontal, como M, W, N, Q, G e P, do que detalhe vertical, como E e F, ele é mais vantajoso
  • A linha inferior é "you can probably read this"; dá para ler se você semicerrar os olhos ou reduzir a imagem
• 2x2 fica apenas como referência de completude na comparação
  • Teoricamente existem 16 imagens possíveis em 2x2, mas uma é espaço em branco e cinco são formas copiadas ao deslocar outros glifos, então na prática restam apenas 10
  • Dá para representar todos os números, mas como eles não se parecem com suas formas originais, isso fica mais próximo de um código secreto do que de uma fonte

[tangokorea]

Obrigado pelas informações. Fiquei com muita vontade na hora.

[tangokorea]

Como é que eu vou enfiar hangul aqui buá buá pff

[GN⁺]

Comentários do Hacker News

• Usando renderização por subpixel, até 1x5 já seria suficiente https://www.msarnoff.org/millitext/

  • Testei no meu HP Z24n G2 1920x1200 e no painel 6-bit 1920x1080 do meu notebook, e fiquei realmente surpreso com o quanto isso funciona melhor do que eu imaginava
    [2x5-HP-Z24n-G2] https://i.imgur.com/yLyrpfg.jpeg
    [1x5-HP-Z24n-G2] https://i.imgur.com/Z7kH005.jpeg
    [2x5-Innolux-N156HCA-GA3] https://i.imgur.com/F4Ypxwj.jpeg
    [1x5-Innolux-N156HCA-GA3] https://i.imgur.com/etkot5o.jpeg
    [1] https://jp.ext.hp.com/monitors/business/z_z24n_g2/
    [2] https://www.panelook.com/N156HCA-GA3__15.6__overview_33518.html
  • Ampliei a imagem gerada no celular e me surpreendi ao ver que dá mesmo para ler as letras https://storage.j0.hn/subpixelfont.png
    E também descobri que a minha tela está imunda
  • Para garantir legibilidade, no fim das contas acho que precisa ser pelo menos 2x5
  • Isso partindo do pressuposto de que você vai olhar a tela bem de perto

• 5x5 é bem legal e 3x5 também não é ruim, mas nenhum dos dois consegue cobrir todo o ASCII
  Também há um pouco de ilusão no tamanho real: quando você inclui o espaçamento entre caracteres, na prática precisa de uma grade 6x6 ou 4x6
  Por isso eu gosto bastante do Spleen, de https://github.com/fcambus/spleen
  Ele tem uma fonte 5x8 com suporte ao ASCII completo, e a maioria dos glifos na prática é 4x8 com espaçamento horizontal incluído
  No meu projeto, eu a modifiquei para deixar todos os glifos em 4x8, e assim consegui renderizar tudo de forma agradável numa grade 5x9, sempre garantindo 1 pixel de espaçamento horizontal e vertical entre cada caractere

  • No começo dos anos 1980, havia até processadores de texto para Apple II que implementavam 60 colunas na tela padrão de 40 colunas usando uma fonte 5x5 em modo gráfico, e isso era um argumento de venda
    Para resolver isso por hardware, bastava comprar uma 80 column card e usar texto de 80 colunas de verdade, embora o monitor também precisasse suportar isso

• A maioria das fontes ultrapequenas é realmente horrível para ler à primeira vista em escala 1:1
  Há um tempo, ao fazer um mod de jogo, eu precisava de uma fonte muito pequena e compacta, então testei bastante 3x3, 3x5 e até 2x5, mas todas eram difíceis demais de ler
  No fim, encontrei a Gremlin-3x6, criada por zephram, que tinha 1 pixel extra de altura, mas ainda era muito compacta na largura
  O mais importante é que ela distingue bem as letras latinas padrão e continua legível sem precisar ampliar muito
  Infelizmente, quando zephram apagou a conta no FontStruct, as fontes também sumiram, mas deixei uma cópia e a licença CC0 no repositório do meu mod, e a renderização real pode ser vista na captura de tela
  [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

  • O [0] agora retorna 404

• Houve uma discussão parecida também do lado dos caracteres CJK
  https://chinese.stackexchange.com/questions/16669/lowest-pixel-resolution-needed-to-support-chinese

• Se o autor vir isto, eu sugeriria colocar mais um pixel acima do traço horizontal do t minúsculo
  Do jeito que está agora, ele parece demais com um T maiúsculo
  Ainda assim, no geral ficou muito bem feito, e obrigado por compartilhar

  • Eu faria o t minúsculo mais ou menos assim
    x
    xxx
    x
    xx
  • Também achei que o l minúsculo talvez fizesse mais sentido assim
    xx
    x
    x
    x
    xx

• Foi dito que 4x4 não basta para desenhar E, M, W corretamente, mas na verdade 5x5 também não basta para desenhar um e adequadamente
  Se você quer que as minúsculas fiquem mais baixas que as maiúsculas, vai precisar de pelo menos 6 pixels de altura, e se quiser descendentes de verdade, pelo menos 7
  Estritamente falando, 8 seria melhor para diferenciar descendentes horizontais enquanto letras como g e y ainda cruzam a linha de base, mas aqui parece haver espaço para concessões
  E, na prática, para deixar um espaço visível abaixo e ao lado das letras, no fim você precisa de no mínimo 8x6 pixels por caractere

  • Se fosse possível reduzir uma fonte tanto assim, a primeira característica que eu abriria mão seria a regra de que as minúsculas precisam ser mais baixas que as maiúsculas
  • O e da parte de real pixels do exemplo até me parece melhor
    Para mim, o vazio na parte superior fica parcialmente preenchido, então dá para ler, e em frases longas o contexto provavelmente basta
    Claro que não é perfeito, e no exemplo ampliado com pixels limpos lá em cima a estranheza fica mais evidente

• Se, em vez de só dois estados on/off, você usar tons de cinza em vários níveis, dá para criar texto legível em tamanhos ainda menores
  Mas o ponto importante aqui é text, e não letters
  Mesmo que cada letra isoladamente fique borrada demais, as pessoas acabam lendo por inferência a partir do contexto
  Esse método nem exige necessariamente uma fonte desenhada especialmente para isso
  Exemplo: https://imgur.com/a/text-80-characters-per-line-240-pixels-wide-AlYrnSS
  Aqui, mesmo contando o espaçamento entre letras, a média fica em apenas 3 pixels de largura por caractere

• O sistema operacional LAP6 do minicomputador LINC tinha uma fonte 4x5, mas sem minúsculas

• Isso me lembrou tentativas antigas de implementar 80 colunas por software no C64
  A ideia era usar uma grade de 3x7 pixels, reservando uma linha e uma coluna para espaçamento, e alguns produtos comerciais chegaram a usar isso
  https://www.pagetable.com/?p=901
  Não é fácil fazer um conjunto de caracteres 4×8 ficar legível e bonito, e como é preciso 1 pixel de espaço entre as letras, na prática a largura útil de cada caractere cai para 3 pixels
  Por isso letras como M e N são especialmente complicadas

• Disseram que dá para fazer 4x5 ou 3x5 se você abrir mão do M, do zero pontuado e de uma boa distinção entre U/V/Y, mas eu acho que 3x5 já é perfeitamente prático
  https://robey.lag.net/2010/01/23/tiny-monospace-font.html