Dan Rhatigan über Web-Fonts

In unserem Webinar Expertentipps für die Auswahl von Web-Fonts (unten) zeigte uns Schriftgestalter Dan Rhatigan, wie schlecht Bildschirme manchmal Schrift darstellen. Auch gab er praktische Tipps zur smarten Auswahl von Web-Fonts – von Größe und Laufweite bis hin zu Farben und Stilen – und ging auf Fragen zu der Auswahl von Web-Fonts, nützlichen Tools zum Testen von Fonts vor dem Kauf und zum Integrieren von Schriftarten ein. Hier haben wir die Antworten zusammengestellt.

Welche Farben empfiehlst Du für Fließtexte?

Bei längeren Textpassagen, die ohne Ablenkung genau gelesen werden sollen, funktioniert schwarzer Text auf weißem Hintergrund am besten. Bei der Rendering-Umgebung geht es im Wesentlichen darum, schwarzen Text so klar wie möglich auf Bildschirmen darzustellen. Ich kenne viele Beispiele, bei denen Dunkelgrau auf Weiß gut funktioniert – nämlich aus dem gleichen Grund, warum Schwarz auf Weiß gut lesbar ist. Im Prinzip gilt: Je höher der Kontrast, desto besser die Lesbarkeit. Man kann statt einem Tiefschwarz auch ein Dunkelgrau wählen, ohne viel an Wirkung einzubüßen. Doch bei längeren Textpassagen wird es etwas schwieriger. Bei kürzeren einzelnen Absätzen haben Sie mehr Spielraum bei kontrastärmeren Kombinationen.

Sind kursive Schnitte bei Web-Fonts extra so gestaltet, dass mehr weiße Fläche zwischen den Buchstaben entsteht, damit die Zeichen auf dem Bildschirm nicht zu stark ineinander laufen?

Das gilt nur für Fonts, die eigens für das Internet gestaltet wurden. Nur weil ein Font als „Web-Font“ bezeichnet wird, heißt das nicht, dass er für eine gute Darstellung von Websites entworfen wurde. Es bedeutet nur, dass die Desktop-Version für die Bereitstellung im Internet vorbereitet wurde. Alles, was der Begriff „Web-Font“ garantiert, ist die Tatsache, dass die Font-Daten so verpackt sind, dass der Browser sie anzeigen kann. Vielleicht wurden sie noch für den Bildschirm optimiert, also per Software „nachgeschärft“.

Wenn wir uns etwa die ITC Galliard® italic ansehen, zeigt sich, dass es sich um einen Web-Font handelt. Doch verglichen mit der ITC Galliard® eText italic [oben] sieht man sofort, dass die eText italic neu gestaltet wurde, um offener und klarer zu wirken. Sie sollten also nicht nur darauf achten, welche Schnitte eine Schriftfamilie bietet, sondern genau hinsehen und beurteilen, ob sich ein kursiver Schriftschnitt vom Design her für das eignet, was Sie online darstellen möchten. Die PMN Caecilia® eText ist ein weiterer toller Screen-Font, der fürs Internet gestaltet wurde. Es handelt sich um eine Egyptienne, eine serifenbetonte Linear-Antiqua mit wenig Kontrast, die kursiv nicht zwangsläufig enger wirkt, doch dank der Serifen gut lesbar bleibt.

Wie kann man feststellen, ob ein Font für das Internet neu gestaltet wurde?

Wenn sich ein Hersteller die Mühe gemacht hat, eine Schriftart zu entwerfen oder zu überarbeiten, damit diese auf dem Bildschirm gut lesbar ist, wird er das stolz an die große Glocke hängen. Es ist ein wichtiges Qualitätsmerkmal und ein Verkaufsargument für Schriftdesigns, und daraus machen die Hersteller kein Geheimnis. Für Monotype-Fonts gilt: Wenn „eText“ im Namen vorkommt, haben wir die Schrift gänzlich neu gezeichnet, damit diese in den verschiedenen Textgrößen im Internet groß, massiv und klar dargestellt wird. Hoefler & Co. hat seine ScreenSmart-Kollektion, und das Font Bureau hat die Reading Edge-Serie.

Was ist mit vollkommen neuen Schriften, die es zuvor gar nicht als Desktop-Fonts gegeben hat? Können wir davon ausgehen, dass es sich um qualitativ hochwertige Web-Fonts handelt, die für den Bildschirm optimiert wurden?

