Verlauf
Alle Kapitel anzeigenAllgemeines zur Schriftenformatierung in HTML-Dokumenten
Die Gestaltungsmöglichkeiten von Absätzen und Textfeldern in Webseiten sind bzw. waren bei weitem nicht so umfangreich, wie man es aus dem Print-Layout kennt. Da HTML bzw. Internetseiten nie darauf ausgerichtet waren, grafisch anspruchsvolle und aufwendige Inhalte zu vermitteln, war die Definition von Schrift sehr rudimentär. Das zeigt sich schon alleine dadurch, dass dem Designer nur sehr wenige Schriftarten zur Verfügung stehen.
Eigentlich werden in HTML lediglich Schriftfamilien definiert
- Arial, Helvetica, sans-serif
- Times New Roman, Times, serif
- Courier New, Courier, mono
- Verdana, Arial, Helvetica, sans-serif
- Geneva, Arial, Helvetica, sans-serif
Textdefinitionen wurden vor der CSS-Standardisierung mit dem
<font>-Tag vorgenommen. Damit waren einige wenige Einstellungsoptionen
gegeben, wie z.B. die Schriftfamilie, Schriftgröße
(jedoch völlig ungenau) und Schriftfarbe.
Die Tage des <font>-Tags
sind jedoch gezählt, er gilt seit HTML 4 als veraltet und in der
XHTML Spezifikation existiert er gar nicht mehr.
Deshalb muss die Schriftformatierung
ausschließlich per CSS erfolgen.
Definition von Schriftgrößen in CSS
Die Definition der Schriftgröße erfolgt grundsätzlich über die Eigenschaft font-size und kann durch drei Arten erfolgen:
- Feste Größen durch Punkte (Pt) und Pixel (Px)
- variable Größen durch Prozent, em und ex
- Schlüsselwörter (xx-small bis xx-large)
1. Feste Größen
| Punkte (Pt) | Pixel (Px) |
| Die Schriftgestaltung durch fixe Größen ist die designerisch nahe liegende, da man eigentlich nur damit halbwegs verbindliche Layouts erstellen kann. Hierbei bieten sich Schriftgrößen in Punkt (Pt) an, wie man sie aus dem Printlayout kennt. Nur leider sind Bildschirme keine Druckmaschinen, die einheitliche Punktgrößen bei Schrift gewährleisten. Die Schriftdefinition in Punkt führt meist dazu, dass Schriften auf unterschiedlichen Betriebssystemen unterschiedlich dargestellt werden (und manchmal sogar unleserlich klein). Der Grund dafür liegt in den unterschiedlichen Umrechnungsmethoden der Systeme. Während Mac traditionell von einer Punktgröße von 1/72 Zoll (72 ppi) auch für die Bildschirmdarstellung ausgeht, verwendet Microsoft eine Darstellung von 96 bis 120 ppi. Neuere Mac-Browser verwenden nun auch 96 ppi als interne Berechnungsbasis, wodurch sich Schriftgrößen besser browser- und plattformübergreifend anpassen lassen. Das ganze wird jedoch durch die W3C-Richtlinien neuerlich verkompliziert, da das Consortium einen Kompromiss eingegangen ist, und 90 ppi als Umrechnungsbasis empfiehlt. Daran hält sich z.B. der Opera Browser, weswegen Schriften darin etwas kleiner dargestellt werden. | Grundsätzlich ist alles, was man am Bildschirm sieht, ein Bildpunkt bzw. ein Pixel. Somit ist die Größenangabe Pixel die „natürliche“ Maßeinheit für feste Schriftgrößen im Screen-Design. Dadurch wird sichergestellt, dass die Darstellung plattform- und browserübergreifend (so gut wie) funktioniert. Für exakte und aufwendige Layouts ist die Maßangabe Pixel die geeignete Größendefinition. Sie hat nur einen entscheidenden Nachteil: Der User kann im Browser die Größe der Schrift nicht mehr ändern, was im Sinne der „barrierenfreien Webseitengestaltung“ nicht wünschenswert ist. |
| Pixelgrößen im Browser- und Plattformvergleich |
2. Variable Größen
Relative Angaben zur Schriftgröße beziehen die Schriftgröße eines Elements auf sein Eltern-Element. Sie sind somit gut geeignet, um unterschiedliche Verhältnisse und Gewichtungen zwischen den Textelementen darzustellen. Dabei wird dem User aber die Möglichkeit gelassen, die Schriftgröße selber im Browser zu verändern.
| em | ex | % |
| Steht für bezogen auf die Schriftgröße des Elements. Ausnahme: wenn die font-size-Eigenschaft (also die Schriftgröße) selbst mit dieser Maßangabe gesetzt wird, steht diese für bezogen auf die Schriftgröße des Elternelements. Die Größenangabe {font-size: 1em;} lässt den Text am Browser des Benutzers in seiner Standard-Größeneinstellung erscheinen. | Steht für bezogen auf die Höhe des Kleinbuchstaben x in diesem Element. Ausnahme: wenn die font-size-Eigenschaft (also die Schriftgröße) selbst mit dieser Maßangabe gesetzt wird, steht diese für bezogen auf die Höhe des Kleinbuchstaben x im Elternelement. | Steht für Prozent. Je nach CSS-Eigenschaft relativ zur elementeigenen Größe, oder zu der des Elternelements, oder zu einem allgemeineren Kontext. Bei nebenstehendem Beispiel ist die Angabe zur Zeilenhöhe (line-height) relativ zur Schriftgröße (font-size) zu interpretieren. Hier verhält es sich ähnlich wie bei Größenangaben mit „em“. 100% steht dabei für die Standard-Schriftgröße am Browser des Benutzers. |
| Schriftgrößen variabel im Vergleich |
3. Schlüsselwörter
In der CSS-Definition existieren sieben Schlüsselwörter. Die Basisgröße ist medium. Die anderen Größen werden jeweils um den Faktor 1,2 vergrößert bzw. verkleinert. xx-small ist somit 0,58 mal so groß wie die Basisschriftgröße.
xx-small | x-small | small | medium | large | x-large | xx-large
Schlüsselwörter wären grundsätzlich eine gute Sache zur Schriftformatierung, unglücklicherweise entspricht die Einstellung medium in den verschiedenen Browsern nicht immer der selben Größe. Dies hängt damit zusammen, dass Microsoft und Netscape die Entsprechung zwischen CSS-Schriftgrößen und früheren HTML-Schriftgrößen unterschiedlich handhaben.
In Netscape entspricht medium der früheren Einstellung font size=“3“, während Microsoft font size=“4“ gleichsetzt. Mozilla Firefox und Internet Explorer 6 interpretieren mittlerweile die Schriftgrößen einheitlich.
