Typografie im Web – Welche Schriftarten passen zu meiner Website?


Die Bedeutung von Typografie im Web wird leider viel zu oft unterschätzt. Häufig kommt es vor, dass unerfahrene Webentwickler aus Bequemlichkeit auf Standardfonts wie Arial oder Helvetica zurückgreifen. Diese sind zwar universell einsetzbar werden aber schnell langweilig, was negative Auswirkungen auf das Nutzererlebnis der Website haben kann. Daher macht es Sinn sich für individuellere Schriften zu entscheiden, welche einerseits den Inhalt der Seite unterstützen und zudem den Wiedererkennungswert steigern. Für die Schriftauswahl ist beispielsweise Google Webfonts zu empfehlen, wo die Fontsuche durch Filter für Schriftkategorie und Schriftauszeichnung erleichtert wird. Dennoch steht man nun vor einer Auswahl von mehreren hundert Schriften. Um langwieriges Experimentieren zu vermeiden können bei der Wahl der richtigen Font einige Grundregeln helfen:

  1. Das höchste Gebot ist natürlich die Lesbarkeit. Besonders bei Fließtext sind klare Schriften mit wenig Schnörkeln zu empfehlen damit das Leseerlebnis nicht zur Tortur wird.
  2. Man sollte sich auf die Auswahl von zwei oder drei verschiedenen Schriftarten pro Webprojekt beschränken. So kann eine Font für Überschriften und eine weitere für Fließtext genutzt werden, manchmal ist es sinnvoll noch eine dritte Schrift für Subheadlines oder Hervorhebungen einzuführen. Doch bevor man den Leser mit zu vielen Schriftarten verwirrt sollte man bei der Textstrukturierung lieber auf unterschiedliche Schriftgrößen und Auszeichnungen setzen.
  3. Die Verwendung von mehreren Schriften, welche sich ähneln sollte vermieden werden. Stattdessen empfiehlt es sich auf Kontraste zu setzen also beispielsweise eine serifenlose Schrift und eine Serif-Font zu kombinieren. So wird die Struktur des Inhalts klarer.
  4. Dekorative, besonders ausgefallene Schriften sollten sparsam eingesetzt werden damit sie ihre besondere Wirkung nicht verlieren, zum Beispiel nur beim Logo oder den Hauptüberschriften.

Bildformate im Web: PNG, GIF und JPG


Das moderne Web stellt die unterschiedlichsten Anforderungen an die Formate von Bildern, Fotos und Grafiken. Einerseits sollte bei möglichst hoher Qualität die Dateigröße gering gehalten werden, um lange Ladezeiten zu vermeiden. Andererseits sind oft spezielle Eigenschaften wie Transparenz oder die Möglichkeit der Animation gefordert. Im Folgenden werden die drei geläufigsten Bildformate mit ihren Vor- und Nachteilen kurz vorgestellt.

GIF (Graphics Interchange Format)

Gif-Bilder lassen sich ohne Qualitätsverlust komprimieren, allerdings ist die Anzahl der Farben pro Bild auf 256 begrenzt. Weist eine Grafik mehr Farben auf, werden die weniger häufigen Farbtöne durch die nächstliegenden der 256 häufigsten Farben ersetzt. Aufgrund dieser Farbbeschränkung kann die Dateigröße von GIFs verhältnismäßig niedrig gehalten werden. Ein weiterer Vorteil besteht darin, dass GIF im Gegensatz zu JPEG Transparenz zulässt. Diese ist jedoch nur auf eine einzelne Farbe beschränkt, sodass semitransparente Bereiche nicht möglich sind.

GIF-Grafiken lassen sich animieren, allerdings ist diese Anwendung nur bei kleineren, simplen Grafiken zu empfehlen, da Animationen im modernen Webdesign durch effektivere Methoden umgesetzt werden können.

JPEG / JPG (Joint Photographic Experts Group)

Das Format JPEG ermöglicht trotz verlustbehafteter Kompression qualitativ ansprechende Bilder, wobei Qualität und Dateigröße beim Speichervorgang beeinflussbar sind. Im Vergleich zu GIF lässt JPEG wesentlich mehr Farben zu und eignet sich damit besonders gut für hochauflösende Fotos. Da JPEGs jedoch bei hoher Qualität viel Speicherplatz in Anspruch nehmen und bei zu starker Kompression unschöne Artefakte entstehen können, müssen bei der Anwendung Kompromisse eingegangen werden. Zudem unterstützt das JPEG-Format weder Transparenz noch Animation.

PNG (Portable Network Graphics)

