Oft möchte man eine Schriftart anpassen, etwa um fehlende Umlaute zu ergänzen. Mit dem komplexen Schriftarteditor Fontforge fällt das schwer. Wie gut, dass Inkscape in die Bresche springt.

Icon-Font-Sets haben in den letzten Jahren weite Verbreitung im Internet und bei der Entwicklung von browserbasierten Applikationen gefunden. Zu den beliebtesten und wohl auch bekanntesten Vertretern der Gattung zählt Font Awesome [1]. Damit lassen sich leicht Icon-basierte Menüs auf einer Weboberfläche gestalten, aber auch sonst kommen diese Icons häufig zum Einsatz. Daneben enthält Font Awesome auch ein fertiges Stylesheet mit vielen Optionen.

So praktisch die Icon-Schriftart auch ist, in der Praxis hat sie auch Nachteile. So kommen oft nur wenige der darin enthaltenen Icons und CSS-Styles im Projekt zum Einsatz. Zudem wuchs die Icon-Sammlung über die Zeit so stark an, dass die Icons nicht nur in einem Set angeboten werden, sondern in mittlerweile drei verschiedenen Varianten. Oft benötigt man nur ein oder zwei Icons aus dem einen Set und eine ähnliche Zahl aus einem anderen. Das bedeutet, dass der Browser drei verschiedene Schriftartdateien laden muss, um eine Internet-Seite darzustellen.

Viele mögen da jetzt einwenden, dass dabei am Ende nicht einmal ein halbes Megabyte beim ersten Seitenaufruf zusammenkäme – doch Webentwickler sollten die Ressourcen immer im Blick behalten. Hostet man sein Projekt zum Beispiel in der Cloud und wird für den entstehenden Datenverkehr zur Kasse gebeten, dann summieren sich bei entsprechender Besucherzahl die Abrufe schnell zu einem größeren Datenvolumen auf, was sich dann schmerzlich im Geldbeutel bemerkbar macht.

Optimierungen

Auch die Ladezeit einer optimierten Seite mit weniger herunterzuladenden Icons beziehungsweise Schriftarten verkürzt sich, was wiederum die Suchmaschinenbetreiber wie Google mit besseren Positionen im Ranking belohnen. Auch Nutzer, die mit einem Smartphone auf die Seite kommen, werden dankbar sein: Schließlich müssen sie für den Datenverkehr immer noch bezahlen. Es lohnt sich also, hier eine Einsparmöglichkeit zu finden.

Projekte wie Fontello [2] und IcoMoon [3] bieten für Optimierungen eine einfache Lösung. Bei Fontello zum Beispiel stellt man aus einer Anzahl vorhandener Fonts seinen eigenen zusammen und kann sogar eigene Icons in Form von SVGs hinzufügen. Das Ergebnis lässt sich in Form eines individuell optimierten Schriftsatzes mit entsprechendem Stylesheet herunterladen.

Aber auch hier gibt es einige Nachteile, etwa hinsichtlich der Lizenz. Oft möchte man einem Font auch nur ein paar fehlende Icons – beziehungsweise Glyphen, wie es korrekterweise heißen müsste – hinzufügen. Das lässt schnell den Wunsch nach einem eigenen Font aufkommen, speziell bei Linux-Benutzern, die gern Abläufe verstehen und Dinge selbst regeln.

Fontforge

Als Platzhirsch und Killer-Applikation im Bereich Schriftarten gilt seit Jahrzehnten Fontforge [4]. Das Erstellen eines Fonts ist keine einfache Sache; schon allein die Anzahl an verschiedenen Typen von Fonts macht die Sache kompliziert. Da wären einerseits die uralten Bitmap-Fonts, andererseits die Vektor- oder Outline-Font-Formate wie Postscript-Fonts (PS Fonts), True- und OpenType sowie SVG-Fonts. Fontforge kommt mit ihnen allen zurecht.

Durch den hohen Funktionsumfang fällt der Einstieg in das Programm meist nicht eben leicht, die Lernkurve fällt am Anfang entsprechend steil aus. Auch die Zeichenfunktionen bieten weitaus weniger Komfort, als man es von einem Vektorzeichenprogramm wie Inkscape oder Adobe Illustrator kennt. Der unterschiedliche Aufbau der diversen Font-Formate macht die Angelegenheit nicht einfacher. Während Postscript-Fonts noch auf Bézier-Kurven basierten, verwendet TrueType sogenannte B-Splines.

Seit einiger Zeit benutzen Schriftartdesigner immer häufiger Inkscape zum Erstellen ihrer Fontsets. Das liegt auch nahe, da es sich bei den Glyphen in den Fonts ja um Vektorgrafiken handelt und Inkscape Spline-Funktionen beherrscht. Seit einigen Jahren enthält das Vektorgrafikprogramm standardmäßig auch eine Erweiterung für das Erstellen von Fonts: Es gibt ein entsprechendes Dokumenten-Template und mittlerweile auch einen SVG-Font-Editor. Des Weiteren findet der Live-Pfadeffekt Powerstroke im Schriftartdesign häufig Anwendung.

