Webkrauts » Schriften im Internet

Artikel

Schriften im Internet

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

Testseite zur Zeilenbreite
Typetester – Compare Screen Type (engl.)
korhoen typeviewer (engl.)
Common fonts to all versions of Windows & Mac equivalents (engl.)
Siehe auch die weiterf�hrenden Links hier im Adventskalender

Zum Autor

Boris Stumpf ist Allround-Webhandwerker in Frankfurt am Main und betreibt das dyingeyes weblog. Mit Webdesign gemäß aktueller Webstandards – die Anforderungen der Barrierefreiheit (Accessibility) im Blick – beschäftigt er sich seit Anfang 2002. Darüber hinaus betreibt er zusammen mit Freunden einen sozial engagierten Internetverein und plagt sich mit zwei weiteren privaten Webprojekten herum.

Info:: Schriften im Internet ist Beitrag Nr. 25
Autor:: Boris Stumpf am 13. Dezember 2005 um 22:00
Kategorie:: Adventskalender 2005

Kommentare

Bitte die Hausregeln beachten. Alle Kommentare werden auf werbliche Links/Nicknames geprüft und gegebenenfalls gelöscht.

1.

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

http://praegnanz.de/essays/

Kommentar by Basti - 16. Dezember 2005 um 03:04
2.

(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

Kommentar by markus - 16. Dezember 2005 um 19:31
3.

(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 . . .

Kommentar by markus - 16. Dezember 2005 um 19:38
4.

@markus
ein sehr schöne Denkansatz.

Kommentar by Enrico Reinsdorf - 17. Dezember 2005 um 01:46
5.

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.

Kommentar by Boris Stumpf - 17. Dezember 2005 um 10:06
6.

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.

Kommentar by Oliver - 16. Oktober 2008 um 14:58

Webkrauts: Für mehr Qualität im Web.