5x5-Pixelfont für kleine Bildschirme

 (maurycyz.com)
14 Punkte von GN⁺ 6 일 전 | 3 Kommentare | Auf WhatsApp teilen
  • Eine extrem kleine Monospace-Schrift, bei der alle Zeichen in ein 5-Pixel-Quadrat passen und sicher in einem 6x6-Raster gezeichnet werden können; entwickelt für kleine Bildschirme und Umgebungen mit begrenztem Speicher
  • Die 5x5-Größe löst die Darstellungsprobleme von E, M und W, die bei 4x4 nicht ausreichend lösbar waren, und sorgt außerdem für visuelle Unterscheidbarkeit, indem die meisten Kleinbuchstaben 1 Pixel kleiner als Großbuchstaben gezeichnet werden
  • Die komplette Schrift ist nur 350 Byte groß und passt damit gut zu 8-Bit-Mikrocontrollern wie dem AVR128DA28; auf kleinen Displays wie 160x128 oder 128x64 OLEDs steigt die Pixeleffizienz deutlich
  • Selbst im Vergleich mit ähnlich klein gerenderten Vektorschriften ist das Ergebnis besser: Trotz Antialiasing sowie deutlich größerem Code- und Font-Datenumfang schneiden sie schlechter ab als die handgefertigte 350-Byte-Schrift
  • Es wurden auch noch kleinere Varianten wie 3x5, 3x4, 3x3, 2x3, 3x2, 2x2 ausprobiert; 3x5 ist noch recht gut lesbar, 3x2 besser als 2x3, während 2x2 praktisch auf das Niveau eines Geheimcodes zerfällt

5x5-Pixelfont

  • Alle Zeichen sind so entworfen, dass sie in ein 5-Pixel-Quadrat passen und sicher in einem 6x6-Raster gezeichnet werden können
    • Grundlage ist lcamtufs 5x6 font-inline.h; diese Schrift ist wiederum von der 8x8-Schrift des ZX Spectrum beeinflusst
    • 5x5 wurde als die kleinste Größe festgelegt, die die Lesbarkeit nicht beeinträchtigt
  • 2x2 ist unmöglich, 3x3 ist technisch machbar, aber schwer lesbar, und 4x4 reicht nicht aus, um E, M und W korrekt darzustellen
    • Bei 5x5 ist dieses Problem gelöst
  • Mit 5x5 lassen sich die meisten Kleinbuchstaben 1 Pixel kleiner als Großbuchstaben zeichnen, sodass sie visuell unterscheidbar bleiben
  • Noch schmalere Varianten wie 4x5 und 3x5 sind ebenfalls möglich, erfordern aber Einbußen bei M, der punktierten 0 und der Unterscheidbarkeit von U/V/Y
  • Wenn alle Zeichen auf eine feste Breite gebracht werden, wird die Programmierung einfacher
    • Die Länge eines Strings auf dem Bildschirm lässt sich immer als das 6-Fache der Zeichenanzahl berechnen
    • Man muss sich keine Sorgen machen, dass "8978" länger wird als "1111" und dadurch das Layout sprengt
  • Die gesamte Schrift belegt nur 350 Byte und eignet sich damit gut für 8-Bit-Mikrocontroller wie den AVR128DA28
    • Im Text steht, dass der AVR128DA28 über 16 kB RAM verfügt
    • Solche Chips sind günstig, stromsparend und robust, haben aber nur wenig Spielraum für Grafikverarbeitung
  • Selbst ein 384x288-Display hat mit rund 110.000 Pixeln zu viele Pixel, um vollständig in den AVR-Speicher zu passen
    • Praktischer und günstiger sind stattdessen kleinere Displays wie 160x128 oder 128x64 OLEDs
    • Auf solchen Bildschirmen sind von Hand gezeichnete, pixeleffiziente Schriften im Vorteil
  • Zum Vergleich werden auch Vektorschriften gezeigt, die in ähnlicher Größe gerendert wurden
    • Die betreffende Vektorschrift ist tatsächlich 6 Pixel hoch, die Zeichen sind aber schmaler
    • Trotz Antialiasing, mehreren Megabyte Code und 1 MB Font-Daten ist das Ergebnis schlechter als bei der handgefertigten 350-Byte-Schrift