Nicht unbedingt, denn Designer entwerfen Schriften für unterschiedliche Zwecke. Deshalb sollten Sie Folgendes beachten:

  • Sehen Sie sich die hier gezeigten Beispiele an, damit Sie Ihren Blick schulen können. Das ist der beste Test, um festzustellen, ob etwas gut lesbar ist oder nicht. Vertrauen Sie auf Ihre Augen und
  • testen Sie Ihre Web-Fonts im Browser. Dann wissen Sie, ob eine Schrift gut umgesetzt wird, zum Umfeld und Design passt und ob das eine gute Wahl ist.

Welche Tools empfehlen Sie für die Vorschau von Web-Fonts in unterschiedlichen Größen auf dem Bildschirm, um diese vor dem Kauf zu testen?

Sehen Sie sich einmal das von uns angebotene Tool Typecast™ an. Es handelt sich dabei um ein browserbasiertes Webdesign-Tool, das alle Web-Font-Bibliotheken von Monotype, Fonts.com und MyFonts und einigen anderen Anbietern umfasst. Man kann sich kostenlos dafür anmelden und die Schriftarten in einer Vorschau anzeigen, diese einstellen, skalieren und sogar Prototypen von echten Internet-Seiten damit gestalten. So kann man Schriftarten im Browser darstellen und genau einschätzen, wie diese wirken, anstatt nur mit Photoshop-Dateien zu arbeiten.

Was ist besser: die Einbettung von Fonts mithilfe von @font-face oder die Einbindung der Bibliothek über Javascript?

Die Verwendung eines Kits ist normalerweise gegenüber @font-face zu bevorzugen. Es gibt dazu einen ziemlich guten Blog-Beitrag von Typekit. Die Verwendung von Javascript/Kits hat viele Vorteile:

  • Mit Javascript können Sie feststellen, was auf der Seite passiert. Wurde der Font schon geladen? Nein? Okay. Dann fügt man eine Klasse hinzu, damit im FOUT-Fall Fallback-Stile zur Anwendung kommen.
  • Wenn man ein Kit verwendet, muss man sich über unterschiedliche Browser keine Gedanken machen. Verschiedene Browser unterstützen nur bestimmte Font-Dateitypen. Das Kit stellt für Sie fest, welches geladen werden soll, so dass Sie nicht mehrere Fallback-Dateien in Ihren @font-face-Regeln festlegen müssen.
  • Generell werden Fonts, die aus Anbieter-Kits stammen, auf einem superschnellen CDN gehostet und Sie müssen diese nicht selbst hosten (was bei Verwendung von @font-face normal wäre). Einige Anbieter integrieren die Font-Rohdaten im CSS und verringern damit die HTTP-Anfragen, was die Performance verbessert.
  • Wenn Sie ein Kit von einem Anbieter verwenden, können Sie sich außerdem darauf verlassen, dass Ihre Fonts ordnungsgemäß lizenziert sind. Der offensichtliche Nachteil bei Javascript liegt gegenüber @font-face darin, dass ein Benutzer Javascript möglicherweise in seinem Browser deaktiviert hat und der Font daher nicht geladen wird. Die Wahrscheinlichkeit ist allerdings sehr gering, denn erstens ist JavaScript heute eine solch integrale Technologie im Internet und zweitens wird bei deaktiviertem Javascript das Browser-Erlebnis des Benutzers wahrscheinlich so stark beeinträchtigt sein, dass nicht geladene Fonts das kleinste Problem darstellen.

Welchen Web-Font würden Sie für längere Inhalte wie etwa eine umfangreiche Umfrage empfehlen? Helvetica®?

Eine Vielzahl von unterschiedlichen Schriftarten sind möglich. Doch in dieser Situation wollen Sie die Lesbarkeit dieser relativ kleinen Texte optimieren und benötigen eine Schriftart, bei der man ganz einfach zwischen bestimmten Zeichen unterscheiden kann, wie etwa dem Großbuchstaben „I“, dem Kleinbuchstaben „l“ und der Ziffer „1“.

Helvetica® ist eine gute Wahl, doch die kleinen Verbesserungen, die die Neue Helvetica® eText aufweist, sorgen für ein wesentlich klareres Schriftbild. Hier ist die Lesbarkeit also in hohem Maße gegeben. Allerdings kann die Unterscheidung der genannten Zeichen schwierig sein. Dieses Problem haben viele Sans-Serif-Schriften.

Wenn Sie sich mehr Persönlichkeit wünschen, erleichtern gute, klare Sans-Serifen-Schriften mit Details wie einem zweistöckigen „A“ und einem zweistöckigen „G“ die Unterscheidung der Buchstaben und tragen wirklich zur Lesbarkeit bei.

Sie haben in Ihrer Präsentation eine Überlagerung zweier Web-Fonts gezeigt [siehe oben]. Wurden diese in der gleichen Größe gesetzt?

