Icons & Fonts Webdesign
So findest du die perfekte Schrift für dein Web-Projekt
Beitragsautor Von Felix Braden
Keine Kommentare zu So findest du die perfekte Schrift für dein Web-Projekt
Das Lesen von längeren Texten auf einem beleuchteten Monitor ist zum Alltag geworden. Web-Fonts haben sich etabliert und immer mehr Inhalte werden auf Tablets oder mobilen Endgeräten angeboten um dort gelesen zu werden. Damit wachsen die Ansprüche an Schriften, was deren Darstellungsqualität auf verschiedenen Displays betrifft. Dennoch wurden die meisten Schriften, die heute im Einsatz sind, nicht für digitales Umfeld gestaltet. Häufig werden Schriftentwürfe aus vor-digitalen Zeiten mit technischen Hilfsmitteln – wie z.B. Hinting – für die Verwendung am Bildschirm optimiert. Doch Bildschirm-Optimierung muss früher beginnen! Web Vorlagen Themes durchstöbern ↬
Ich habe hier für euch einige Charakteristika zusammengetragen, die die Lesbarkeit am Bildschirm verbessern. Wenn ihr nach einer gut gemachten Schrift für Lesetexte am Bildschirm sucht, achtet auf diese Merkmale:
Offene Punzen, großzügige Laufweite (Schriften vlnr.: Tuna, Garamond, Arial and Fira)
Punzen (engl., counters), nicht druckende Innenflächen der Buchstaben, laufen bei kleinen Schriftgrößen schnell zu und bilden dunkle Stellen im Grauwert der Schrift, die den Blick des Lesers fesseln und den Lesefluss behindern. Um die nichtdruckenden Weißflächen deutlich sichtbar zu halten und auch bei kleinen Textgrößen einen gut sichtbaren Lichteinfall zu ermöglichen sind offene Formen (engl., open aperture) und eine große x-Höhe im Verhältnis zur Oberlänge (engl., ascenders) hilfreich.
Großzügige Laufweite und breite Buchstaben
Achtet auf die Buchstabenabstände! Eng gesetzte, schmal laufende Schriften eignen sich für Überschriften und hohe Schriftgrößen, aber im Fließtext brauchen Schriften mehr Platz. Die einzelnen Zeichen müssen breiter gestaltet werden, damit der Weißraum innerhalb einer Glyphe groß genug ist. Großzügige Buchstabenabstände verhindern Kollisionen zwischen den Zeichen und deutliche Wortabstände vereinfachen das Bilden von Wortgruppierungen beim schnellen Lesen.
Individuelle Buchstabenformen (Schriften vlnr.: Tuna, Garamond, Arial and Fira)
Individuelle Buchstabenformen sind vielleicht das wichtigste Kriterium von allen! Wenn die Zeichen zu ähnlich sind, muss ein Wort mehrmals gelesen werden. Wenn das Wortbild nicht klar genug ist, nimmt das Lesen daher mehr Zeit in Anspruch, vor allem wenn es schwierige Kandidaten wie „I“ und „l“ oder „B“ und „8“ enthält. Daher muss das Design eine gewisse Formenvielfalt in den Glyphen haben ohne die Harmonie im gesamten Zeichensatz zu beeinträchtigen.
Zu viele Details verwaschen das Aussehen in Fließtextgrößen; sie stören die Grundform der Buchstaben, die zur schnellen Identifizierung wichtig ist – Klarheit verbessert das Wortbild.
Haarlinien gehen leicht verloren (Serifen-Schriften vonu.: Tuna, Garamond and Bodoni)
Geringer Kontrast und robuste Serifen
Ein gängiges Problem von Serifenschriften am Bildschirm sind dünne Linien. Haarlinien gehen bei schlechten Druckbedingungen oder Beleuchtung von hinten leicht verloren, die Buchstaben scheinen aufzubrechen und in Einzelsegmente zu zerfallen. Robusten Serifen und ein geringer Strichstärkenkontrast lösen dieses Problem. Die meisten Serifenlosen besitzen sowieso einen geringen Strichstärkenkontrast, aber auch Serifen-Schriften lassen sich so gestalten.
An das Rechteck angenäherte Kreisbögen
Die meisten Schriften, die im Druck unter schlechten Bedingungen funktionieren, machen auch eine gute Figur am Bildschirm, doch einige Kriterien sind speziell für den Bildschirm von Bedeutung und haben direkt oder indirekt mit der Abbildung auf dem Pixelraster zu tun. Je »kantiger« eine Kurve, desto besser passt sie auf das Pixelraster. Kreisbögen sollten daher so weit wie möglich an die Rechteckform angenähert werden – was zusätzlich zu einer größeren Punze führt.
Manuelle Hinting-Informationen des Buchstaben (Schriftart Tuna)
Schriften basieren auf Vektoren, müssen auf dem Bildschirm aber als Pixel dargestellt werden. Normalerweise (ohne Hints) macht der Computer diese Umrechnung automatisch ohne dass der Gestalter darauf Einfluss hat. Beim Hinting werden in der Schrift Information abgelegt die dem Computer sagen, wie die Schrift im Pixel-Raster darstellt werden soll. Mit der TrueType-Technologie lassen sich diese Instruktionen sogar einzeln für jede Pixelgröße definieren (Delta Hints).
Gerade bei kleinen Schriftgrößen und geringen Auflösungen kann damit die Lesbarkeit enorm verbessert werden. Es lohnt sich, diesen aufwändigen Prozess manuell zu erledigen und sich nicht auf das automatische Hinting der Schriftgestaltungs-Software zu verlassen.
Gerade wenn die Vektoren auf ein kleines Pixelraster umgerechnet werden müssen, ist es hilfreich, wenn horizontale und vertikale Elemente die gleiche Strichstärke haben. Weil das bei dem meisten serifenlosen Schriften der Fall ist, hält sich hartnäckig das Gerücht, dass Serifenschriften für den Bildschirm weniger geeignet sind. Doch auch viele Serifenschriften haben eine betonte horizontale Achse mit massiven waagerechten Elementen und eignen sich ebenso für den Bildschirm.
Falls du herausfinden willst, wie Alex Rütten und ich den traditionellen Breitbandfeder-Schreibstil genutzt haben, um die Lesbarkeit ihrer neuen Schrift „Tuna“ am Bildschirm zu verbessern, oder einfach nur den Webfont testen willst, schau Dir diese Microsite an: Tuna Typeface.
Von Felix Braden
Felix lebt und arbeitet als Schriftgestalter und Art Director in Köln, Deutschland. Auf seiner Internetseite Floodfonts bietet er viele Schriften zum kostenlosen Download an. Seine kommerziellen Schriften werden von Fontshop International, URW++ und Volcanotype vertrieben und sind über MyFonts erhältlich. Seine bisher erfolgreichste Schrift FF Scuba war 2013 einer der Gewinner des Communication Arts' Typography Annual und wurde in verschiedenen Bestenlisten ausgezeichnet.
Archiv anzeigen →
← Best of 2016: 100 kostenlose Sketch-Ressourcen → Abmahnungen: das musst du für deinen Shop beachten