Tests auf realen Displays und mit noch kleineren Größen

  • Reale Pixel sind keine perfekten Quadrate, daher sieht die Darstellung auf dem Bildschirm nicht exakt so aus wie das Rendering oben
    • Der von Subpixeln erzeugte Pseudo-Drop-Shadow-Effekt wird positiv bewertet
    • Auf Schwarzweiß-Displays fehlt dieser Effekt, trotzdem wirkt die Schrift glatter als erwartet
  • Der Abstand zwischen den Pixeln lässt e und g glaubwürdiger wirken
    • Ausgehend von diesem Effekt wird auch die Möglichkeit noch kleinerer Schriften weiter untersucht
  • 3x5 ist nicht die kompromisslose Minimalauflösung, bleibt aber recht gut lesbar
    • In dieser Größe gibt es 32.768 Glyphen, davon sind 27.904 voneinander unterscheidbar
    • M, W und Q leiden darunter, aber O und 0 bleiben weiterhin unterscheidbar
    • Es kann eine Option sein, wenn auf dem Display 50 % mehr Spalten untergebracht werden müssen
  • Bei 3x4 bleibt die Schrift noch lesbar, die Einschränkungen werden aber größer
    • Es gibt 4.096 Glyphen, davon sind 3.392 voneinander unterscheidbar
    • In dieser Größe lassen sich Groß- und Kleinbuchstaben nicht mehr unterscheiden, daher wird für beengte Platzverhältnisse der jeweils am besten passende Stil gewählt
    • Auch die Darstellung von Zahlen wird schlechter, funktioniert aber noch
  • Bei 3x3 sind die Verluste bei den Zahlen am größten
    • Es gibt 512 Glyphen, davon sind 400 voneinander unterscheidbar
    • Die Buchstaben sind noch einigermaßen ohne Überschneidungen erkennbar
    • Auf echter Hardware angezeigt verbessert sich diese Schrift deutlich
  • 2x3 nähert sich einem überzogenen Grenzfall
    • Es gibt 64 Glyphen, davon sind 44 voneinander unterscheidbar
    • Die meisten Buchstaben sind schwer zu erkennen, und Überschneidungen treten häufig auf
    • Die unterste Zeile ist "Hello World"
  • Die umgedrehte Seitenverhältnis-Variante 3x2 ist deutlich besser als 2x3
    • Auch in dieser Größe gibt es 64 Glyphen, davon sind 44 voneinander unterscheidbar
    • Buchstaben mit horizontalen Details wie M, W, N, Q, G und P profitieren stärker als solche mit vertikalen Details wie E oder F
    • Die unterste Zeile ist "you can probably read this"; mit zusammengekniffenen Augen oder verkleinert betrachtet ist sie lesbar
  • 2x2 bleibt nur als Vergleich für Vollständigkeit übrig
    • Theoretisch gibt es 16 mögliche 2x2-Bilder, aber eines ist leer und fünf sind nur verschobene Kopien anderer Glyphen, sodass effektiv nur 10 übrig bleiben
    • Es reicht noch, um alle Ziffern darzustellen, ähnelt ihrer ursprünglichen Form aber kaum noch und wirkt eher wie ein Geheimcode als wie eine Schrift

Verwandte Beiträge

3 Kommentare

 
tangokorea 6 일 전

Vielen Dank für die guten Informationen. Ich bekomme gerade richtig Lust darauf.
 
tangokorea 6 일 전

Wie soll man hier bitte Koreanisch reinquetschen? schnief Uff
 
