Webfonts

Geballtes Wissen rund um Typografie und den Einsatz von Schriften in Web und Apps: Alle wichtigen Fragen zu Web- und App-Fonts beantwortet unser PAGE eDossier »Typografie im Web«. Zum Beispiel ob es sinnvoller ist, Web-Fonts zu kaufen oder zu mieten, ob Web-Fonts auch auf iPad und iPhone funktionieren oder ob Typo im Web eigentlich responsiv sein muss. Darüber hinaus zeigen wir an verschiedenen Praxisbeispielen, wie sich Unternehmensauftritte typografisch konsistent über alle Medien hinweg in Print, Web und App realisieren lassen.

mehr

Holz oder doch nicht?

193 Zeichen schnitt der Typedesigner Felix Braden manuell in Holz, druckte sie und digitalisierte verschiedene Druckbilder. So kann man das Schriftbild eines handgemachten Holzdrucks täuschend echt nachbilden. mehr

Darstellungsqualität am Screen: Von Apps bis Internet of Things

Die Anforderungen an heutige Screenfonts sind groß. Sie müssen Trends überstehen und sich für eine Vielzahl von Umgebungen eignen. Welche Schriften diese Herausforderungen meistern, verrät Teil 8 unserer Serie »Schrift bringt’s«. mehr

Variable Fonts testen

Geredet wird von Schriften im recht neuen, Variable Font Format viel, in Anwendungen sieht man sie allerdings noch eher selten. Auf zwei Webseiten kann man immerhin einige ausprobieren. mehr

Freefonts: Ganz genau hinschauen oder Finger weg!

Wer viel Zeit in die Entwicklung eines Fonts steckt, möchte damit zumeist auch etwas Geld verdienen. Dennoch kursieren Tausende kostenlose Schriften im Internet, die sich aber längst nicht alle für den professionellen Gebrauch eignen. Teil 7 der Serie »Schrift bringt’s« sagt, worauf es ankommt. mehr

Anzeige

Individuelle Schrift: Schon durch ein paar umgestaltete Zeichen

Gipfel der Individualität ist ein Custom Font, also eine speziell auf die Wünsche und Bedürfnisse eines Kunden zugeschnittene Schrift. Das hat seinen Preis. Der sechste Teil der Serie »Schrift bringt’s« sagt, wie sich auch ohne Custom Font eine gewisse Einzigartigkeit erreichen lässt. mehr

Emigre Musterfont Tangly

Mit Tangly bringt Zuzana Licko, Mitbegründerin der Kultfoundry Emigre, seit langer Zeit mal wieder eine Schrift heraus. mehr

Shine like a diamond

Ein Mix aus historischen und zeitgenössischen Ideen ist GT Zirkon, die neue Schriftfamilie der Schweizer Foundry Grilli Type. mehr

Lesbarkeit: Gute Texte in Print, Web und Raum

Welche Schrift sich fürs Lesen am Screen eignet und welche gut in Leitsystemen funktionieren verrät Teil 5 der Serie »Schrift bringt’s«. mehr

Anzeige

Schriftumfang: Wie viele Schnitte? Welche OpenType-Features?

Für ein Plakat oder Packaging reicht manchmal ein einzelner Schnitt, im Editorial und Corporate Design dürfen es gerne ein paar mehr sein. Aber wie viele und welche OpenType-Features machen sich gut in Print und Web? Das fragen wir in Teil 4 unserer Serie »Schrift bringt’s«. mehr

Schriften Tinder

Die Web App Font Flipper hilft dabei, den richtigen Google Font für ein Projekt zu finden. mehr

Intelligente Schrift Logical

Von einem in Amsterdam lebenden Schweizer Typedesigner kann nur eine professionelle Schrift kommen. Logical von Edgar Walthert ist der Beweis. mehr

Variable Fonts – Trend und Potenzial fürs Webdesign

Es existieren bereits Variable Fonts, einige zum Testen, andere auch schon zum Kaufen …

mehr

Anzeige

Schriften blättern

Drei Schriften der Foundry Leftloft stellt der Katalog von TypeTogether vor. mehr

