So wirken sich Schriftarten auf deine Besucher aus

Webdesign ist wichtig, um sicherzustellen, dass eine Website eine gute Benutzererfahrung bietet und jeder Aspekt davon kann einen großen Einfluss auf die Benutzerfreundlichkeit einer Website haben. Einer dieser Aspekte, die Typografie, ist ein oft übersehener, aber integraler Bestandteil des Designs und etwas, das du beim Webdesign nicht übersehen solltest.

Denk nur an all die verschiedenen Verwendungsmöglichkeiten von Typografie im Web, von großen Überschriften und fetten Textblöcken bis hin zu kleinerem Text im Fließtext, und du wirst erkennen, dass sie nicht nur ein entscheidender Teil eines Webdesigns ist, sondern dass es sich um eine Kombination aus Kunst und Wissenschaft handelt.

Seit den Anfängen des Internets ist viel Zeit vergangen, aber die Verwendung von Typografie ist heute genauso wichtig wie damals.

Ein grundlegender Blick auf die Typografie im Webdesign

Typografie ist die Verwendung von Schrift in einem Design. Typografie zielt darauf ab, durch eine durchdachte und bewusste Auswahl von Schriftart, Größe, Farbe, Layout, Ausrichtung und anderen Faktoren, die das Design der Schrift auf einer Seite beeinflussen, eine größere Bedeutung zu schaffen.

Es gibt zwei Hauptkategorien von Schriftarten: serifenbetonte und serifenlose Schriften.

  • Serifenschriften haben Serifen oder zusätzliche Verzierungen am Ende der Striche; manche nennen sie Füße oder Schweife.
  • Serifenlose Schriften haben keine Serifen; es befinden sich keine zusätzlichen Details am Ende jedes Buchstabens.

Typografie im Web – das gilt es zu beachten

Es gibt viele Unterschiede im Umgang mit Schrift im Druck und im Web. Dinge, die bei Text im Web zu beachten sind, sind Kontrast, Farbe, Lesbarkeit und Größe.

Farben auf einem Bildschirm werden durch Licht erzeugt, und es ist wichtiger, über den Kontrast nachzudenken, da es anstrengend ist, Text mit schlechtem Kontrast zu betrachten und zu lesen. Schwarzer Text auf weißem Hintergrund ist am einfachsten zu lesen, da er den größten Kontrast bietet. Farbtheorie und Farbwahl spielen eine wichtige Rolle in der Web-Typografie.

Es hat sich gezeigt, dass serifenlose Schriften in Fließtexten online leichter zu lesen sind, da Serifen es dem Auge schwerer machen, dem Text zu folgen, während bei gedrucktem Text das Gegenteil der Fall ist.

Obwohl serifenlose Schriften in einer größeren Größe und mit mehr Zeilenabstand – dem zusätzlichen vertikalen Abstand zwischen den Zeilen – verwendet werden, eignen sie sich dennoch gut für Fließtext im Internet. Serifen eignen sich hervorragend für Überschriften und Titel, da sie der Überschrift einen besonderen Akzent verleihen und weil Serifenschriften bei kleineren Textmengen gut lesbar sind.

Die Größe ist ein wichtiger Faktor, den du bei der Auswahl deiner Schriftarten berücksichtigen solltest. Zu kleiner Text ist schwer zu lesen, aber zu großer Text nimmt zu viel Platz ein. Finde eine Größe, die gut zum Design passt und leicht zu lesen ist.

Kontrolle über die Schriftarten übernehmen

Es gibt viele Einstellungen, die das Erscheinungsbild der Schrift auf einer Webseite steuern. Die Schriftgröße ist, wie bereits erwähnt, sicherlich wichtig. Die drei gängigsten Maßeinheiten sind: em, Prozent (%) und Pixel (px).

Em ist eine weit verbreitete Form der typografischen Messung für Webdesigns, da sie gut skaliert und feinere Größenabstufungen ermöglicht (z. B. 1,35em).

Pixel werden relativ zur Bildschirmauflösung gemessen und geben dir etwas weniger Kontrolle, da du nur ganze Zahlen verwenden kannst (z. B. 2px).

Viele Leute mögen die Verwendung von Prozentwerten für Schriftgrößen, weil sie dem Benutzer die Kontrolle über die Schriftgröße geben. Die Größe wird durch die Schriftgrößeneinstellungen des Browsers bestimmt.

Kerning und Leading können ebenfalls mit CSS gesteuert werden. Kerning ist der Abstand zwischen den Zeichen und kann mit der Eigenschaft letter-spacing gesteuert werden. Der Zeilenabstand kann mit der CSS-Eigenschaft “line-height” gesteuert werden. Beides sind großartige Möglichkeiten, um das Aussehen deines Textes zu steuern.

Andere mögliche und weniger beliebte Maßeinheiten sind:

  • Punkte (pt)
  • Pica (pc)
  • Zoll (in)
  • Zentimeter (cm)
  • Millimeter (mm)
  • x Leerzeichen (ex)

Die Verwendung von pt eignet sich gut für Print-Stylesheets, da sie eine Maßeinheit für den Druck sind. Punkte sollten in Webseiten nicht verwendet werden, da es bei der Verwendung von Punkten große Unterschiede zwischen den Browsern gibt; Mac OS-Computer neigen dazu, Text 25 % kleiner darzustellen als PC-Computer.

Websichere Schriftarten

Zunächst: Was ist eine websichere oder Webstandard-Schriftart?

Diese Schriftarten bilden eine Gruppe ausgewählter Schriftarten, die auf den meisten Computern verfügbar sind. Dies ist es, was derzeit die Auswahl an Schriften im Web unter den CSS2-Spezifikationen einschränkt.

Wenn du aus den verfügbaren websicheren Schriftarten, zum Beispiel bei schrift-generator.net wählst, hast du eine bessere Kontrolle darüber, wie dein Text auf allen Browsern und Betriebssystemen aussieht. Die gängigsten Schriftarten sind:

  • Arial (das Mac OS-Äquivalent ist Helvetica)
  • Times New Roman (das Äquivalent für Mac OS ist Times)
  • Verdana
  • Georgia
  • Courier

Andere beliebte Schriftarten:

  • Impact
  • Lucida Console (das Mac OS-Äquivalent ist Monaco)
  • Lucida Sans (das Äquivalent für Mac OS ist Lucida Grande)
  • Palatino
  • Tahoma (das Äquivalent für Mac OS ist Geneva)
  • Comic Sans
  • Trebuchet MS

Wenn du eine dieser Schriften verwendest – insbesondere die Schriften aus der zweiten Liste – solltest du einige Optionen im CSS einbauen, auf die du zurückgreifen kannst.

Teile dein neues Wissen mit anderen: