Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Schriften im Internet

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Schriften im Internet

Im zeitgemäßen standardkonformen Webdesign verfügen wir über eine ganze Reihe von interessanten Möglichkeiten, unsere Dokumente typografisch zu gestalten. Die durch das Medium World Wide Web und die darauf gründenden Webstandards gegebene Flexibilität und Dynamik ermöglicht uns, Webdokumente für unsere Leser optimal vorzubereiten und zu gestalten. Wenn wir diese Flexibilität im Sinne unserer Leser nutzen, so ermöglichen wir ihnen, unsere Dokumente ihrem eigenen Bedürfnis entsprechend – und nach Möglichkeit ihrer bevorzugten Software – darzustellen. Schauen wir uns einige Möglichkeiten an:

Gestalterische Vielfalt mit Stylesheets

Wir können mit Hilfe von Cascading Style Sheets (CSS) fein justierend Einfluss nehmen auf folgende Aspekte typografischer Gestaltung:

  • Schriftfamilie (font-family)
  • Schriftgröße (font-size)
  • Schriftgewicht (font-weight)
  • Schriftstil (font-style)
  • Schriftvarianten (font-variant)
  • Zeichenabstand (letter-spacing)
  • Wortabstände (word-spacing)
  • Zeilenabstand (line-height)

Eine entscheidende gestalterische Wirkung erzielen wir natürlich mit der Auswahl einer geeigneten Schriftfamilie. Alle gängigen Betriebssysteme verfügen über einige speziell für die Darstellung am Bildschirm geeignete Standard-Schriftarten. So können wir also in unserem Stylesheet passende Schriftfamilien-Päckchen zusammenstellen und somit eine recht gute Kontrolle darüber erhalten, wie unser Dokument schließlich auf dem Bildschirm des Lesers aussehen wird.

Wir treffen eine geeignete Auswahl

Unter zahlreichen Möglichkeiten zur Auswahl von Schriftfamilien haben sich folgende Zusammenstellungen als geeignet erwiesen, da sie auf weiter Verbreitung gründen:

Serifenlose Schriften:

  • Arial, Helvetica, sans-serif
  • Verdana, Arial, Helvetica, sans-serif
  • "Trebuchet MS", Helvetica, sans-serif
  • "Lucida Sans Unicode", "Lucida Grande", sans-serif

Serifenbetonte Schriften:

  • "Times New Roman", Times, serif
  • Georgia, "Times New Roman", Times, serif

Schriften mit fester Zeichenbreite:

  • "Courier New", Courier, monospace

Wir binden solche Päckchen in unser Stylesheet ein, indem wir zu den gewünschten HTML-Tags eine »font-family« definieren, z.B.:

font-family: "Times New Roman", Times, serif;

Unser Webbrowser wird die erste Schriftart im Päckchen verwenden, die er auf unserem Computer installiert findet. Die »generischen« Familien »sans-serif« und »serif« dienen als Rettungsanker, falls keine der genannten Schriften verfügbar ist. Der Browser wählt dann die voreingestellte Standardschrift – serifenlos oder mit Serifen – zur Anzeige aus.

Lesbarkeit und Schriftfamilien

Für optimale Lesbarkeit am Bildschirm sind serifenlose Schriftfamilien aufgrund ihrer einfacheren Struktur besser geeignet als serifenbetonte Schriften, wie wir sie aus dem Buch- und Zeitungsdruck kennen. Alle oben aufgeführten serifenlosen Schriften sind speziell für die Bildschirmdarstellung entwickelt worden und wir sollten sie durchgängig für Fließtextabsätze in unseren Webdokumenten verwenden.

Serifenbetonte Schriften eignen sich dagegen z.B. gut für klar abgesetzte Überschriften – und wir können auf diese Weise für angenehme Abwechslung im Schriftbild unserer Dokumente sorgen.

Lesbarkeit und Schriftgrößen

Um unsere Webdokumente möglichst barrierefrei und für jeden Leser gut lesbar zu gestalten, sollten wir Schriftgrößen immer mit relativen Maßeinheiten auszeichnen. Relative Maßeinheiten ermöglichen es dem Besucher unserer Seiten, die Schriftgröße nach seinem Bedürfnis einzustellen. Alle gängigen (grafischen) Webbrowser bieten prinzipiell diese Möglichkeit, die Schriftgröße zu verändern. Tatsächlich funktioniert das aber nur unter der Voraussetzung, dass wir die relative Maßeinheit »em« (oder die seltener verwendete prozentuale Größenangabe) verwenden.

Die Maßeinheit »em« ist optimal für unsere Zwecke geeignet – und sie basiert in folgender Weise auf der Grundeinstellung unserer Webbrowser auf eine mittlere Schriftgröße:

  • Mittlere Schriftgröße im Browser = 16 Pixel = 1em

Um leichter mit dieser Maßeinheit umgehen zu können und um mögliche Darstellungsprobleme bei verschiedenen Webbrowsern zu vermeiden, hat es sich als hilfreich erwiesen, im Stylesheet an zentraler Stelle eine Grund-Justierung der Schriftgröße vorzunehmen:

body {font-size:62.5%;}

Mit diesem Wert setzen wir eine Ausgangsschriftgröße, bei der »1em« genau »10px« entspricht.

  • 9px entspricht 0.9em
  • 10px entspricht 1em
  • 11px entspricht 1.1em
  • 12px entspricht 1.2em
  • usw.

Bei Bedarf können wir auch mehrere Nachkommastellen (2.25em, 0.75em usw.) einstellen, es ist aber nicht gewährleistet, dass jeder Webbrowser eine solche Feinjustierung tatsächlich exakt darstellt.

Trotz der durch die Verwendung relativer Maßeinheiten erreichbaren Flexibilität ersparen wir vielen unserer Besucher aber das nachträgliche Anpassen der Schriftgröße, wenn wir selbst schon bei der Konzeption unserer Seiten auf gute Lesbarkeit und gute Unterscheidung zwischen einzelnen Textarten (Überschriften, Fließtext, Aufzählungen, etc.) achten und ausreichend große Schriftgrößen einsetzen.

Zum Abschluss ein besonderer Lesetipp

Richard Rutter beschreibt in seiner bewährten Erörterung ausführlich (englischsprachig) die interessanten Aspekte der relativen Größenauszeichnung mittels »em«.

Weiterführende Links

Kommentare

Basti
am 16.12.2005 - 03:04

Hier noch ein Link zu den sehr lesenswerten Esseys von Gerrit van Aaken:

http://praegnanz.de/essays/

Permanenter Link

markus
am 16.12.2005 - 19:31

(1) Den Link zu Praegnanz habe ich auch vermisst ...

(2) Warum wird bei bei der Angabe von Schriftfamilien immer Arial vor Helvetica aufgeführt, obwohl doch Helvetica als die wohlgestaltetere der beiden grundsätzlich sehr ähnlichen Schriften gilt? Sollte man nicht den Leuten, die über eine Helvetica verfügen, auch die Möglichkeit geben, diese zu nutzen?

P.S.: Danke für den tollen Adventskalender :-)

Permanenter Link

markus
am 16.12.2005 - 19:38

(3) Da Schriften ohnehin auf jedem System und Browser anders aussehen, hat die Angabe der Schriftfamilie doch eigentlich nur gestalterischen Wert ("Ich möchte, dass die Schrift weich und angenehm wirkt, und gut lesbar ist" aber nicht "Ich möchte, dass die Schrift genau die gleiche Breite einnimmt wie auf meinem System"). Macht es da überhaupt Sinn "Arial, Helvetica, sans-serif" zu schreiben? Wäre nicht "sans-serif" oftmals die bessere Wahl (wenn man nicht die spezifische neutrale Characterlosigkeit der Arial vor allen anderen Grotesken bevorzugt)? Ich benutze eine andere serifenlose Standardschrift in meinem Browser, und finde es immer sehr schade, wenn mir diese ohne klaren Grund gegen die Arial ausgetauscht wird . . .

Permanenter Link

Enrico Reinsdorf
am 17.12.2005 - 01:46

@markus
ein sehr schöne Denkansatz.

Permanenter Link

Boris Stumpf
am 17.12.2005 - 10:06

Die scheinbare Bevorzugung der Arial gegenüber der Helvetica hat einfach den Grund, dass die Arial sowohl auf Windows- als auch auf Mac-Systemen (und wohl auch auf den neueren Linux-Distributionen?) verfügbar ist, die Helvetica jedoch nicht auf Windows-Systemen. (Es sei denn, man hat sie selbst installiert...) Zum anderen ist die Arial zuverlässig gut am Bildschirm lesbar, das sie wohl speziell dafür gebaut wurde. Bei den unzählig vielen Helveticas, die "im Umlauf" sind, muss das nicht immer gelten. (Ich habe schon Helveticas erlebt, die eigentlich nur druckbar waren, aber kaum am Schirm zu lesen)

Die generischen "Fallback"-Angaben sans-serif bzw. serif sollen lediglich sicherstellen, dass bei Nichtvorhandensein der konkret angegebenen Schriften in jedem Fall eine serifenlose bzw. serifenbetonte (System-) Schrift verwendet wird.

Die Schriften unterscheiden sich tatsächlich nur in Hinsicht auf die Herkunft, bzw. den Hersteller. Wenn ich Schrift X von Hersteller Y auf beiden Systemen habe (Win/Mac z.B.), dann sehen sie identisch aus. Mal von womöglich unterschiedlichen Glättungsverfahren abgesehen.

Den Link zu Gerrit habe ich glatt vergessen. Speziell diesen hier zu HTML-Schriften unter der Lupe. Schande über mich.

Permanenter Link

Oliver
am 16.10.2008 - 14:58

Das mit der richtigen Schrift ist immer ein Problem. Da ich gerade einen Relaunch vornehme, stehe ich vor dem Problem, welche Schrift ist für Absätze zu nehmen.

Standardmäßig bevorzuge ich zwar Arial, aber gerade bei einem "T" werden große Lücken erzeugt.

Permanenter Link

Die Kommentare sind geschlossen.