Wie ich eine handschriftliche Schriftart erstellt habe

 (kokorobot.ca)
3 Punkte von GN⁺ 2023-11-28 | 1 Kommentare | Auf WhatsApp teilen
  • Als die handschriftlichen Texte im Comic hakum von Seite zu Seite in Größe und Lesbarkeit schwankten, entschied ich mich, statt einer bestehenden Schrift meine eigene Handschrift als TTF-Schriftart zu erstellen
  • Ein zweiter Versuch mit eingescannten, auf Papier geschriebenen Buchstaben wirkte natürlicher und organischer als digitale Handschrift, die mit einem Pen-Tablet geschrieben wurde
  • Der Umfang war auf A-Z, a-z, die Ziffern 0-9 und grundlegende Satzzeichen beschränkt; erweiterte Funktionen wie Fett, Kursiv oder Ligaturen waren nicht Ziel des Projekts
  • Der Ablauf bestand darin, Scanbilder in Gimp zu bereinigen, sie in PNGs aufzuteilen und anschließend in FontForge Glyphenkonturen, linke und rechte Abstände sowie Kerning anzupassen
  • Beim Autotrace- und Exportprozess können Validierungsprobleme wie missing points at extrema oder self intersecting auftreten, weshalb handschriftliche Schriftarten viel Nachbearbeitung benötigen

Warum ich meine Handschrift in eine Schriftart verwandelt habe

  • Den Text für den Comic hakum habe ich früher direkt digital mit einem Pen-Tablet geschrieben
  • Das Ergebnis war in Ordnung, aber selbst auf einer einzelnen Seite wurden die Buchstaben oft größer oder kleiner, wodurch die Lesbarkeit schwankte
  • Da ich keine bestehende Schrift verwenden wollte, entschied ich mich, eine Schrift auf Basis meiner eigenen Handschrift zu erstellen
  • Ziel war eine TTF-Schriftart für die Veröffentlichung im Web, die nur einen begrenzten Zeichensatz enthält
    • Weder Fett noch Kursiv wurden erstellt
    • Ich hatte weder mit Schrifterstellung noch mit FontForge Erfahrung, daher gibt es womöglich bessere Wege

Zwei Versuche und grundlegende Fachbegriffe der Typografie

  • Die erste Schrift basierte auf digitaler Handschrift, die mit einem Pen-Tablet geschrieben wurde
  • Die zweite Schrift entstand aus eingescannten Bildern von auf Papier geschriebener Schrift, und weil die Schrift auf Papier weniger präzise war, wirkte sie organischer und natürlicher
  • Während der Erstellung der Schrift lernte ich die Begriffe für den Aufbau einer Schrift kennen; wenn man weiß, wofür die einzelnen Elemente da sind, hilft das bei besseren Designentscheidungen und beim Erstellen funktionaler Schriftarten
    • Ascender: der Teil eines Kleinbuchstabens, der über die x-height hinausragt
    • Baseline: die Grundlinie, auf der die meisten Buchstaben stehen und unter die Descender nach unten reichen
    • Cap Height: die Linie, die die Höhe der meisten Großbuchstaben angibt
    • Descender: der Teil, der wie bei p oder q unter die Baseline reicht
    • X-Height: der Abstand zwischen Baseline und mean line bei Kleinbuchstaben

Scans und Bereinigung in Gimp

  • Erstellt wurden Großbuchstaben A-Z, Kleinbuchstaben a-z, die Ziffern 0-9 sowie grundlegende Satzzeichen wie Komma, Ausrufezeichen und Fragezeichen
  • Zuerst zog ich in einem Skizzenbuch mit Bleistift Richtlinien für Baseline, cap height, x-height und descender und zeichnete darauf die Buchstaben
  • Wenn ich die Buchstaben zwischen den Richtlinien zeichnete, wirkten sie zu steif, also schrieb ich später den Satz "The quick brown dog jumps over the lazy fox" mehrfach in Groß- und Kleinbuchstaben
    • Dieser Satz enthält alle für a-z benötigten Buchstaben
    • Beim Schreiben eines Satzes achtet man nicht übermäßig auf einzelne Buchstaben, wodurch bessere Formen entstanden
    • Auf einem Raster konzentrierte ich mich nur auf die Einschränkungen
  • Ich wählte den am besten geschriebenen Satz aus und nutzte ihn für die Schrift; einige auf dem Raster gezeichnete Buchstaben verwendete ich ebenfalls
  • Wegen dieser Methode musste ich später cap-height, x-height und descender jedes Zeichens digital anpassen
  • Auf die eingescannten Buchstabenbilder wurde in Gimp Color > Threshold angewendet, um Graustufen zu entfernen
  • Wegen der Eigenschaften von Bleistift und Papier sowie weil ich kein Raster verwendet hatte, korrigierte ich Fehler in den Buchstaben mit dem Bleistiftwerkzeug in Gimp
    • In den Tool Options schaltete ich alle dynamics aus, um saubere Linien zu erhalten
  • Die bereinigten Buchstaben kopierte ich in ein neues Gimp-Dokument und sammelte sie dort; die Dokumentgröße wurde so gewählt, dass der größte und breiteste Buchstabe, das große M, hineinpasst
  • In diesem Schritt prüfte ich auch, ob die Strichstärke nicht zu stark variiert
  • Alle Buchstaben wurden einzeln als PNG in den Projektordner exportiert