Ja, die Font-Größe ist identisch. Die zweite Zeile hat lediglich eine Zeilenhöhe von Null, was eine Überlappung verursacht. Doch das zeigt nur, wie unterschiedlich die Textgröße je nach Gestaltung einer Schrift wirken kann. Die eine Schrift wirkt bei 16 px größer oder kleiner als eine andere Schrift in 16 px. Die Proportionen des Designs wirken sich stark darauf aus, wie die Größe herüberkommt.

Welche Web-Fonts funktionieren im Internet immer gut?

Gute Lösungen setzen sich immer durch. Daher denke ich, dass die Bestseller-Listen auf MyFonts, Fonts.com oder die Fontlisten auf FontShop.com und Listen auf anderen Portalen gute Ausgangspunkte sind. Tendenziell werden Sie viele großzügig proportionierte Sans-Serif-Schriften mit geringem Kontrast finden, wie etwa Helvetica®, Frutiger®, Museo Sans™ und Brandon Grotesque. Generell sind klare und offenere Schriften für Bildschirmtext am besten geeignet.

Manchmal lässt sich die Kluft zwischen Designer und Programmierer nicht leicht überbrücken. Wie kann ein Web-Designer einem Programmierer den gewünschten Zeilen- oder Zeichenabstand am besten vermitteln?

Auch da hilft Typecast: Damit können Sie mit wahrscheinlich recht vertrauten visuellen Frontend-Funktionen Prototypen Ihrer Seiten im Browser erstellen. Sie designen nach Augenmaß, doch im Hintergrund werden CSS und HTML für Sie geschrieben. Wenn Ihr Layout dann Ihren Vorstellungen entspricht, können Sie den HTML-Code und das CSS für die Entwickler generieren, wodurch diese genaue Angaben zu allen Ihren Design-Entscheidungen erhalten.

Dadurch müssen die Entwickler nicht mehr Ihre Photoshop-Layouts interpretieren und rätseln, ob ein bestimmter Text nun diese oder eine andere Größe haben soll, ob es sich um dieselbe Schrift oder eine geringfügig andere handelt oder ob beispielsweise die Zeilenlänge 480 px oder 500 px entspricht. Ich war schon bei vielen Präsentationen von Agenturen und Verlagen dabei, wo wir mit gemischten Teams aus Designern und Entwicklern über genau diese Frage gesprochen und Typecast vorgestellt haben.

Teams, die tagein tagaus mit solchen Problemen konfrontiert sind, wissen dieses Tool wirklich zu schätzen. Sie freuen sich, dass Designer damit stärker visuell arbeiten können und zugleich Designs in einer Form abliefern, die gestalterische Entscheidungen in einer für Entwickler verständlichen CSS-Syntax beschreibt. Dadurch sind weniger Revisionen nach der Übergabe notwendig, und Design- und Entwicklungsprozesse wachsen enger zusammen.

Was eignet sich besser für das Internet: Serifenschriften oder Sans-Serif-Schriften?

Ich halte Serifenschriften für das Internet und die Bildschirmdarstellung für problematisch, da sie vom Design her mehr Details aufweisen. Dabei denke ich wieder an eine Textgröße im Bereich 1em/12 px–16 px.

Wenn Sie sich für Serifen entscheiden, sind kontrastärmere Schriften mit klaren Details zu bevorzugen – wie etwa die Century®, PMN Caecilia®, Clarendon® oder Georgia® mit ihren geraden Linien und scharfen Winkeln an den Serifen. Sie sind nicht zu überladen oder zu zierlich. Wenig empfehlenswert sind Schriftarten mit zu dünnen Linien wie etwa Didot®, was insbesondere bei Fließtext ein Problem darstellen kann.

Sehen Sie sich unser Webinar Expertentipps für die Auswahl von Web-Fonts (E) an, um Ihr Know-how zu vertiefen.

Geben Sie Ihren Websites einen Schub mit Webfonts.

Das Internet ist ein schnelllebiger Ort. Für Marken war es nicht leicht, sich mit „websicheren“ Fonts und langsam ladenden, verpixelten „Schriftbildern“ von der Masse abzuheben. Webfonts sorgen dafür, dass Ihre Marke auch online laut und klar kommuniziert und Ihre Webseiten und digitalen Plattformen sich harmonisch in Ihren Print-Auftritt einfügen.

Schnell ladende Inhalte mit echtem Text, der in jeder Größe und Auflösung klar zu erkennen ist, vermitteln den Kunden Ihre unverwechselbare Botschaft … sogar in dynamischen Seitenelementen wie Formularen und Suchfeldern. Für Marken mit Persönlichkeit sind Webfonts unverzichtbar.