Sprachunterstützung: Global, europäisch oder national?

Blöd, wenn eine Gestaltung nach skandinavischen Buchstaben oder osteuropäischen Akzenten verlangt, der Font sie aber nicht enthält. Eine Schrift, die man langfristig einsetzen möchte, braucht eine gewisse Sprachunterstützung. Darum geht es im dritten Teil unserer Serie »Schrift bringt’s«. mehr

Branchentypo: Sich im Umfeld prägnant positionieren

Wer eine Schrift für das Label von Kinderkleidung sucht, wird wahrscheinlich eher keine geometrische Serifenlose wählen … Im zweiten Teil unserer Serie »Schrift bringt’s« geht es um passende Typen für verschiedene Branchen.

mehr

Tools und Tipps für digitale Typografie

Es gibt eine Reihe nützlicher kleiner Programme und Tools, die einen bei der Arbeit mit Schrift und Typografie unterstützen. Sieben stellen wir Ihnen hier in Teil 2 unserer Serie »Schrift bringt’s« vor. mehr

Anzeige

Fontstand bietet Schriftlizenzen für Studenten

Hochschulen aufgepasst: Bei Fontstand können Schulen und Unis jetzt Rabattcodes für ihre Studenten erwerben. mehr

Verborgene Schätze Teil 3

Anlässlich des kommenden hundertjährigen Jubiläums des Bauhauses erweckte Adobe Schriftentwürfe aus der Vergangenheit zum Leben. Zwei Schriften – Xants und Joschmi – sind bereits erschienen, jetzt folgt die Dritte: CarlMarx von Hidetaka Yamasaki nach einem Entwurf von Carl Marx. mehr


Der folgende Beitrag wurde zuerst in PAGE 08.2014 veröffentlicht.
Autor: Bram Stein


INHALT

Wie erkennt man die Qualität von Web-Fonts und wie lassen sie sich für den eigenen Bedarf optimieren? Fonttechniker Bram Stein verrät ein paar Tricks, damit Schriften im Web gut funktionieren


Beim Einsatz von Web-Fonts empfiehlt sich zunächst ein Blick auf das Outline-Format (siehe Kas­ten unten). CFF-Outlines sind TrueType-Outlines vorzuziehen, denn Erstere werden über die verschie­denen Browser und Plattformen hinweg konsis­ten­ter gerendert. Außer natürlich, der Browser unterstützt kein CFF, wie ältere Versionen von Internet Explorer. In diesem Fall sollten Sie sich versichern, dass der Font korrekt gehintet ist. Eine Möglichkeit, dies zu beurteilen, ist, ihn mittels Internet Explorer 6 bis 8 anzuschauen. Schlecht beziehungsweise gar nicht gehintete Fonts – das trifft zum Beispiel auf zahlreiche Free Fonts zu – kann der Browser nicht sauber darstellen.

Außerdem sollten Sie kontrollieren, ob bereits ein Subsetting stattgefunden hat und welche OpenType-Features enthalten sind. Das lässt sich in ei­nem Fonteditor wie FontLab oder Glyphs erledigen oder der die Schrift begleitenden Dokumenta­tion entnehmen. Vor weiterem Subsetting sollten Sie unbedingt prüfen, ob die Lizenz das erlaubt. Einige Schriftenhäuser verbieten dies nämlich ausdrücklich. Schließlich empfiehlt sich ein Blick auf die Formate, in denen der Font vorliegt. Gute Web-Fonts sollten wenigstens TTF/OTF, EOT und WOFF umfassen. Fehlt ein benötigtes Format, sollten Sie wiederum in den Lizenzbedingungen nachschauen, ob diese das Erstellen des gewünschten Formats gestatten.

Fonts verschlanken und testen