Bei der Entwicklung von PNG setzte man sich zum Ziel die Vorteile von GIF und JPEG in einem Format zu vereinen. Entsprechend lassen sich PNG-Grafiken verlustfrei komprimieren und unterstützen Farbtiefen von bis zu 48 Bit pro Pixel. Hinsichtlich der Transparenz lässt PNG bis zu 256 Abstufungen zu, deren Auslastung allerdings zu hohen Dateigrößen führen kann. Gleichermaßen nehmen PNG-Bilder bei hoher Auflösung schnell unverhältnismäßig viel Speicherplatz in Anspruch.

Die hohe Flexibilität macht PNG zu einem geeigneten Format für unterschiedliche Typen von Grafiken und Bildern. Besonders bei Designelementen wie Buttons oder Icons, welche teilweise transparent sein müssen, ist die Speicherung als PNG zu empfehlen.

FAZIT: Jedes Bildformat besitzt seine individuellen Vorzüge und Mängel, sodass die Wahl des Formates immer in Abstimmung mit der Art der Anwendung vorgenommen werden sollte. So eignet sich GIF am besten für kleinere Schaubilder oder Animationen, JPEG für hochauflösende Fotos und PNG für designstützende Grafiken.

Look and Feel im Webdesign: Der erste Eindruck zählt


Die Begrifflichkeit „Look and Feel“ wird oft eingesetzt, um den bei erstmaliger Betrachtung einer Webseite entstehenden Wahrnehmungseindruck zu beschreiben. Dieser erste Eindruck bestimmt, ob ein Besucher den Entschluss fasst, sich näher mit den dargestellten Inhalten zu befassen oder nicht und ist somit maßgeblich für den Erfolg eines jeden Webauftritts.

Die Wirkung des Gesamtlayouts auf den Besucher wird dabei durch einige Faktoren beeinflusst:

  • Anordnung der einzelnen Elemente
  • Farbgestaltung
  • Typografie
  • Relation zwischen genutzter und freier Fläche
  • inhaltsunterstützende Grafiken

Wichtig ist dabei, dass der entsprechende Themenbereich angemessen repräsentiert wird, sodass sich Besucher mit der Webseite identifizieren können. Darum ist es von nicht zu unterschätzender Bedeutung vorab eine Analyse der Zielgruppe durchzuführen und anschließend die Gestaltung auf diese abzustimmen. So muss beispielsweise die Website einer Werbeagentur ganz andere Kriterien erfüllen, als die eines Fußballvereins. Dabei spielt nicht nur die Auswahl der Grafiken eine Rolle, sondern ebenso die farbliche, typografische und kompositorische Ausgestaltung. Diese bestimmt schließlich, ob eine Website schlicht und minimalistisch, lebendig und verspielt oder ausgeglichen wirkt.

Darum sollte man sich schon vor der Entwurfsphase darüber im Klaren werden, welche Richtung des Designstils man anstreben möchte. Beabsichtigt man z.B. ein eher minimalistisches Design zu realisieren, um einen möglichst seriösen Eindruck zu hinterlassen, empfiehlt es sich die Farbauswahl auf 2-3 Farben und deren Abstufungen zu beschränken. Soll das Design trendy sein und beispielsweise eine jüngere Zielgruppe ansprechen, kann auch mit vielen Farben gearbeitet werden. Dabei ist darauf zu achten, dass das Design nicht vom Inhalt ablenkt und diesen trotzdem noch anschaulich darstellt. Auch mit der Anordnung von Texten, Grafiken und Interaktionselementen kann die Wahrnehmung des Besuchers beeinflusst werden. Richtet man alle Bestandteile des Webdesigns an einem strengen Raster aus, wirkt das Design nüchtern und klar strukturiert, kann dabei aber auch schnell langweilig und eintönig aussehen. Darum ist es manchmal empfehlenswert akzentartig einzelne Elemente wie Grafiken aus dem Raster herausfallen zu lassen, um dem Design mehr Spannung zu verleihen. Übertreibt man hierbei jedoch, ist kein Raster mehr erkennbar und das Design wirkt schnell chaotisch und eine optimale Usability ist nicht mehr gewährleistet.

Die Möglichkeiten, die sich bei der Gestaltung eines Screendesigns auftun, sind endlos, allerdings sind neben den ästhetischen auch immer die funktionalen Aspekte zu berücksichtigen. Zudem sollte nach der Wahl der Stilrichtung diese dann auch konsequent verfolgt werden, damit beim Besucher ein stimmiger Gesamteindruck entsteht.