Dieses Merkblatt dient zur vereinheitlichung der Schriftartverwendung auf Webseiten, sowie zur gleichartigen Darstellung auf verschieden Plattformen, Bildschirmen und Browsertypen.
Dies ist eine Zusammenstellung der verschiedenen font-families die auf den drei meistverwendeten Plattformen genau bestimmt werden können. Als erstes wird eine Windows Schriftart angegeben, danach kommt eine Mac OS Schriftart und danach eine Linux Schriftart. Anschließend kommt noch die Familienangabe für alle anderen Plattformen.
font-family: Arial, Helvetica, FreeSans, sans-serif;font-family: Tahoma, Geneva, Kalimati, sans-serif;font-family: Lucida Sans Unicode, Lucida Grande, Malayalam, sans-serif;font-family: Georgia, Norasi, serif;font-family: Times New Roman, Times, FreeSerif, serif;font-family: Courier New, Courier, FreeMono, monospace;font-family: Lucida Console, Monaco, Nimbus Mono L, monospace;Die Standard Schriftgrößeneinstellung vieler Browser ist 16px. Je nach Blidschirmauflösung sind 16px jedoch mehr oder weniger groß. Daher ist es einheitlicher, die Schriftgröße relativ anzugeben. Dem einleitenden <body> Tag geben wir dazu folgende Schriftgröße:
body { font-size:75%;}
zum Seitenanfang
Damit haben wir die Schriftgröße auf exakt 12px reduziert, 1em = 12px.
Ab jetzt ist der Taschenrechner unser Freund: will ich 18px darstellen, rechne ich einfach 18 dividiert durch 12 und erhalte meinen em wert, in diesem Fall 1.5em.
.mytext_with_18px { font-size:1.5em; }
zum Seitenanfang
Wenn die Normalschriftgröße im Dokument nun 16px betragen soll geben wir diesen Wert dem ersten umschließenden div Container mit, meistens container oder wrapper benannt.
.wrapper { font-size: 1.33em; }
Wer klassen unabhängig definieren möchte kann auch einfach
body div { font-size: 1.33em; }
notieren.
Alle eingeschlossen Elemente, denen eine Schriftgröße mitgegeben wird, berechnen sich an dem Wert des Umschließenden Elements
body { font-size:75%;}
body div { font-size: 1.33em; }
body div h1 { font-size: 1.5em; }
in diesem fall ist die Schrift in <body><div><h1> 1,5 mal so groß wie die Schrift in <body><div>
zum SeitenanfangDie line-heigth wird, wenn sie in der CSS Datei nicht angegeben wird vom Browser voreingestellt. Daher kann sie natürlich von Browser zu Browser variieren. Mit der Kontrolle der line-height können unangenehme Layoutrisse von vornherein vermieden werden und simple Dinge wie vertikale Text zentrierung (zum Beispiel auf Buttons) vorgenommen werden.
mit der line-height im <body> Tag wird die Browservorgabe der line-height revidiert und auf den Wert gesetzt den man als Standard für das Dokument haben möchte. Es empfiehlt sich, dafür zu sorgen, das ein angenehmen Lesen möglich ist in dem der Zeilenabstand nicht zu groß und nicht zu klein ist. Der Wert kann in "px", "%" und "em" angegeben werden, die methode muß je nach Verwendung gewählt werden. Im <body> Tag kommt es darauf an, wie eine Zeile darüber die Schriftgröße festgelegt wurde.
body { font-size:75%; line-height:1.8em; }
Wird mit dem "em" System für die Schriftgröße gearbeitet, so kann es auch auf die line-height angewendet werden.
body { font-size:12px; line-height:21px;}
Das ist ca. derselbe Wert in Pixel angegeben (exakt wären 21.6px).
Somit weiss man genau wieviel Platz eine Zeile Text in der Höhe braucht und kann Höhen von Layouts gut vorherbestimmen.
Gibt man, so wie in obigem Beispiel der <h1> eine andere Schriftgröße, verändert sich die Zeilenhöhe nicht. Deshalb gibt man bei veränderter Schrift größe immer auch eine neue Zeilenhöhe an.
body { font-size:75%; line-height:1.8em;}
body div { font-size: 1.33em; line-height:1.8em; }
body div h1 { font-size: 1.5em; line-height:1.8em; }
Wieder liegt die verhältnismäßigkeit font-size : line-height der berechnung zugrunde:
Die <body> Schriftgröße ist 75%, also 12px.
Die Schriftgröße des <div> Containers ist 1.33em, also ca. 16px.
Die Zeilenhöhe dieses <div> ist 1,8 mal so groß wie die angegebene Schriftgröße, also 15,96 x 1,8 = 28,728px.
Der Berechnete Style in Firefox 3 beträgt hier: font-size:15.9667px / line-height:28.7333px | Er rechnet also auf 4 Kommastellen genau. Das kann man nun gerne auch auf anderen Browsern ausprobieren, das Ergebniss wird aber immer auf 2 Kommastellen genau gleich bleiben.
Jedenfalls ist es immer gut, den Taschenrechner beim CSS designen dabei zu haben :-)
zum SeitenanfangJeder CSS Designer kennt das Problem, einen Text in einem Button (eventuell mit Grafischem Hintergrund) vertikal zu zentrieren. Häufig wird das mit padding-top gelöst. Die Lösung ist aber reichlich ungenau.
Einfacher geht das mit der line-height:
ist ein Button genau 30 Pixel hoch, stelle ich die line-height des Links ebenfalls auf 30 Pixel und der Text ist exakt vertikal zentriert. Ausserdem ist gleich die gesammte Zeilenhöhe der Link und spannt somit auf die Höhe des Buttons auf.
.button a {
height:30px;
width:80px;
background:url(bilderpfad/button.jpg) 0 0 no-repeat;
}
.button a:link, .button a:visited {
line-height:30px;
}
zum Seitenanfang
Prinzipiell sollte die line-height immer dann Verwendung finden, wenn auch die font-size verwendet wird. Dabei ist auf eine Verhältnismäßigkeit von 1:1,5 bis 1:2 der Schriftgröße zur Zeilenhöhe zu beachten, damit das Schriftbild im Fließtext gut lesbar bleibt.
Bei Buttons, Menüleisten und anderen, meist mit Hintergrundbildern versehenen Anwendungen hilft sie zur exakten Vertikalen zentrierung in einem fix definierten Element.
zum SeitenanfangZusammendfassend hier nich ein Beispiel, wie ein typischer layout Aufbau mit Arial, 12 Pixel Schriftgröße und 18 Pixel Zeilenhöhe aussehen kann:
<body>
<div class="wrapper">
<h1>Das ist eine Überschrift</h1>
<p>Das ist ein Text</p>
<h2>Das ist eine Überschrift</h2>
<p>Das ist ein Text</p>
<h3>Das ist eine Überschrift</h3>
<p>Das ist ein Text</p>
<h4>Das ist eine Überschrift</h4>
<p>Das ist ein Text</p>
<h5>Das ist eine Überschrift</h5>
<p>Das ist ein Text</p>
<h6>Das ist eine Überschrift</h6>
<p>Das ist ein Text</p>
</div>
</body>
body{
font-family: Arial, Helvetica, FreeSans, sans-serif;
font-size:75%;
line-height:1.5em;
}
.wrapper{ font-size:1em; }
h1 { font-size: 2em; line-height:1.5em; }
h2 { font-size:1.8em; line-height:1.5em; }
h3 { font-size:1.6em; line-height:1.5em; }
h4 { font-size:1.4em; line-height:1.5em; }
h5 { font-size:1.2em; line-height:1.5em; }
h6 { font-size: 1em; line-height:1.5em; }
zum Seitenanfang