Die richtige Anwendung von Schriftarten spielt im Webdesign inzwischen eine große Rolle – das gilt auch fürs Responsive Webdesign, bei dem die Schrift ebenfalls einen starken Einfluss auf die Wahrnehmung einer Website hat. In unserer dreiteiligen Reihe informieren wir Sie über responsive Typografie im Web, erläutern, wie Sie diese in Ihre Website einbinden, und nennen einige Quellen für reaktionsfähige Webfonts. Zunächst geht es aber grundsätzlich um Typografie und Schrift im Responsive Webdesign.
Ursprünglich bezeichnete Typografie das Handwerk des Druckens von Texten mit beweglichen Lettern, den sogenannten Typen. Der Begriff ist historisch gesehen eng mit der Entwicklung der Schrift und ihrer technischen Reproduzierbarkeit durch die Druckerpresse verknüpft. Mittlerweile ist die Bezeichnung sehr viel weiter gefasst: Unter Typografie versteht man die Gestaltung von Schriften und deren Anwendung im weitesten Sinne – auch der digitalen Schrift, wie sie auf Websites oder in Computerprogrammen verwendet wird.
Es wird zwischen Mikro- und Makrotypografie unterschieden. Unter dem Begriff Mikrotypografie subsumiert man die Ausgestaltung der Schriftart als solcher sowie die Zeichen- und Wortabstände. Demgegenüber umfasst Makrotypografie alle Merkmale der Gestaltung einer gedruckten oder digitalen Textseite: Seitenformat, Satzspiegel, Schriftgröße, Zeilenabstände, -anzahl und -breite sowie die Platzierung anderer grafischer Elemente (z. B. Bilder) sind Bestandteile der Makrotypografie.
Der Begriff Font bezeichnet einen digitalen Zeichensatz, also eine bestimmte Computerschrift. Die Gestaltung einer Schrift innerhalb digitaler Textdokumente und im Web nennt man Webtypografie. Diese orientiert sich grundsätzlich an der klassischen Typografie – auch bei der Webtypografie hängt die Leserlichkeit unter anderem von der Schriftgröße, Zeilenlänge und dem Zeilenabstand ab. Darüber hinaus sind bei Internetschriften die Dateiformate und die Darstellungstechnik der Fonts zu berücksichtigen.
Die Anwendung verschiedener Schriftarten im Web hat sich im Laufe der Zeit stark geändert. Früher war die Darstellbarkeit von Schriftarten in einem Browser deutlich begrenzt – nur wenige Schriften wie Times New Roman oder Arial galten als universell kompatibel, da sie auf den meisten Computern installiert waren und für eine Website abgerufen werden konnten. Inzwischen werden ganz unterschiedliche Schriften in Form von Webfonts genutzt. Webfonts sind Schriftarten, die der Rechner per CSS zusammen mit der anzuzeigenden Website aus dem Netz lädt. Egal ob Webfonts oder lokal installierte Fonts: Bei den Schriften, die heute zum Einsatz kommen, handelt es sich fast ausschließlich um Vektorfonts, die in jeder Vergrößerungsstufe gleich gut aussehen und im Browser über eine Pixelmatrix dargestellt werden. Die gängigsten Formate für Vektorfonts sind TrueType (TTF) und OpenType (OTF).
Die Webtypografie hat sich bereits enorm weiterentwickelt, allerdings stellt das responsive bzw. reaktionsfähige Design von Internetauftritten Webdesigner vor neue Herausforderungen. Responsive Webdesign ist eine heute verbreitete Webdesign-Technik, bei der die Darstellung des Bildausschnitts einer Webseite sich an das verwendete Gerät und die Größe des Bildschirms anpasst. Auf dem Display eines Smartphones wird eine Homepage anders abgebildet als auf dem eines Tablets, Laptops oder Desktop-Computers. Die Anpassung aller Seiteninhalte an die jeweilige Bildschirmgröße betrifft dabei natürlich auch die Schrift – auch sie sollte sich in den Bildausschnitt sinnvoll eingliedern. Das bedeutet, dass auch das Schriftbild anpassungsfähig sein muss. Die Größe der Schrift und die Zeilenumbrüche des Textes passen sich im Optimalfall an jeden beliebigen Ausschnitt an. Und es gibt noch einige weitere Faktoren, die man bei der Webtypografie berücksichtigen muss:
Weiterhin sollte bei der Darstellung auf kleinen Bildschirmen die Schriftfarbe ein wenig greller und der Kontrast etwas stärker als bei einem PC-Monitor sein. Im Gegensatz zu großen Displays nutzt man die kompakteren Bildschirme mobiler Geräte nicht nur innerhalb abgeschlossener Räume, sondern auch viel unterwegs. Somit lassen sich die Lichtverhältnisse kaum beeinflussen. Schrift sollte auf kleinen Displays aber auch bei starker Hellig- oder Dunkelheit und bei Spiegelungen noch leserlich sein, was über ein satteres Schriftbild erreicht wird.
Um im Responsive Webdesign die Schrift auf allen Endgeräten bestmöglich abzubilden, werden Vektorfonts eingesetzt. Vektorfonts sind frei skalierbar und verlieren auch bei einer Vergrößerung der Schrift nicht an Qualität. Das unterscheidet sie von Bitmap-Fonts, die allein auf Basis von Punkten (Pixeln) dargestellt werden.
Allerdings können Vektorschriften – genau wie alle anderen Vektorgrafiken – ohne eine Umwandlung des Formats nicht auf Computerbildschirmen dargestellt werden, da diese nur für Rastergrafiken geeignet sind. Deswegen durchlaufen Vektoren im Vorfeld eine Rasterung, wodurch Vektorfonts letztlich also auch als Raster- bzw. Pixelgrafik auf den Bildschirm gelangen.
Mithilfe von Vektorfonts können Sie die Leserlichkeit einer Schriftart auch im Responsive Webdesign stets gewährleisten. Um das Schriftbild individuell zu gestalten und nicht von den wenigen Fonts abhängig zu sein, die auf den meisten Geräten vorinstalliert sind, können Sie Schriftarten per CSS in die Seite einbinden. Welche geeignete Schriftarten es bereits gibt und wie sie solche reaktionsfähigen Webfonts auf Ihrer Internetpräsenz einbinden, zeigen wir Ihnen in Teil zwei und drei unseres Mehrteilers zum Thema Typografie im Responsive Webdesign.
Die Typografie war für Webdesigner lange Zeit eine eher uninteressante Angelegenheit. Heutzutage sieht die Lage dank diverser technologischer Fortschritte gänzlich anders aus: Mit kreativen Webfonts setzen Sie auf einfache Art und Weise Highlights, ohne dass die Benutzer die jeweiligen Schriftarten auf ihren Geräten installiert haben müssen. Bei der Suche nach den geeigneten Webfonts gilt es...
Im Responsive Webdesign ist die Typografie ein häufig vernachlässigtes Feld, obwohl die Gestaltung einer anpassungsfähigen Schrift kein Expertengeheimnis ist. Wie lässt sich diese realisieren? Und welche Webfonts taugen für ein responsives Schriftbild? Wir geben Ihnen einen Einblick in die technische Umsetzung reaktionsfähiger Webtypografie und wie Sie diese über CSS in Ihren Webauftritt...
Die Auswahl an Webschriften hat sich mit der Einführung von Webfonts gewaltig erhöht. Viele dieser Schriftarten lassen sich kostenlos herunterladen. Dank ihrer Anpassungsfähigkeit eignen sie sich perfekt fürs Responsive Webdesign – die Schrift Ihrer Webseiten passt sich den Anforderungen der Endgeräte an. Verschiedene Internet-Plattformen bieten reaktionsfähige Webfonts an, die Sie schon mit...
Die Entwicklung neuer digitaler Produkte kann zur teuren Investition werden. Wie lässt sich im Vorfeld abschätzen, ob sich die Mühe lohnt? Beziehen Sie Ihre Nutzer mit in die Produktentwicklung ein. User-Centered Design nennt sich dieser Ansatz, von dem Unternehmen und Kunden gleichermaßen profitieren.
Schnell, sicher und State-of-the-Art – nutzen Sie unsere starke Plattform für Ihre Kunden
