CSS Schriften
Schriftarten (Schriftfamilien)
Die Verwendung von Schriften ist für AnfängerInnen von Webdesign unerwartet kompliziert. So genügt es nicht einfach wie in Word oder anderen Textverarbeitungsprogrammen eine Schrift auszuwählen, sondern es "muss" eine ganze Liste angegeben werden, wobei keine Tippfehler erlaubt sind. Die Schrift wird dann auch nicht Schriftart sondern Schriftfamilie genannt. Und zuletzt kann der/die Webautor/in nie wissen, mit welcher Schrift eine Webseite auf jeden einzelnen Computer angezeigt werden wird.
Technischer Hintergrund
Zum Darstellen einer Schrift muss der Computer auf eine Beschreibung des Aussehens aller einzelnen Zeichen (Buchstaben, Ziffern, Satzzeichen, u.s.w.) dieser Schrift zugreifen können. Diese Beschreibung ist in einer Fontdatei abgespeichert, nachzulesen auch auf Wikipedia: http://de.wikipedia.org/wiki/Font_(Informationstechnik).
Schreibt man in einer Anwendersoftware Text in einer Schrift, so ist die entsprechende Fontdatei klarerweise auf diesem Computer installiert, sonst könnte man die Schrift ja nicht verwenden. Druckt man den Text aus (und kann der Drucker auf die selbe Fontdatei zugreifen, was im Allgemeinen der Fall ist), so ist die Sache erledigt. Der Ausdruck ist auf Papier und es kann keine weiteren Probleme mehr geben.
Bei Webseiten sieht die Sache anders aus, denn wie im Kapitel "(X)HTML ist nicht geeignet für fixes Layout" beschrieben, wird die Darstellung der Webseite erst am Computer der/des Benutzer/in erzeugt. In der Datei der Webseite wird nur die Information übertragen welche Zeichen dargestellt werden sollen und wie die gewünschte Schrift heißt, aber nicht die Fontdatei selbst und daher auch nicht die Information wie die Buchstaben, Ziffern, Satzzeichen, u.s.w. aussehen. Ist nun die entsprechende Fontdatei (zufällig) auf dem Computer installiert, gibt es kein Problem und die Schrift wird wie von der/vom Autor/in beabsichtigt dargestellt. Dass dies auf den Computern aller BenuzterInnen der Fall ist, davon ist die Realität aber weit entfernt.
Denn die meisten Schriften (Fontdateien) sind eine Handelsware und die Erlaubnis zur Benutzung (Lizenzen) müssen von den Software-Herstellern gekauft werden. Die Herstellerfirmen haben aber unterschiedliche Produkte gekauft, so verwendet z.B. Microsoft in Windows die Schrift Arial von der Firma Monotype, Apple in Mac OS X die Schrift Helvetica von der Firma Linotype und viele Linux Distributionen die Schrift Nimbus Sans L von der Firma URW Software & Type. Diese Schriften sehen für die (meisten) Computerbenutzer so ähnlich aus, sodass sie als die selbe Schrift durchgehen könnten.
Arial (Windows Computer):
Helvetica (Mac Computer):
Nimbus Sans (Linux Computer)
Quelle: http://de.wikipedia.org/wiki/Helvetica_%28Schriftart%29#Bedeutung
http://www.fonts.com/de/search/all-fonts?searchtext=Arial&SearchIn=all-fonts
Test Glossar mit Stern
Schriftenliste
Erstellt man eine Webseite auf einem Windows Computer und verwendet man die Schrift Arial, so könnten nur wiederum Windows Computer diese Schrift korrekt darstellen. Daher gibt man in der Liste der Schriften auch die Schriften der anderen Systeme an, die der gewünschten Schrift zum Verwechseln ähnlich schauen.
Die einzelnen Schriften werden durch Beistriche getrennt angegeben.
Jeder Browser probiert von links beginnend, ob eine Schrift mit diesem Namen auf dem Computer installiert ist. Falls sie es ist, wird der Text in dieser Schrift dargestellt, falls nicht wird die nächste Schrift rechts davon probiert, und so weiter.
h1 {
font-family: Arial, Helvetica, sans-serif;
}
Der Browser probiert als erstes die Schrift Arial. Falls es ein Windows Computer ist wird er fündig werden und die Überschrift 1 in Arial darstellen. Ist es kein Windows Computer, wird er nicht fündig und probiert die nächste Schrift, also Helvetica. Falls es ein Mac OS X Computer ist wird er fündig werden und die Überschrift 1 in Helvetica darstellen. Ist es kein Mac OS X Computer, wird er nicht fündig und dann kann er nur noch in der Schrift die für sans-serif steht, darstellen.
Generische Schriften
An Ende jeder Schriftliste sollte eine "generische" Schrift angegeben sein. Findet der Browser in der Schriftliste keine Schrift die auf dem Computer installiert ist, so verwendet er die angegebene Generische Schrift.
Generische Schriften existieren aber nicht eigenständige Schrift, also als eine Fontdatei, sondern nur als Namen. In jedem Browser ist nun zu diesen Namen definiert, welche existierende Schrift anstelle der Generischen Schrift verwendet werden soll. So ist sichergestellt, dass jede gewünschte Schrift, auch wenn diese oder eine ähnliche Schrift nicht installiert ist, durch eine Generische Schrift dargestellt wird, die zumindest in den Grundzügen der gewünschten Schrift ähnlich schaut.
Um dies zu gewährleisten es gibt in jedem Browser fünf verschiedene Generische Schriften: serif, sans-serif, cursive, fantasy und monospace.
Beschreibung der Generischen Schriften und wie sie im Browser (den du gerade verwendest, auch abhängig von Betriebssystem) dargestellt werden:
serif- The quick brown fox jumps over a lazy dog
eine Schrift mit Serifen, proportional sans-serif- The quick brown fox jumps over a lazy dog
eine Schrift ohne Serifen, proportional cursive- The quick brown fox jumps over a lazy dog
eine Schrift für Schreibschrift, proportional fantasy- The quick brown fox jumps over a lazy dog
eine Schrift für ungewöhnliche Schrift, proportional monospace- The quick brown fox jumps over a lazy dog
eine Schrift mit dicktengleichen Zeichen (= nicht proportional), meist mit Serifen
Anmerkung: Bei den meisten Browser sieht man, dass nicht alle Generischen Schriften auf unterschiedliche existierende Schriften verweisen, sondern dass oft cursive oder fantasy auf die selben existierenden Schriften verweisen wie serif oder sans-serif. So verweist z.B. der Browser Firefox auf Windows für serif auf "Times New Roman", sans-serif, auf "Arial", cursive auf "Comic Sans MS", fantasy auf "Arial" und monospace auf "Courier New".Wurde gar keine Schrift angegeben verweist Firefox auf serif und somit auf "Times New Roman". Quelle: http://www.w3.org/TR/CSS2/fonts.html#generic-font-families und about:config find: font.name. und font.default. und https://wiki.mozilla.org/Font_selection/Default_fonts
Näheres in Eigenschaften von Schriften wie z.B. Serifen, proportional u.s.w. im Kapitel Webdesign.
Der Begriff "generisch" bedeutet in der EDV soviel wie "allgemein", stellvertretend für eine größere Menge ähnlicher Objekte bezugnehmend ohne auf die speziellen Unterschiede einzugehen (also ähnliche in einen Topf werfend) und eben nicht speziell auf einzelne Objekte differenziert eingehen, nachzulesen auch auf Wikipedia: de.wikipedia.org/wiki/Generisch
So steht der Name serif für alle Schriften mit Serifen.
Schriftfamilie
Der richtige Begriff für Schriften ist nicht font sondern font-family. Der Grund dafür ist der, dass in jeder Schrift Textstellen auch fett oder kursiv dargestellt werden können sollen. Dafür gibt es aber eigens gestaltete Zeichen die in einer eigenen Fontdateien abgespeichert sind. Diese Unterschiedlichen Darstellungen der selben Schrift nennt man Schriftschnitt. So gibt es die meisten Schriften in den Schriftschnitten "normal", "fett", "kursiv" und "fett kursiv". Diese mehreren Schriftschnitte zusammen werden dann Schriftfamilie genannt. Daher heißt die entsprechende Eigenschaft in CSS font-family.
Fontdateien
Wie bereits erwähnt, ist in den Fontdateien für jedes Zeichen eine Beschreibung, wie dieses aussieht. In früheren Fontdateien (vor der Zeit von Unicode) waren nur 256 Zeichen definiert und selbst in Unicode-Fontdateien kommt es vor, dass es Zeichen keine Beschreibung gibt.. Somit kann es vorkommen, spezeill wenn man in einer HTML-Datei nicht Unicode sondern eine andere Codierung verwendet wird, einzelne (außergewöhnliche) Zeichen nicht dargestellt werden können und durch ein Rechteck mit der Codezahl ersetzt werden.
Schriftnamen und Schreibweise
Die Namen einer Schriftfamilie muss fehlerfrei eingegeben sein, also genau so wie der Name im Betriebssystem gespeichert ist. Ist nur ein Zeichen falsch, so gibt es keine Übereinstimmung und die Schrift wird nicht verwendet.
Besteht der Schriftname aus mehr als einem Wort (also wenn ein Leerzeichen im Namen vorkommt), dann muss der Schriftname in Anführungszeichen gesetzt werden, also z.B. "Times New Roman" oder "Courier New".
Anmerkung: Wird die Deklaration Inline verwendet, also als Attribut in einem Anfangstag, so muss man "einfache Anführungszeichen" verwenden, also z.B. <p style="font-family='Times New Roman', Times, serif;">, denn würde man ein "doppeltes Anführungszeichen" verwenden, würde der Browser das erste Anführungszeichen des Schriftnamens als Ende des Attribut-Wertes interpretieren und es würde zu einem Fehler kommen: <p style="font-family=" und dann müsste ein weiteres Attribut kommen, aber es gibt kein Attribut mit dem Namen Times.
h1 {
Arial, Helvetica, "Nimbus Sans L", sans-serif;
}
p {
"Times NewRoman, Times, "Nimbus Roman No9 L", serif;
}
Welche Schriften kann man verwenden?
Welche Schriften kann man im Web einsetzen? - Kopie aus: Thomas Stich Stichpunkt.de
Zunächst ein wenig Theorie. Es gibt folgende Schriftfamilien, die ich in den Beispielen nur mit ihrem generischen Namen formatiere:
- serif: Diese Schriftarten haben sogenannte Serifen, das sind kleine Hilfslinien an den Buchstaben, die den Lesefluß erleichtern sollen. Fast alle Bücher und Zeitungen verwenden deshalb Serifenschriften. Die bekanntesten Vertreter sind Times und Georgia.
- sans-serif: Die Buchstaben haben keine Serifen und werden in Papiermedien meist für Überschriften verwendet. Bekannte Vertreter dieser Schriftfamilie sind Arial, Verdana und Helvetica.
- monospace: Bei diesen Schriften haben alle Buchstaben die gleiche Breite, das kleine i nimmt also genau den gleichen Raum ein wie das große M. Die alten Schreibmaschinen konnten nur solche Zeichen tippen. Ein Vertreter dieser Familie ist Courier.
- cursive: Schräg gestellte Buchstaben können auf dem Computer zwar viele Schriften darstellen, im Web sehen sie aber nur selten gut aus und sind schwer lesbar. Eine Schriftart, die auch für kursiv (italic) designed wurde, ist Comic Sans MS.
Die Web-Browser haben sich bislang an der Tradition der Printmedien orientiert und verwenden deshalb eine Serifenschrift als Standard, unter Windows ist es Times New Roman. Leider wirkt diese Schrift auf dem Bildschirm völlig anders als auf Papier. Bedingt durch die Pixelstruktur des Mediums (und damit abhängig von der Qualität des Monitors) können die Serifen nicht deutlich dargestellt werden und den Lesefluß des Betrachters unterstützen. Im Gegenteil, sie erschweren sogar das Lesen, da die Buchstaben nicht sauber voneinander getrennt erscheinen. Überprüfe dieses einmal an den Beispielen oben.
Deswegen verwenden die meisten Webseiten eine serifenlose Schrift. Unter Windows sind hier vor allem Arial und Verdana verbreitet und auf dem Mac Helvetica. Die Arial (die vom Browser wahrscheinlich im obigen Beispiel verwendet wird) hat dabei den Nachteil, daß die Laufweite sehr gering ist, die Buchstaben also dicht bei einander liegen - auch dieses fördert das Lesen nicht unbedingt. Darum habe ich der Verdana den Vorzug gegeben, die speziell für den Bildschirm entworfen wurde.
Da die serifenlosen Schriften auf die Hilfslinien verzichten, haben sie mehr Pixel pro Buchstabe zur Verfügung und nutzen dieses zur saubereren Darstellung auf dem Bildschirm auch aus - die Schrift wird größer dargestellt als die Serifenfamilie. Deshalb wird bei Einsatz dieser Schriftarten meistens die Schriftgröße verringert (und die Zeilenhöhe vergrößert), da bei zu großen Buchstaben der Überblick in der Satzstruktur verloren geht. Bei den Beispielen oben mußte ich darum im Serifenabsatz den Schriftgrad erhöhen, damit man den Absatz noch lesen kann - weil ich ihn vorher verkleinert hatte.
Und damit hat man das nächste Problem: Die verschiedenen Systeme haben eine unterschiedliche Bildschirmauflösung. Während Windows-PC 96 pdi (dots per inch, also Pixel pro Inch) darstellen, sind es bei Mac und Unix/Linux meist nur 72 dpi. Deren Benutzer sehen den Text also kleiner.
Das Wichtigste beim Einsatz vom Standard abweichender Schriftarten ist jedoch, daß dieser Font auch auf dem Computer des Besuchers dargestellt werden kann, daß er dort überhaupt vorhanden ist. Denn was ein anderer User auf seinem Rechner installiert (oder gelöscht) hat, entzieht sich jeder Kontrolle des Erstellers von Webseiten. Darum muß ich, so leid es mir auch tut, auf die Verwendung meiner Lieblingsschrift verzichten - sie ist eben individuell und darum wohl nur bei sehr Wenigen anzutreffen. Ich kann nicht einmal darauf bauen, daß jeder die Verdana besitzt, denn auf Mac und Linux ist sie von Haus aus nicht vertreten. Deshalb gebe ich bei der Schrift-Definition mehrere Alternativen an und als letztes den generischen Familiennamen der jeweiligen Schrift, mit dem jeder Browser etwas anzufangen weiß. Also:
font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
oder
font-family: "Times New Roman", Georgia, Times, serif;
oder
font-family: "Courier New", Courier, monospace;
Für einen Vergleich der Schriften im Lauftext habe ich eine Testseite zu Schriftarten erstellt. Da eine gute und ermüdungsfreie Lesbarkeit jedoch nicht nur vom gewählten Font abhängt sondern auch von der Zeilenlänge, ist im unteren Bereich die Textbreite auf 500px begrenzt. Wer einen großen Monitor besitzt, kontrolliere es einmal im Vollbild-Modus. Hier sollte es wesentlich einfacher sein, vom Ende einer Zeile auf den Anfang der nächsten zu springen. Nicht umsonst sind Zeitungsseiten z.B. in mehreren Spalten angeordnet. Aber die Usibility von Webseiten ist wieder ein anderes Thema....