Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Andreas Hecht 17. Juli 2018

10 kostenlose Tools fürs Schriftdesign: So erstellst du deine eigene Schriftart

Schriftarten sind ein sehr kraft­vol­ler, indi­vi­du­el­ler Weg, um Inhalte dar­zu­stel­len. Sie haben direk­ten Einfluss dar­auf, wie wir Inhalte wahr­neh­men und inter­pre­tie­ren. Typografie ist heut­zu­ta­ge sehr beliebt, auch und gera­de im Zusammenspiel mit respon­si­vem Webdesign, für das ganz eige­ne Regeln gel­ten. Es gibt eine Unzahl von frei­en Fonts online.

10 freie Tools, mit denen Sie Ihre eigenen Fonts erstellen können

Denk nur an das mitt­ler­wei­le sehr groß gewor­de­ne Google Fonts Verzeichnis mit sei­nen (zur Zeit) 878 Schriftfamilien, nicht -arten. Der Haken: Dort musst du die Fonts so neh­men, wie sie ange­bo­ten wer­den. Wenn du jedoch eine bestehen­de Schriftart modi­fi­zie­ren oder gar eine ganz eige­ne Schriftart erstel­len möch­test, dann bist du dort an der fal­schen Adresse.

Es gibt aller­dings eini­ge Dienste im Netz, die sich genau dar­auf, näm­lich die Modifizierung bestehen­der Fonts und die Erstellung kom­plett neu­er Schriftarten, das soge­nann­te Schriftdesign, spe­zia­li­siert haben. Diese Dienste stel­le ich dir heu­te vor.

1. FontArk

FontArk - Advanced online font editor

FontArk ist ein brow­ser­ba­sier­ter Font-Editor und ein Werkzeug zum Erschaffen neu­er Schriftarten. Mit FontArk kön­nen ent­we­der Templates impor­tiert, oder aber völ­lig neue Fonts geschaf­fen wer­den. Gutes Video-Material führt durch die ein­zel­nen Funktionen und erklärt, wie man für gute Ergebnisse ver­fah­ren soll­te. Es soll­te klar sein, dass man für opti­ma­le Ergebnisse eini­ge Einarbeitungszeit benö­tigt. Ein kur­zes Ausprobieren des Font-Editors ist ohne einen Benutzer-Account mög­lich. Jedoch wer­den alle Funktionen erst frei­ge­schal­tet, wenn man sich ein­ge­loggt hat. Eine Registrierung ist also unbe­dingt nötig, wenn du dei­ne Ergebnisse spei­chern und anse­hen möch­test. Du kannst dich per OAuth über Facebook regis­trie­ren, musst es aber nicht. Der kon­ven­tio­nel­le Weg über Benutzernamen und Passwort funk­tio­niert eben­falls.

Praktisch ist der Outline-Generator, der dir erlaubt, einen Rahmen um den Buchstaben zu legen. Später kannst du dann die Dicke und die Rundungen der ein­zel­nen Buchstaben bear­bei­ten. Auch meh­re­re Buchstaben gleich­zei­tig zu bear­bei­ten, stellt kein Problem dar. Den fer­ti­gen Font expor­tierst du dann als OTF-Datei.

FontArk – Advanced online font edi­tor | FontArk Video Tutorials

Video: Erste Schritte mit FontArk

2. PaintFont

PaintFont Tool

PaintFont ist ein rela­tiv simp­les, aber doch sehr wirk­sa­mes Tool. Auf der Website wird zuerst ein “Template” erstellt, in dem du bestim­men kannst, wel­che Buchstaben und Sonderzeichen ent­hal­ten sein sol­len. Dieses Template ist eine PDF- oder PNG-Datei, die auf den eige­nen Rechner her­un­ter­ge­la­den wird, um dort einen eige­nen Font ent­we­der hand­schrift­lich oder per Gimp/Photoshop zu erstel­len. Nachdem du das Template aus­ge­füllt hast, lädst du es wie­der auf die Plattform hoch. Dein eige­ner Font wird dann gene­riert und kann als OTF- oder TTF-Version her­un­ter­ge­la­den wer­den. Eine Registrierung ist zur Nutzung von PaintFont nicht nötig.

PaintFont Homepage | PaintFont Tutorial

Das noch aus­zu­fül­len­de Template sieht so aus:

Das Template für den eigenen Font.

3. BirdFont

BirdFont

