22 · In-house · Web-App · Typografie

TypeGrid: eigene Pixel-Schriften gestalten, direkt im Browser.

Buchstaben auf einem Raster zeichnen, Pixel zu weichen, flüssigen Formen verschmelzen und als echte Schrift herunterladen. TypeGrid läuft komplett im Browser – ohne Konto, ohne Server, ohne Upload.

Eigenprojekt (In-house) – von vona für sich selbst gebaut · Projekt aus 2026

Web-App
HTML/CSS/JavaScript
Eine Datei
opentype.js
Clipper
OTF & WOFF
SVG
Ohne Konto

0 Uploads
alle Entwürfe bleiben im Browser – kein Konto, kein Server, kein Tracking: 94 Zeichen
A–Z, a–z, 0–9 und Satzzeichen, dazu eigene Symbole: 3 Exportformate
OTF zum Installieren, WOFF für Websites, SVG für Grafikprogramme

01 · Idee

Pixel-Schriften sind beliebt, die Werkzeuge dafür aber oft schwerfällig: Entweder bekommt man nur starre Quadrate, oder die Rundungen werden als Weichzeichner über die ganze Form gelegt, und Ecken verlieren ihre Schärfe. Wir wollten ein Werkzeug, in dem man Buchstaben schnell auf einem Raster zeichnet und dann bewusst steuert, wo die Pixel ineinanderfließen. Am Ende sollte keine Grafik stehen, sondern eine echte Schrift, die man installieren und auf Websites einsetzen kann.

02 · Lösung

Zeichnen: Jedes Zeichen entsteht auf einem Raster von 3 bis 20 Spalten und 5 bis 24 Zeilen. Klicken schaltet eine Zelle um, Ziehen malt, ein Rechtsklick radiert. Spiegeln, Verschieben, Rückgängig und Wiederholen sind eingebaut, die Bedienung per Tastatur ebenso. Ein mitgeliefertes Start-Alphabet zeigt sofort, wie das Ergebnis wirkt; wer will, beginnt mit einem leeren Alphabet.

Verschmelzen: Vier Regler wirken auf das ganze Alphabet: Pixel-Rundung, Radius der flüssigen Verbindungen, Abstand zwischen den Zellen und Konturstärke. Die Verbindungen wirken nur dort, wo Pixel tatsächlich aneinanderstoßen – waagerecht, senkrecht oder diagonal, je nach Einstellung. Einzelne Pixel bleiben eckig, wenn man das möchte, und Innenräume wie beim „O“ bleiben sauber offen. Auf Wunsch entstehen auch reine Umriss-Schriften.

Eigene Zeichen: Neben dem Alphabet lassen sich eigene Symbole anlegen, entweder einem bestimmten Unicode-Zeichen zugeordnet oder automatisch einem freien Platz im Bereich für eigene Zeichen. Ein Zufallsgenerator erzeugt auf Knopfdruck neue Muster: verstreute Punkte, Flächen, Linien oder Pfade, die übers Raster wandern.

Testen und exportieren: Unter dem Alphabet steht ein Vorschaufeld für eigenen Text, mit Größe, Laufweite, Zeilenabstand, Farben und proportionalen Abständen. Exportiert wird als OTF zum Installieren, als WOFF für Websites und als SVG für Grafikprogramme. Projekte lassen sich als Datei sichern und wieder öffnen.

03 · Ergebnis

TypeGrid ist eine einzige HTML-Datei von rund 500 KB. Sie läuft auf einem Webserver genauso wie direkt vom eigenen Rechner geöffnet. Es gibt kein Konto, kein Tracking und keine Uploads: Alle Entwürfe bleiben im Browser und werden dort automatisch gespeichert. Eine strenge Sicherheitsrichtlinie sorgt dafür, dass die Seite keine fremden Inhalte nachlädt.

Vorschau, SVG und Schriftdatei teilen sich dieselben Konturen und Abstände – was man in der Vorschau sieht, steckt auch in der Schrift. Die exportierten Schriften haben wir mit dem unabhängigen Werkzeug fontTools und dem Schrift-Prüfer von Chrome getestet. Entwickelt wurde TypeGrid mit Claude Code; in der App selbst steckt keine KI. Inspiriert von A. Burmistrov von antoncreations.

Zur App ↗

04 · Ablauf

Vom Raster zur Schrift: Zeichen wählen und Zellen setzen, mit vier Reglern Rundung, Verbindungen, Abstand und Kontur für das ganze Alphabet einstellen, eigenen Text in der Vorschau prüfen und als OTF, WOFF oder SVG exportieren. Alles läuft in einer einzigen HTML-Datei im Browser; Entwürfe werden dort automatisch gespeichert. Eigene Symbole kommen dazu, von Hand oder per Zufallsgenerator, und das Projekt lässt sich als Datei sichern und wieder öffnen.

05 · Einblicke

Arbeitsfläche: Formregler links, Editor in der Mitte, Alphabet rechts
Das „g“ im Editor: Die flüssige Form liegt direkt über dem Raster, die gestrichelte Linie ist die Grundlinie
Mit Rundung und flüssigen Verbindungen: Die Pixel fließen ineinander
Dasselbe Alphabet ohne Rundung und Verbindungen – klassische, eckige Pixel
Umriss-Modus: Aus denselben Buchstaben wird eine hohle Kontur-Schrift
Zufällig erzeugte Symbole: Punkte, Flächen, Linien und Pfade
Die exportierte WOFF-Schrift als echter Webfont auf einer HTML-Seite – markierbarer Text, keine Grafik
Auf dem Handy: Editor und Alphabet untereinander, per Touch bedienbar

Passende Leistungen

Das können wir auch für dich.

Die Leistungen hinter diesem Projekt — mit Beispielen, Ablauf und häufigen Fragen.

Design

Corporate Design, Webdesign, Print und UI/UX — von der Markenidentität bis zur Nutzerführung. Wir gestalten Auftritte mit klarem Wiedererkennungswert und Oberflächen, die sich gut bedienen lassen.

Mehr erfahren →

Entwicklung

Webentwicklung, App-Entwicklung und Individualsoftware — maßgeschneidert, performant und auf dein Unternehmen zugeschnitten. Wir entwickeln digitale Produkte, die langfristig funktionieren: sauber gebaut, gut zu pflegen und bereit zum Wachsen.

Mehr erfahren →