Glyphen in FontForge erstellen

  • Ich wählte FontForge, weil es unter Linux läuft und von Leuten in meinem Umfeld empfohlen wurde, und die Nutzung war positiv
  • Wenn man ein neues Projekt erstellt, öffnet sich das Font View Window, in dem alle Glyphen-Slots der Schrift tabellarisch angezeigt werden
  • Unter Element > Font Info werden die Schriftinformationen eingetragen, und unter PS Names wird der Schriftname hinzugefügt
  • Für den Export als TTF muss im selben Fenster unter General die Em size auf 1024 geändert werden
    • Die UPM von TrueType-Schriften verwendet konventionell Zweierpotenzen wie 1024 oder 2048
    • Bei OTF-Schriften gelten andere Anforderungen
    • Im historischen Metallsatz befand sich jeder Buchstabe in einem eigenen Raumbehälter, um eine einheitliche Höhe zu gewährleisten, und die Höhe dieses Schriftkegels wurde als „em“ bezeichnet
  • Durch Doppelklick auf eine Glyphe in der Font View öffnet sich die Character View
    • Dort werden Glyphen gezeichnet oder bearbeitet
    • Über eine Tab-Oberfläche kann man sie einzeln ansehen oder mit einer vorbereiteten Textdatei Wörter nebeneinander prüfen
  • In der Ebenenliste unten links wird die Ebene Back ausgewählt und über File > Import die PNG des jeweiligen Buchstabens importiert
  • Danach wird die Glyphenkontur auf eine von zwei Arten erstellt
    • Die Kontur wird direkt gezeichnet
    • Oder man wählt die Ebene Fore und erzeugt mit Select > Autotrace automatisch eine Kontur
  • Autotrace erstellt anhand des Hintergrundbildes eine Kontur mit Kontrollpunkten und Bézier-Kurven, es kann jedoch zu zu vielen Punkten oder Problemen mit fehlenden Extrema kommen
  • Sobald eine geschlossene Form entstanden ist, wird die entsprechende Glyphe auch in anderen Fenstern angezeigt

Linke und rechte Abstände sowie Vorschau

  • Für jede Glyphe werden linker und rechter side bearing angepasst, um die endgültige Breite der Glyphe festzulegen
  • Um alle Glyphen automatisch zu zentrieren, kann Metrics > Auto Width verwendet werden
  • Um alle Glyphen innerhalb ihrer Breite mittig zu platzieren, kann Metrics > Center In Width verwendet werden
  • Beim Korrigieren der Kontur hilft es, die Referenzebene auszublenden
  • Um eine Glyphe neu zu beginnen, wählt man im Font Window die gewünschte Glyphe aus und verwendet Edit > Clear
  • Um nur die Referenzebene zu löschen, verwendet man Edit > Clear Background
  • Wenn man im Textfeld über der Arbeitsfläche in der Character View nach dem aktuellen Zeichen ein Wort oder beliebige Zeichen eingibt, kann man vorab sehen, wie die Buchstaben nebeneinander aussehen
  • Dieser Vorgang muss für alle Glyphen wiederholt werden; besonders bei der Glyphe Space wird der Abstand zwischen Wörtern zu groß, wenn die linken und rechten side bearing nicht angepasst werden