BirdFont ist kein wirk­lich rein kos­ten­lo­ses Tool, aber es ist Open-Source und kann kos­ten­frei ver­wen­det wer­den, solan­ge man mit der SIL Open Font License ein­ver­stan­den ist. Unter die­ser Lizenz wird der gene­rier­te Font dann lizen­siert. Möchte man sei­nen Font hin­ge­gen auch kom­mer­zi­ell ver­wen­den, kos­tet die Freischaltung ab 1.- USD respek­ti­ve ab 5.- USD mit Programm-Updates. Die genann­ten Preise sind Mindestpreise, man kann und darf mehr bezah­len.

BirdFont ist kei­ne Online-Anwendung, son­dern ein Desktop-Tool und als sol­ches für Windows, Mac OS X, sowie für Linux erhält­lich. Um einen Font zu kre­ieren, kannst du auf dem Gitter zeich­nen, oder sogar dei­ne Eingaben hand­schrift­lich über ande­re Programme ein­ge­ben (auch auf Papier). Diese Bild-Datei wird dann als Hintergrund in BirdFonts impor­tiert. Darüber ent­wirft man nun sei­ne Buchstaben. Die Anwendung kann aus ande­ren Programmen wie zum Beispiel Inkscape oder Abobe Illustrator impor­tie­ren und fer­ti­ge Projekte ent­we­der als TTF-, EOT- oder SVG-Fonts expor­tie­ren. Etliche Tutorials sind auf der Webseite zu fin­den. Ebenfalls exis­tie­ren eine Menge Video-Tutorials zu allen wich­ti­gen Arbeitsschritten.

BirdFont Homepage | BirdFont Download | BirdFont Tutorials

Die BirdFont-Oberfläche:

birdfont-oberflaeche

4. FontForge

FontForge

FontForge ist ein sehr umfang­rei­ches, kos­ten­lo­ses Open-Source Tool mit fast unend­li­chen Möglichkeiten und Einstellungen. Die Funktionsvielfalt könn­te einen Einsteiger in die Materie glatt abschre­cken, wenn es nicht so gute Tutorials und ein umfas­sen­des FAQ gäbe, dass dem geneig­ten Leser sehr viel Fachwissen über Typografie ver­mit­telt.

In FontForge wer­den Buchstaben mit­tels Kurven gezo­gen, die wie­der­um in Form und Position beein­flusst wer­den kön­nen. Wenn du bereits in Photoshop oder Gimp gezeich­net hast, ist das gar nicht so schwer. Ansonsten muss etwas Zeit zum Erlernen inves­tiert wer­den. Dafür sind die mög­li­chen spä­te­ren Ergebnisse aber sehr gut. Für eine bes­se­re Kontrolle über die gezeich­ne­ten Elemente gibt es Ebenen, genau wie in Photoshop oder ähn­li­chen Programmen.

FontForge kann SVG- und EPS-Dateien von Adobe Illustrator oder Inkscape impor­tie­ren. Auch kann das Programm Fonts aus PDF-Dateien aus­le­sen. Vor dem Exportieren dei­nes Fonts kannst du eine Funktion zum Auffinden von Fehlern und Inkonsistenzen star­ten – näm­lich die “Find Problem”-Option, sowie die Font-Validierungs-Tools. FontForge ist ein Desktop-Tool und erhält­lich für Windows, Mac OS X und Linux.

FontForge Homepage | Tutorials | FontForge Download

Die Oberfläche von FontForge:

FontForge Oberfläche

Video: Eine kur­ze Einführung in FontForge

5. FontStruct

FontStruct

Mit FontStruct erstellst du Fonts durch die Kombination von ein­fa­chen, geo­me­tri­schen Formen. Du kannst Schriftarten ent­we­der kom­plett neu erstel­len oder auf Basis bereits bestehen­der Fonts ande­rer User arbei­ten. Beispiele fin­dest du in der Galerie. Die Oberfläche des Web-Dienstes ist ein­fach und klar gehal­ten, jedoch kann ein “Experten-Modus” akti­viert wer­den, in dem du dann Zugriff auf vie­le wei­te­re Optionen erhältst. Der Arbeitsbereich kann in der Größe beein­flusst und es kann hin­ein- und hin­aus­ge­zoomt wer­den. Es gibt einen Vollbild-Modus und ver­schie­de­ne Gitter und Hilfslinien ste­hen zu dei­ner Verfügung.

