Typografie im Responsive Webdesign - Teil 1: Grundlagen
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.
Wissenswertes zur Typografie
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.
Typografie in digitalen Medien und im Internet
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).
Schrift im Responsive Webdesign
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:
- Die Schriftgröße muss nicht nur zur Displaygröße passen, sondern auch auf die durchschnittliche Distanz zum Display abgestimmt sein. Bei Smartphones ist der Bildschirmabstand des Nutzers beispielsweise geringer als bei externen Monitoren eines Desktop-PCs.
- Die Schriftgröße ist zudem abhängig von der Bildschirmauflösung.
- Der Zeilenabstand sollte stets an den Bildausschnitt angepasst sein – der für gute Lesbarkeit notwendige Zeilenabstand hängt unter anderem mit der Zeilenlänge zusammen.
- Das Seitenlayout benötigt ausreichend typografische Freiräume (unbeschriebene Flächen des Hintergrunds). Dies kommt ebenfalls der Leserlichkeit eines Textes zugute.
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.
Auf Responsive Webdesign reagieren und die Schrift anpassen
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.
Ähnliche Artikel
Typografie im Responsive Webdesign - Teil 2: Geeignete Schriftarten
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…
Typografie im Responsive Webdesign - Teil 3: Technische Umsetzung mit CSS
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…
Webfonts: Mit Kreativität zu schöneren Websites
Web Safe Fonts bezeichnen Schriftarten, deren Verwendung im Web problemlos möglich ist. Schlüsselfaktor ist hierbei die Frage, ob die jeweiligen Fonts von möglichst vielen Browsern richtig dargestellt werden können. Warum die Zahl an websicheren Schriften stetig wächst und warum Webfonts eine wichtige Rolle für den Erfolg von Unternehmen im Netz spielen, verraten wir hier.
User-Centered Design: Erfolgreiche Produkte im Dialog mit den Nutzern entwickeln
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.
Was bedeutet Responsive Design?
Moderne Websites werden von einer Vielzahl ganz unterschiedlicher Geräte aufgerufen: Vom Handy mit kleinem Bildschirm bis zum hochauflösenden 4K-Profirechner ist alles dabei. Um diese Bandbreite an Ausgabemedien zu bedienen kommt das responsive Webdesign zum Einsatz. Layout, Typografie, Bilder und Navigation werden dabei so gestaltet, dass sie sich an das jeweils vorhandene Gerät anpassen.