GN⁺ 6 일 전
Hacker-News-Kommentare

  • Mit Subpixel-Rendering ist sogar 1x5 durchaus machbar https://www.msarnoff.org/millitext/

  • 5x5 ist ziemlich gut und 3x5 ist auch nicht schlecht, aber beide decken nicht den kompletten ASCII-Satz ab
    Die tatsächliche Größe ist zudem ein wenig irreführend, denn mit Zeichenabstand braucht man faktisch eher ein 6x6- bzw. 4x6-Raster
    Deshalb mag ich Spleen aus https://github.com/fcambus/spleen ziemlich gern
    Es enthält eine 5x8-Schriftart mit vollständiger ASCII-Unterstützung, und die meisten Glyphen sind effektiv 4x8 mit eingerechnetem horizontalem Abstand
    In meinem Projekt habe ich das angepasst, sodass alle Glyphen 4x8 sind, und dadurch ließ sich alles in einem 5x9-Raster gut rendern, wobei zwischen den Zeichen horizontal und vertikal immer 1 Pixel Abstand garantiert war

    • Unter den Textverarbeitungen für den Apple II der frühen 1980er gab es tatsächlich welche, die im Grafikmodus mit einer 5x5-Schriftart auf dem normalen 40-Spalten-Bildschirm 60 Spalten ermöglichten, und das war ein Verkaufsargument
      Wer das per Hardware lösen wollte, konnte einfach eine 80-column card kaufen und echtes 80-Spalten-Textlayout nutzen, sofern der Monitor das unterstützte

  • Die meisten extrem kleinen Schriftarten sind bei 1:1-Skalierung auf den ersten Blick wirklich furchtbar zu lesen
    Ich habe früher beim Erstellen eines Spielmodus viele 3x3-, 3x5- und sogar 2x5-Schriften ausprobiert, weil ich eine sehr kleine und dichte Schrift brauchte, aber sie waren alle viel zu schwer lesbar
    Am Ende bin ich auf Gremlin-3x6 von zephram gestoßen; es ist zwar 1 Pixel höher, aber horizontal immer noch sehr kompakt
    Vor allem lassen sich die standardmäßigen lateinischen Buchstaben gut unterscheiden, und man kann sie lesen, ohne stark hineinzuzoomen
    Leider hat zephram seinen FontStruct-Account gelöscht, wodurch auch alle Schriftarten verschwunden sind, aber ich habe in meinem Mod-Repository eine Kopie samt CC0-Lizenz hinterlegt, und ein echtes Rendering ist im Screenshot zu sehen
    [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

    • [0] liefert derzeit 404

  • Auch bei CJK-Zeichen gab es eine ähnliche Diskussion
    https://chinese.stackexchange.com/questions/16669/lowest-pixel-resolution-needed-to-support-chinese

  • Falls der Autor das sieht: Beim kleinen t wäre es besser, oberhalb des Querstrichs noch ein Pixel hinzuzufügen
    In der aktuellen Form sieht es dem großen T zu ähnlich
    Insgesamt ist es aber wirklich sehr gut gemacht, danke fürs Teilen

    • Ich würde das kleine t eher so bauen
      x
      xxx
      x
      xx
    • Und ich hätte auch gedacht, dass das kleine l eher so aussehen würde
      xx
      x
      x
      x
      xx

  • Es hieß, für E, M, W reiche 4x4 nicht aus, aber eigentlich reicht 5x5 auch nicht, um ein e richtig darzustellen
    Wenn man Kleinbuchstaben niedriger als Großbuchstaben haben will, braucht man vertikal mindestens 6 Pixel, und für echte Unterlängen sogar mindestens 7
    Genau genommen wären 8 noch besser, wenn man bei g und y sowohl die Grundlinie als auch horizontale Unterlängen klar unterscheiden will, aber hier scheint ein Kompromiss möglich
    Und in der Praxis braucht man am Ende ohnehin mindestens 8x6 Pixel pro Zeichen, wenn unter und neben den Buchstaben noch sichtbarer Abstand bleiben soll

    • Wenn ich eine Schrift wirklich so klein machen müsste, wäre die erste Eigenschaft, auf die ich verzichten würde, die Regel, dass Kleinbuchstaben niedriger als Großbuchstaben sein müssen
    • Das real pixels-e im Beispiel sieht für mich sogar besser aus
      Für mein Auge ist der leere Raum oben etwas aufgefüllt, wodurch es lesbarer wird, und in längeren Sätzen dürfte der Kontext zur Erkennung ausreichen
      Perfekt ist es natürlich nicht, und in dem oben vergrößerten Beispiel mit den sauberen Pixeln fällt die Ungelenkheit stärker auf

  • Wenn man Pixel nicht nur als An/Aus-Zustände nutzt, sondern mehrstufige Graustufen, kann man auch bei noch kleineren Größen lesbaren Text erzeugen
    Wichtig ist hier allerdings, dass es um Text und nicht um einzelne Buchstaben geht
    Die einzelnen Zeichen dürfen ziemlich verschwommen sein, weil Menschen sie dann aus dem Kontext erschließen
    Dafür braucht man nicht einmal zwingend eine speziell dafür entworfene Schriftart
    Beispiel: https://imgur.com/a/text-80-characters-per-line-240-pixels-wide-AlYrnSS
    Selbst einschließlich Zeichenabständen kommt man dort im Mittel nur auf etwa 3 Pixel Breite pro Zeichen

  • Das Betriebssystem LAP6 des LINC-Minicomputers enthielt eine 4x5-Schriftart, allerdings ohne Kleinbuchstaben

  • Das erinnert mich an frühere Versuche, auf dem C64 per Software 80 Spalten umzusetzen
    Dabei wurde ein 3x7-Pixelraster verwendet, von dem eine Zeile und eine Spalte als Abstand reserviert waren; einige kommerzielle Produkte nutzten das tatsächlich
    https://www.pagetable.com/?p=901
    Einen 4×8-Zeichensatz gut lesbar und ansehnlich zu machen, ist nicht einfach, und da man 1 Pixel Abstand zwischen den Zeichen braucht, bleiben effektiv nur 3 Pixel Breite pro Zeichen
    Deshalb sind Buchstaben wie M oder N besonders schwierig

  • Es hieß, 4x5 oder 3x5 seien möglich, wenn man M, die dotted zero und die Unterscheidung zwischen U/V/Y opfert, aber ich halte 3x5 durchaus für praktikabel
    https://robey.lag.net/2010/01/23/tiny-monospace-font.html