Daneben existiert ein Standard für SVG-Fonts, der einst geschaffen wurde, da die Darstellung der Fonts immer von den auf dem Zielsystem installierten Schriftarten abhing. Diese Problematik gehört heute der Vergangenheit an – dank Webfonts, dem Web Open Font Format (WOFF) und der Möglichkeit, TrueType- und OpenType-Fonts im Hintergrund herunterzuladen und für die Darstellung zu nutzen. Dennoch ist dieser Standard alles andere als passé: Mit SVG-Fonts lässt sich eine ganze Menge mehr anfangen, und Webdesigner beginnen bereits (oder endlich) damit, zu experimentieren – auch wenn Browser den Standard bisher kaum umsetzen.

Definitionen

Die Informationen für einen in eine SVG-Datei eingebetteten Font stehen in den Definitionen des Dokuments; Listing 1 zeigt ein Beispiel aus einem Quellcode. Der Tag inkscape:label wird eigentlich nicht benötigt, er hilft lediglich Inkscape bei der Darstellung im SVG-Schriftart-Editor. Nach diesen Angaben und noch vor dem schließenden </font>-Tag stehen dann die Glyphen. Im Code sieht so aus wie in Listing 2.

<font
  horiz-adv-x="1024"
  id="font1462"
  inkscape:label="Schrift 1">
  <font-face
    units-per-em="1024"
    id="font-face1464"
    font-family="LinuxUser" />
</font>

<glyph
  glyph-name="A"
  id="glyph1471"
  d="M 739.28065,515 A 189.57613,-238 0 0 0 549.70453,277 189.57613,-238 0 0 0 360.1284,515 189.57613,-238 0 0 0 549.70453,753 189.57613,-238 0 0 0 739.28065,515 Z" />

Die mit d= beginnende Zeile zeigt, dass ein Glyph aus nichts anderem besteht als aus Punkten für die Beschreibung eines Pfads, genau wie auch in Outline-Fonts. Der glyph-name kann den festgelegten Namen des Glyphen oder dessen Unicode-Codepunkt angeben. Bei der Benennung sollten Sie berücksichtigen, dass die Glyphen einer vorgegebenen Namenskonvention folgen. Beim Import einzelner Glyphen in Fontforge spielt das keine Rolle; möchten Sie aber den gesamten Font importieren, benötigt Fontforge den korrekten Namen für die Zuordnung des Glyphen. Den finden Sie entweder in einer entsprechenden Tabelle [5], oder Sie verwenden direkt Fontforge selbst dafür (Abbildung 1).

Abbildung 1: Die Ansicht einer Schriftart in Fontforge. Oben unter der Menüleiste und mit blauer Farbe hinterlegt steht die korrekte Bezeichnung des Glyphen (im Beispiel dollar).

Neben den festgelegten Bereichen für die entsprechenden Glyphen der verschiedenen Sprachen gibt es sogenannte Private Use Areas. Solche PUAs darf man mit eigenen Kreationen belegen, allerdings sind auch hier nicht alle Bereiche wirklich frei. Insgesamt gibt es drei Blöcke für diese PUAs: U+E000 bis U+F8FF, U+F0000 bis U+FFFFF und U+100000 bis U+10FFFF. Inoffiziell dient der Bereich von U+E000 bis U+F8FF allerdings als sogenannte Corporate Use Area. Wer in Fontforge einen Blick auf die Glyphen am Beginn dieses Blocks wirft, stellt fest, dass dort bereits viele Zeichen eine Art Stammplatz haben, die man für Webapplikationen benötigt (Abbildung 2).

Abbildung 2: Im Microsoft-Bereich der Private Use Area finden sich eine Vielzahl an praktischen Glyphen, die auf Webseiten oder in Applikationen zum Einsatz kommen.

Mit dem SVG-Schrifteneditor und der Typografieerweiterung gibt es nun zwei Werkzeuge, um einen SVG-Font in Inkscape zu erstellen. Während der Editor die Glyphen direkt in die SVG-Definition schreibt, geht die Erweiterung den Umweg über Ebenen und bietet an, diese später zu einem SVG-Font zu konvertieren. Möchten Sie einen vorhandenen Font in Fontforge erweitern, erleichtert dieses Prinzip die Arbeit. In diesem Fall benötigen Sie die Glyphen als eigenständige SVG-Datei. Über die Funktion Speichern unter | Ebenen als einzelne SVG (*.tar) lässt sich die Grafik so schnell exportieren.

