Schrift
Sie sind hier: Startseite › Umsetzung › Schrift
Inhaltsübersicht:
Relative Größenangaben
Schriftgrößen können in absoluten und in relativen Werten angegeben werden. Obwohl die meisten Browser auch Schriften skalieren, für die absolute Größen vorgegeben sind, ist die Angabe von variablen, also relativen Schriftgrößen empfehlenswert, da der Internet Explorer als der meistgenutzte Browser das Skalieren von absoluten Größen nicht ermöglicht (zumindest bis Version 6 nicht).
Relative Größenangaben sind in den
Maßeinheiten "em" (bezogen auf die
Schriftgröße des Elementes, 1.2em entspricht
120% des Elternelementes) und "%"
(Prozent) möglich. Die Entscheidung, Größenangaben in
em oder % zu hinterlegen, ist
Geschmackssache.
Empfehlenswert ist jedoch, die Schriftgröße
für den Dokumentenkörper, den
<body>-Bereich eines Dokumentes in
100.01% festzulegen. Ältere
Browser-Versionen von
Opera und Safari haben mit
Angaben wie 100% und 101%
Schwierigkeiten, die Angabe von 1em führt im
Microsoft Internet Explorer
bei Skalierungen zu unverhältnismäßig kleiner (siehe
nachfolgendes Bild, rechte Spalte) bzw.
großer Schrift.
Bildbeschreibung "Schriftgrößen im Internet Explorer": Bei Angabe der Seitenschriftgröße wird bei Kleiner-Skalierung die Schrift im Internet Explorer kaum mehr erkennbar.
Beispiel CSS-Datei - Schriftgrößen (Ausschnitt):
Die Angaben entsprechen dem vorangegangenen Bildschirmfoto (von
links nach rechts).
body.eins { font-size: 100.01%; }
body.zwei { font-size: 100%; }
body.drei { font-size: 101%; }
body.vier { font-size: 1em; }
Das Vererbungsprinzip
Um den Stil der Schrift beeinflussen zu
können und das veraltete <font>-Element zu
eliminieren, wird das CSS-Attribut
font verwendet. Über dieses können
Angaben zu Schriftart, Schriftgröße und
Schriftgewicht eingebunden werden.
Beispiel CSS-Datei - Vererbungsprinzip (Ausschnitt):
ul { font: arial 0.9em normal; }
Wenn skalierbare Schriften verwendet werden, ist besonderes Augenmerk auf das CSS-Vererbungsprinzip zu richten.
Bildbeschreibung "Vererbungsprinzip": Werden zwei Listen ineinander verschachtelt, so erbt die innere Liste die Eigenschaften der äußeren Liste. Das führt bei unterschiedlichen Angaben von Schriftgrößen schnell zu sehr kleinen Schriften.
Hat ein XHTML-Element eine skalierbare Schriftgröße zugewiesen bekommen, gilt diese auch für alle darin enthaltenen Elemente.
Beispiel XHTML-Datei - Vererbungsprinzip (Ausschnitt):
<ul>
<li>Punkt 1 (entspricht 0.9em)
<ul>
<li>Punkt 1.1 (entspricht 0.9em x 0.9em = 0.81em)</li>
</ul></li>
<li>Punkt 2 (entspricht 0.9em)</li>
</ul>
Die innere Liste erbt in diesem Fall die Schriftgröße
der äußeren Liste und wird zusätzlich noch auf
0.9em verkleinert, was letztendlich zu einer realen
Schriftgröße von 0.81em führt.
Texthervorhebungen
Wie bereits gezeigt, sind in längeren Fließtexten
besonders die Schlüsselwörter
hervorzuheben. Dazu stehen verschiedene Elemente zur Verfügung
(siehe nachfolgendes Beispiel). Das <strong>-Element
stellt Text fett dar, über das <em>-Element
wird Text hervorgehoben, für tiefergestellte Schrift
wird das <sub>-Element verwendet und
höhergestellte Schrift wird durch das <sup>-Element
ausgezeichnet. Da Suchmaschinen noch kein CSS
interpretieren, ist die Nutzung der HTML-Elemente
zur Betonung von Text durchaus empfehlenswert. Durch
CSS
können diese dann zusätzlich für das gewünschte
Aussehen formatiert werden.
Beispiel XHTML-Datei - Texthervorhebungen (Ausschnitt):
<p>Gleich folgen verschieden formatierte
Texte:<br />
<strong>Fetter Text</strong>,
<em>hervorgehobener Text</em>,
<sub>tiefergestellter Text</sub>
und <sup>höhergestellter Text</sup>.</p>
Kommentare
Wie in jeder Programmier- oder Script-Sprache gibt es die Möglichkeit, zur Erklärung des Quelltextes und zur Verdeutlichung der Struktur Kommentare im Dokument zu positionieren. Diese Notizen sind nur im Quelltext sichtbar, nicht in der Browseransicht. Sie werden auch von Suchmaschinen nicht verwertet.
Beispiel XHTML-Datei - Kommentare (Ausschnitt):
<!-- Ich bin ein Kommentar -->
Kommentare können nicht ineinander verschachtelt werden. Verschachtelungen sowie die Verwendung von bspw. zwei Bindestrichen innerhalb des Kommentartextes erzeugen fehlerhaften Quelltext.
Weiterführende Literatur:
- Erlhofer, Sebastian:
- Suchmaschinen-Optimierung,
Seite 223-224 sowie Seite 233,
Galileo Computing, Bonn, 1. Auflage 2005 (Galileo Press),
ISBN 3898426203 - Hellbusch, Jan Eric und Bühler, Christian (Herausgeber):
- Barrierefreies Webdesign,
Seite 149,
dpunkt-Verlag, Heidelberg, 1. Auflage 2005,
ISBN 3898642607 - Münz, Stefan
- Professionelle Websites. Programmierung, Design und Administration von Webseiten,
Seite 72-73,
Addison-Wesley Verlag, München, 2. überarbeitete Auflage 2006 (IX-Buchtipp),
ISBN 3827323703