Normalerweise enthält ein Font eine große Anzahl an Glyphen für verschiedenste Sprachen und Schrift­systeme. Für Desktop-Anwendungen, die viele Spra­chen unterstützen müssen, ist das okay, die meisten Webseiten aber nutzen eine oder zwei Sprachen und brauchen all diese Zeichen gar nicht. Eine englische Seite beispielsweise nutzt die Buchstaben a bis z in Groß und Klein, die Ziffern 0 bis 9 sowie einige Satzzeichen. Entfernt man die Outlines für alle anderen Zeichen, reduziert sich die Größe des Fontdatei signifikant. Wer nur den Namen des Unternehmens als Web-Font braucht, kann sogar so weit gehen, alle anderen als die paar benötigten Buchstaben zu löschen.

Gleiches gilt für bestimmte OpenType-Tabellen, die für Web-Fonts überflüssig sind. Beispielsweise die Kern-Tabelle. Obwohl sie sehr wichtig klingt, nutzt sie tatsächlich kein einziger Browser. Diejenigen, die Kerning unterstützen, beziehen ihre In­for­ma­tionen aus der Glyph Positioning Table, sodass man auf die Kern-Tabelle guten Gewissens verzichten kann. Viele hochwertige Fonts enthalten OpenType-Features wie Ligaturen, Small Caps oder stilistische Alternativen. Macht die Website aber keinen Gebrauch von diesen, ist es sinnvoll, auch sie zu entfernen.

Bevor Sie den neuen, reduzierten Font verwenden, sollte Sie ihn in allen vorgesehenen Browsern gründlich ausprobieren – und zwar mit eigenen Inhalt, nicht mit Blindtext. Denn gerade in Namen, Zitaten und Orten können sich Buchstaben und Zeichen verstecken, die in der Sprache der Website sonst nicht vorkommen. Ein englischer Artikel über Typedesigner könnte etwa den Namen Frank Grießhammer, mit dem im Englischen nicht vorhande­nen ß enthalten. Wer seinen Font zu aggressiv verkleinert hat, wird feststellen, dass der Browser das ß mit einem ungewünschten Fallback-Font rendert. Beim Subsetting entfernt man diese Elemente aus dem Font – sie sind nicht deaktiviert, sondern vollständig verschwunden. Will man sie wieder hinzufügen – zum Beispiel weil auf der Website jetzt doch Ligaturen zum Einsatz kommen sollen –, bleibt nichts anderes übrig, als zum Masterfont zurückzugehen und ein neues Subset zu kreieren.

Web-Fonts generieren

Wer seinen eigenen Web-Font gestalten möchte, ist mit Font Squirrels Webfont Generator gut bedient. In dem kostenlosen Programm können Sie die benötigten Ausgabeformate ebenso definieren wie die Subsetting-Optionen und die gewünschten OpenType-Features. Das Ergebnis ist eine Zipdatei mit allen benötigten CSS- und Fontfiles.

Web-Font-Services wie Typekit, Fontdeck oder Google Fonts übernehmen all diese Aufgaben und noch mehr. Sie verfolgen neue Entwicklungen hinsichtlich Fontformaten, Rendering oder Browserunterstützung und liefern darüber hinaus Tools, die simulieren, wie eine Schrift auf einem bestimmten Browser und Betriebssystem aussehen wird. Eine bequeme Möglichkeit für diejenigen, die zwar mit Web-Fonts gestalten, aber nicht zu tief in die Technik einsteigen wollen.


 

 

Qualität erkennen. Der gleiche Font unter Windows XP (ganz oben links) und Mac OS X. Darunter: Bei genauerem Blick zeigt sich, dass der Font links nicht ordentlich gehintet ist. Einige Buchstaben werden fetter dargestellt als gewünscht (w, x, e oder der i-Punkt), andere wie m oder a sind richtiggehend deformiert.

 

 

Web-Fonts erzeugen. Mit Font Squirrels Webfont Generator lassen sich eigene Web-Fonts erstellen. Unter »Custom Subsetting« kann man genau einstellen, welche Zeichen und Funktionen man braucht und welche nicht.


Zum Autor:

Bram Stein arbeitet als Fonttechniker in Adobes Typekit-Team im kalifornischen San José. Der Niederländer musste sich anstrengen, seinen Text so zu formulieren, dass auch wir ihn verstehen konnten.


Zum Thema:

Best-Practices Typografie & Type Design

Variable Fonts


 

top