Die neu geschaf­fe­ne Schriftart expor­tierst du ent­we­der als TTF-Datei oder aber als .glyphs (kann unter MAC OS X bear­bei­tet wer­den). FontStruct kann kei­ne exter­nen Fonts impor­tie­ren und dei­ne Handschrift nicht in einen Font kon­ver­tie­ren. Allerdings steht eine Galerie mit Dutzenden von ande­ren Usern erstell­ten Fonts bereit, die du dann zur wei­te­ren Bearbeitung impor­tie­ren kannst. Das funk­tio­niert in allen Browsern, braucht jedoch zur kor­rek­ten Funktion Adobe Flash. Eine Registrierung ist unbe­dingt erfor­der­lich und kann nur per Benutzernamen und Passwort erfol­gen.

FontStruct Homepage | FontStruct FAQ | FrontStruct Hilfe

Video: Eine Einführung in FontStruct

6. Glyphr Studio

Glyphr Studio

Diese prak­ti­sche und recht funk­ti­ons­star­ke App kommt in zeit­ge­mä­ßer Form. Sie kann ent­we­der als Web-App oder als ein­fa­che HTML-Datei vom hei­mi­schen Rechner aus genutzt wer­den. Dank die­ser Form muss das Glyphr Studio nicht instal­liert wer­den. Inkscape- und Illustrator-Dateien sind impor­tier­bar, eben­so wie gan­ze SVG-Fonts. Die Anpassung von Kerning und Ligaturen ist kein Problem, auch ver­knüpf­te Formen kön­nen erstellt wer­den, um sie an ande­ren Buchstaben erneut nut­zen zu kön­nen.

Mit der Test-Drive-Funktion erhältst du zudem eine Live-Vorschau dei­nes Fonts. Eine ech­te Besonderheit ist der Zwei-Bildschirm-Modus, mit dem du das Glyphr Studio auf zwei Monitore auf­tei­len kannst. Glyphr ist in allen moder­nen Browsern nutz­bar, jedoch soll Google Chrome die bes­ten Ergebnisse lie­fern. Glyphr expor­tiert Projekte als OTF- und SVG-Dateien.

Glyphr Studio Homepage | Glyphr Studio Online-Anwendung | Glyphr Studio Dokumentation

Die Benutzeroberfläche:

Glyphr Studio Benutzeroberfläche

7. MyScriptFont

MyScriptFont

MyScriptFont basiert auf dem sel­ben Prinzip wie PaintFont. Die Homepage ist sehr ähn­lich auf­ge­baut. Auch hier lädt man ein Template her­un­ter, füllt es hand­schrift­lich aus, scannt es als 300dpi Dokument ein und lädt es auf MyScriptFont hoch. Danach steht dann zeit­nah der neue Font als TTF- oder OTF-Datei zum Download bereit. Eine Registrierung ist zur Nutzung des Dienstes nicht erfor­der­lich.

MyScriptFont Homepage

8. Fontastic

Fontastic

Mit der Web-Anwendung Fontastic las­sen sich kei­ne “nor­ma­len” Fonts erstel­len. Vielmehr baust du damit eige­ne Icon-Fonts, die auf Webseiten Verwendung fin­den. Dabei kann das Tool die von dir ent­wor­fe­nen Icons zusätz­lich als SVG-Sprite zum Download bereit­stel­len.

Fontastic impor­tiert SVG-Dateien aus Illustrator, um dar­aus dann einen Icon-Font zu erstel­len. Jedes ein­zel­ne Detail der Icons kann mit CSS bear­bei­tet wer­den, zum Beispiel um Schatten und Farben hin­zu­zu­fü­gen und zu ändern. Der fer­ti­ge, in die Webseite ein­ge­bun­de­ne Icon-Font ska­liert her­vor­ra­gend auf ver­schie­de­nen Ausgabe-Medien und sieht dem­entspre­chend über­all anspre­chend aus. Eine Registrierung ist zur Nutzung des Dienstes not­wen­dig und erfolgt über E-Mail-Adresse und Passwort. Fontastic funk­tio­niert in allen moder­nen Browsern.

Fontastic Homepage | Fontastic Dokumentation | Eigene Icons in Fontastic impor­tie­ren

Video: Fontastic-Einführung

http://youtu.be/V6GMZojJCk4

9. Pentacom’s BitFontMaker