Kerning einrichten

  • Kerning ist der Prozess, den Abstand zwischen Zeichen so anzupassen, dass sie leichter lesbar wirken
  • Im Font Window geht man zu Element > Font Info und dann im Reiter GPOS unter Lookups auf Add Lookup
  • Im Dropdown Type wird Pair Position (Kerning) ausgewählt
  • In der Spalte Feature klickt man auf den Pfeil neben New, wählt Kern Horizontal Kerning und bestätigt
  • Dann wählt man den neu erstellten GPOS-Eintrag aus, klickt auf Add Subtable und bestätigt den Standardnamen unverändert
  • Die zu kernenden Buchstaben werden in beiden Tabellen per Drag ausgewählt
    • Dabei müssen sowohl Groß- als auch Kleinbuchstaben ausgewählt werden
    • Um in einer Tabelle beide Gruppen zu markieren, verwendet man Shift
  • Klickt man auf pairings, wird unten im Fenster eine vergrößerte Darstellung des Glyphenpaars angezeigt
  • Durch Ziehen der zweiten Glyphe wird sie näher an die erste heran oder weiter von ihr weg platziert, bis alle Glyphenkombinationen gut aussehen

Testen und Exportvalidierung

  • Um die Schrift und das Kerning in FontForge zu testen, wird File > Print verwendet
  • Da der Standardtext nicht alle möglichen Kombinationen zeigt, kann man eigenen Text hinzufügen
  • kern_pairings.txt enthält alle Kerning-Kombinationen und kann in die Testansicht eingefügt werden

  • Probleme, die beim Export auftreten können

    • Beim Export über File > Generate Fonts kann FontForge einige Zeichen als überprüfungsbedürftig markieren
    • Non-integral coordinates bedeutet, dass die Position eines oder mehrerer Punkte einer Glyphenkontur Dezimalanteile wie 2.25 hat
    • Man wählt die problematische Glyphe aus und aktiviert unter Element > Validation > Find Problems "non-integral coordinates", dann wiederholt man fix
    • Bei handschriftlichen Schriften, die nicht stark von Präzision abhängen, macht eine Verschiebung auf sehr nahe Ganzzahlkoordinaten oft keinen großen Unterschied
    • Missing points at extrema bedeutet, dass Kontrollpunkte einer Kurve die Kurve über ihre Grenzpunkte hinausdrücken
    • Die Kontrollpunkte müssen so angepasst werden, dass der höchste Punkt oder andere Extrempunkte der Kurve gelbe Punkte werden
    • Element > Add Extrema kann helfen, kann aber die Glyphe verformen oder zusätzliche Probleme mit non-integral coordinates erzeugen
    • Auch wenn dieser Fehler im Protokoll steht, ließ sich die Schrift noch erzeugen, allerdings können subtile und lästige Verzerrungen entstehen
    • Bei unordentlichen handschriftlichen Schriften oder bei Verwendung von Autotrace treten Probleme mit Extrema leichter auf
    • Self intersecting bedeutet, dass sich die Glyphenkontur selbst überschneidet
    • Man muss alle Linien prüfen und Überlappungen entfernen