Allerdings hat der Einsatz des Plugins auch Nachteile. Für die Benennung der Ebenen erwartet es zum Beispiel ein einzelnes Zeichen, was früher oder später Probleme bereitet, wenn das Zeichen nicht eindeutig ist. Das wird bei umfangreichen Fontsets wie Font Awesome immer der Fall sein. Sie müssen daher eventuell nach dem Umwandeln in einen SVG-Font mithilfe eines Editors den entsprechenden Unicode in den Code einfügen. Beim Hinzufügen eines Glyphen zu einem existierenden Font spielt dessen Name keine Rolle.

Dokumentvorlagen

Für die Dokumenteneinstellungen nutzen Sie am besten die über Datei | Neu aus Vorlage beziehungsweise [Alt]+[Strg]+[N] aufgerufene Vorlage. Gegenüber der Dokumentvorlage aus der Typografieerweiterung (Erweiterungen | Typografie | 1 Arbeitsfläche für Typografie einrichten hat sie den Vorteil, dass sie die für das Font-Design wichtigen Hilfslinien gleich mitbringt (Abbildung 3). Dabei lässt sich die Vorlage der Typografieerweiterung in der Größe verändern. Für Piktogramme oder Icons spielen die Hilfslinien keine große Rolle. Sollten Sie allerdings doch einmal Buchstaben und Ziffern designen wollen, helfen die Linien beim Ausrichten der Zeichen.

Abbildung 3: Inkscape mit der vordefinierten Vorlage für Typografie-Projekte. Die Hilfslinien erleichtern das Gestalten der Buchstaben. Rechts in der Seitenleiste ist bereits der SVG-Schriftarteneditor geöffnet.

An dieser Stelle gilt es, auch einen Blick auf die maximal erlaubte Größe der Zeichen in den unterschiedlichen Font-Typen zu werfen. Während TrueType-Fonts eine Area verlangen, die auf Zweierpotenzen basiert (also 512, 1024 oder 2048), setzt OpenType auf eine Area-Größe von 1000 im Quadrat. Sollten Sie also später den Font in einen TrueType-Font umwandeln wollen, wird Fontforge das auf jeden Fall bemängeln. Die eigentliche Bezeichnung für diese Größe lautet Unit Per EM (UPM). Auch sollten Sie beachten, dass die Höhe bindend ist; die Breite spielt hingegen nur eine untergeordnete Rolle. Ein Zeichen darf also durchaus einmal breiter ausfallen.

Glyphen auf Ebenen

Für den Start öffnen Sie mit Datei | Neu aus Vorlage (oder [Alt]+[Strg]+[N]) die entsprechende Vorlage für Typografie. Danach rufen Sie mit [Umschalt]+[Strg]+[L] den Ebenendialog auf. Im nächsten Schritt wechseln Sie in das Menü Erweiterungen und legen über Typografie | Glyph Ebene hinzufügen drei Ebenen mit den Namen 1, 2 und 3 an (Abbildung 4).

Abbildung 4: Die einzelnen Glyph-Ebenen für die Buchstaben A, B und C im Ebenendialog von Inkscape nach dem Anlegen.

Jetzt importieren Sie die einzelnen Grafiken 1.svg, 2.svg und 3.svg aus dem Download-Bereich zu diesem Artikel. Achten Sie dabei darauf, dass Sie die einzelnen Glyphen auch auf die richtige Ebene importieren. Danach entfernen Sie die Default-Ebene, indem Sie sie im Ebenendialog auswählen und auf das Minus-Symbol klicken. Ist das erledigt, können Sie die Datei speichern. Ein Umwandeln in Glyphen ist nicht notwendig, da Fontforge für den Import nur Pfaddaten benötigt. Wählen Sie dafür aus dem Menü Datei die Aktion Speichern unter und dann unten in der Dateitypauswahl die Option Ebenen als einzelne SVGs (*.tar).

Starten Sie nun Fontforge, und erstellen Sie mithilfe des Assistenten beim Start ein neues Projekt. In der Standardeinstellung legt Fontforge neue Projekte in der Kodierung ISO 8859-1 Latein 1 an. Für die Glyphen im Beispiel benötigen Sie jedoch ISO 10646-1 (Unicode, Voll). Über das Menü Kodierung | Umkodieren ändern Sie die Kodierung per Mausklick. Über Ansicht | Gehe zu ([Strg]+[Umschalt]+[<]) und die Eingabe von U+F0F3 springen Sie anschließend direkt zum gewünschten Glyphen.

Sie landen im PUA-Bereich, genauer gesagt in der Microsoft Symbol Area. Das gewählte Icon ist eine vollständig gefüllte Glocke. Nun wählen Sie Datei | Importieren oder drücken [Strg]+[Umschalt]+[I], stellen das Format auf SVG um und wählen die Datei mit der Glocke aus. Sie sollte den Namen Glyph-Layer-1.svg tragen. Importieren Sie dann die Grafik mit den Standardeinstellungen. Wiederholen Sie diese Schritte mit den anderen beiden Glyphen; die entsprechenden Platzierungen liegen direkt neben U+F0F3, also U+F0F4 und U+F0F5. Der Wechsel der Symbolfarbe in Fontforge zeigt an, dass diese Glyphen Änderungen enthalten, die noch nicht gespeichert wurden (Abbildung 5).

Abbildung 5: Die drei in Fontforge importierten SVG-Grafiken. Die rote Einfärbung signalisiert, dass die Änderungen noch nicht gespeichert wurden.

Ihre Änderungen sichern Sie nun erst einmal als Projekt im SFD-Format (Spline Font Database). So haben Sie die Möglichkeit, den Font später weiterzubearbeiten, ohne noch einmal neu beginnen zu müssen. Den eigentlichen Export in eine Schriftartdatei stoßen Sie über das Menü Datei | Schriften erstellen ([Strg]+[Umschalt]+[G]) an. Hier wählen Sie den gewünschten Font-Typ und speichern die Datei entsprechend. Falls Sie die TrueType wählen, beklagt sich Fontforge – wie bereits vorher erwähnt – über die UPM-Größe. Auch sonst wird die Datei einige Fehler enthalten, trotzdem klappt der Export. Damit wäre der erste Font bereits erstellt (Abbildung 6). Auf dieselbe Art lassen sich auch einzelne Glyphen in einem vorhandenen Font ergänzen.

Abbildung 6: Die mithilfe der Beispieldateien erstellte Schriftart nach dem Export im Schriftartenbetrachter des Gnome-Desktops.

Export als Schrift

Inkscape vermag auch komplette Fonts zu importieren. Dazu wandeln Sie die Datei mithilfe von Erweiterungen | Typografie | 3 – Konvertiert Glyphenebenen zu SVG-Schriften um. Außerdem ändern Sie mit einem Texteditor den Glyphennamen auf den korrekten Platz in der Unicode-Darstellung, da das Programm diesen Namen benutzt, um die Glyphen zuzuordnen. Als einfachere Alternative bietet sich der in Inkscape enthaltene SVG-Schrifteneditor an.

Öffnen Sie dafür ein neues Dokument, und verwenden Sie erneut die Typografieerweiterung für die Dokumenteneinstellungen. Starten Sie dann über Text den SVG-Schriftarteneditor, und klicken Sie in der Seitenleiste auf Neu. Damit legt Inkscape eine neue Schriftart an. Der Name des Fonts spielt für das Vorhaben nur eine untergeordnete Rolle, auch die anderen globalen Einstellungen sollten Sie unverändert übernehmen.

Anschließend importieren Sie die Datei A.svg über die entsprechende Funktion im Menü Datei. Die Grafik enthält den Großbuchstaben A in Form eines einfachen Pfads mit Pfadeffekten (Spiro-Spline und Powerstroke), allerdings noch nicht im benötigten Format. Bevor Sie den Pfad als Glyphen im SVG-Schriftarteditor verwenden können, müssen Sie ihn daher mithilfe der Option Pfad | Objekt in Pfad umwandeln konvertieren.

Nach der Aktion wechseln Sie in der Seitenleiste auf den Reiter Glyphen, wählen die neu erstellte Schriftart aus, und fügen mit einem Klick auf Glyphe hinzufügen eine solche hinzu. Deren Namen ändern Sie auf A – achten Sie auf die Großschreibung. Nun markieren Sie den Pfad auf der Zeichenfläche und klicken im Schrifteneditor auf die Option Kurven von der Auswahl erhalten.

Wiederholen Sie diese Schritte mit den Dateien B.svg und C.svg. Die Pfade in der Zeichenfläche dürfen Sie direkt nach der Übernahme des Pfads in den Schrifteneditor löschen; die Daten stehen dann bereits in der Definition der SVG-Datei. Abschließend lässt sich die gespeicherte SVG-Datei direkt in Fontforge öffnen oder in einen anderen geöffneten Font importieren. Vorhandene Glyphen ersetzt Fontforge dabei nicht automatisch; Sie müssen diese Einträge daher vorher entfernen.

Fazit

Mit Inkscape fällt der Einstieg in das Design von Schriftarten um einiges leichter. Viele Gestalter beherrschen dieses Werkzeug bereits und tun sich daher leicht, auf diesem Weg mit einer ersten kleinen Schriftart zu beginnen oder simple Ergänzungen vorzunehmen, ohne dafür in die Tiefen der Handhabung von Fontforge hinabzusteigen. Für richtiges Font-Design kommt man allerdings um das Erlernen aller Funktionen dieses Werkzeugs nicht herum. (cla)