BitFontMaker2

Der BitFontMaker ist ein Tool für eine spe­zi­el­le Art von Fonts, denn es las­sen sich mit dem Tool soge­nann­te Pixel-Fonts erstel­len, wie man sie noch von alten Video-Spielen kennt. Stöbere in der umfang­rei­chen Galerie, um zu sehen, was ande­re User an Fonts erstellt haben. Oder lade eige­ne TTF- oder OTF-Fonts hoch, um die­se dann zu bear­bei­ten. Auch neue Fonts las­sen sich von Grund auf rela­tiv leicht im Editor erstel­len. Das fer­ti­ge Endprodukt kann dann mit ande­ren Nutzern geteilt wer­den. Mit fol­gen­den Browsern funk­tio­niert der Dienst: IE 9+, Firefox 2+, Safari 5+ und Google Chrome. Eine Registrierung ist zur Nutzung von BitFontMaker nicht nötig.

BitFontMaker Homepage | BitFontMaker Hilfe

10. TTFEdit

TTF-Edit

Das letz­te Tool die­ser Liste ist wie­der eine Desktop-Anwendung, die instal­liert wer­den muss. In der Funktionsvielfalt liegt TTFEdit genau in der Mitte zwi­schen sehr kom­ple­xen Anwendungen, wie FontForge, und den ein­fa­che­ren Anwendungen ohne gro­ße Funktionsvielfalt. Existierende Fonts im TTF-Format kön­nen impor­tiert und modi­fi­ziert wer­den, oder man erstellt kom­plett neue Projekte aus Templates. Das Interface ist in Tabs auf­ge­teilt, wobei jeder Tab für ver­schie­de­ne Aktionen steht. Die Form jedes Charakters kann durch das Bewegen und die Größenänderung von Kurven geän­dert wer­den.

TTFEdit ist zur Zeit nur für Windows erhält­lich .

Fazit

Bei der Auswahl der Anwendungen für die Font-Erstellung habe ich dar­auf geach­tet, dass für vie­le Problemstellungen Angebote dabei sind. Manchem mag es schon rei­chen, sei­ne eige­ne Handschrift zum Font kon­ver­tie­ren zu kön­nen, ande­re ent­wer­fen lie­ber neue Fonts von Grund auf. Spaß machen wird die Arbeit an eige­nen Fonts mit jeder der vor­ge­stell­ten Anwendungen.

Links zum Beitrag

Ergänzende Beiträge auf Dr. Web

(Der Beitrag erschien erst­mals am 4. März 2015 und wur­de von Andreas Hecht geschrie­ben. Seitdem wird der Beitrag regel­mä­ßig aktua­li­siert. Insbesondere wer­den nicht mehr funk­tio­nie­ren­de Lösungen ent­fernt und – soweit mög­lich – durch neue ersetzt. Die letz­te Aktualisierung datiert vom 27. Juli 2018.)

(Beitragsbild: Depositphotos)

Andreas Hecht

Andreas Hecht

entwickelt WordPress-Websites und bietet dir einen Website Sicherheit Service und einen Performance Service für deine Website. Außerdem ist er Spezialist für Onpage SEO und bringt Deine Website in die Top-Suchergebnisse von Google. Auf seinem Blog schreibt er über WordPress, SEO und Content SEO.

4 Kommentare

  1. Wow, ich wuss­te gar nicht, dass sol­che Typographie-Editoren exis­tie­ren. Ich habe mir bis­her das Lettering für Logos in Illustrator zusam­men­ge­schnip­selt. Das ja ganz wun­der­bar. Und es erklärt die Fülle an güns­ti­gen Schriften auf Seiten wie crea­ti­ve mar­ket.

    Merci Dr. Web!

  2. Danke für die Zusammenstellung, PaintFont gibt es nicht mehr, wur­de von Calligraphr.com über­nom­men. Kostenlose Fonts sind rela­tiv ein­ge­schränkt.

  3. Schöne Zusammenstellung. Hätte ich vor eini­ger Zeit gut gebrau­chen kön­nen.

    FontForge benö­tigt wirk­lich eini­ge Einarbeitungszeit und Wissen über Fonts und Fonterstellung.

    Hinweis zu ttfe­dit: ist ein Java-Programm, das auch unter Linux läuft. Einzig das Shell-Skript zum Starten muss noch auf Unix-Zeilenenden umge­stellt wer­den.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.