Wahl von TTF und Installation

  • Für den Verwendungszweck war TTF (TrueType Font) vollkommen ausreichend
  • OTF war nicht nötig, da keine große Zahl an Glyphen geplant war, Fett und Kursiv nicht als separate Stile enthalten sein sollten und keine Ligaturen benötigt wurden
  • Die Inhalte, in denen die Schrift verwendet wird, werden im Web veröffentlicht, und TTF eignet sich für diesen Zweck
  • Um die Schrift aus allen Glyphen der Font View zu erzeugen, verwendet man File > Generate Fonts
  • Im Dropdown unter dem Schriftnamen wählt man TTF als Ausgabeformat und bestätigt; dann wird die Schrift im Projektordner gespeichert
  • Die erzeugte Schrift kann anschließend an den Speicherort für Systemschriften verschoben werden
  • Referenzen und Anwendungsbeispiele

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2023-11-28
Meinungen auf Hacker News

  • Die Übersicht zu FontForge war gut; ich habe früher auch mal ein wenig damit herumgespielt.
    Es ist zwar etwas grob, aber ich weiß auch nicht, ob kommerzielle Konkurrenzprodukte wirklich viel besser sind. Ich kenne nicht einmal deren Namen.
    Und die Website ist sehr schön. Ungewöhnlich und mit klarer eigener Persönlichkeit.

    • FontForge ist Open Source, plattformübergreifend und ziemlich funktionsreich, wofür man dankbar sein kann; aus eigener Erfahrung sind kommerzielle Alternativen in der Praxis aber tatsächlich deutlich besser.
      Wenn man macOS hat, kann man sich Glyphs(/Mini) oder RoboFont mit ausreichend langer Testphase selbst ansehen. Am meisten gespannt bin ich trotzdem auf die nächste Generation von Tools, einschließlich webbasierter Werkzeuge wie fontra.xyz.
    • Auch MFEK lohnt es sich weiter im Blick zu behalten, ob es einen ausgereifteren Stand erreicht.
      Alles, was ich bisher zu MFEK gesehen habe, sah ziemlich cool aus.
      https://mfek.org/
    • Wo FontForge gerade erwähnt wird: Ich frage mich, ob jemand weiß, wie man beim Erstellen einer Schrift eine Vorschau mit Text über mehrere Absätze bekommt.
      Nur ein einzelner Satz wie „quick brown fox“ reicht oft nicht aus.

  • 100r.co ist ebenfalls unbedingt einen Blick wert.
    Devine und Rekka betreiben ihr Studio vom Segelboot Pino aus und dokumentieren ihr Leben, ihre Reisen und ihre Projekte.

  • Gute Zusammenfassung von FontForge.
    Wie der Artikel andeutet, gibt es für das Erstellen einer Schrift aus Handschrift auch einfachere und stärker automatisierte Optionen. Danach kann man die resultierende Schrift noch nachbearbeiten.
    https://www.calligraphr.com/en/ hieß früher MyScriptFont.

  • Die erstellte Schrift sieht meiner ziemlich ähnlich.
    https://imgur.com/a/g8bIoUY
    Ich habe mich nicht tief in Optimierungen wie Kerning eingearbeitet, aber die 3–4 Programme, die ich ausprobiert habe, waren alle extrem frustrierend, kaputt oder schwer zu bedienen. Vielleicht lag es auch an meiner Nutzung; kostenpflichtige Software ist vermutlich deutlich besser. Beeindruckend, dass du es bis zum Ende durchgezogen hast.

  • Ich frage mich, was der einfachste Weg ist, mehrere Schriften zu einer einzigen Schrift zusammenzuführen.
    VS Code unterstützt keine Schrift-Einstellungen pro Sprache oder Token. Man kann also zum Beispiel nicht Comic Sans für Kommentare und eine andere Schrift für den Rest verwenden; Einstellungen wie kursiv/fett sind aber möglich.

  • Ich liebe Schriften, seit sie in den 80ern mit dem Boom von Desktop Publishing weit verbreitet wurden.
    Man könnte sagen, sie wurden eine Zeit lang übertrieben eingesetzt, aber sie waren eines der ersten Dinge, durch die mir klar wurde, dass Design wichtig ist. Jedenfalls eine schöne Schrift und eine hervorragende Übersicht.

  • Ich frage mich, ob es tatsächlich Leute gibt, die Schriften mit MetaFont/MetaPost erstellen.
    Ich weiß auch nicht, ob FontForge Scripting-Funktionen hat. Ich habe es nie selbst benutzt, nur darüber gelesen, aber ich habe alle fünf Bände von Knuths „Computers and Typesetting“ gelesen.

  • Ich frage mich, ob es schon ein AI-Wrapper-Startup gibt, das Schriften erstellt.
    Die Prompts wären bestimmt interessant. Zum Beispiel: „Entwirf eine kinderfreundliche Weihnachtsschrift, die stark vom Balkan beeinflusst ist, aber auch sowjetischen Brutalismus einfließen lässt.“
    Auch kommerziell sollte es kulturell natürlicher werden, exotische Schriften zu verwenden. Ich verstehe, warum Helvetica, Roboto, Noto Sans und modernere Schriften genutzt werden, aber die Welt ist ehrlich gesagt ein wenig langweilig geworden.

  • Es war eine verpasste Gelegenheit, dass der Blogartikel selbst nicht die eigene Schrift verwendet hat.

  • Es sollte nicht der Satz sein, in dem „der Hund über den Fuchs springt“, sondern der, in dem der Fuchs über den Hund springt ;-)
    Denn Hunde sind faul und Füchse sind schnell.