Wenn man mit CSS arbeitet ist die Wahl der richtigen CSS Einheit bei den Größenangaben oft nicht so klar. Es gibt px, cm, %, em, rem,ex und und und. Was sind das für Einheiten und wann verwendet man diese? Ich versuche in diesem Beitrag viele Fragen zu klären.
Vorab die Einheiten für den Druck
cm (Zentimeter)
mm(Millimeter)
in (Inch / Zoll)
pt (Punkt = 1/72 Zoll)
pc (Pica = 12pt , 1/6 Zoll).
Diese Masseinheiten sind vor allem für den Print Bereich interessant, aber nicht für das eigentliche Screen Design.
Warum gibt es diese Einheiten im Web Design überhaupt?
Man verwendet im Web auch Papier als Ausgabemedium. Dann nämlich, wenn die Inhalte gedruckt werden. Mit einer Medien – Abfrage im CSS kann man diese Einheiten für die Print Ausgabe verwenden. Punkt.
Grössenangaben im Screendesign
Wo werden Grössenangaben und ihre Einheiten verwendet?
Nachfolgend eine Aufzählung von Elementen, welche mit Grössenangaben versehen werden können:
- Schriften
- Schriftgrösse, Zeilenhöhe, Abständen zwischen Wörtern …
- Boxen
- Blockelemente wie DIV Elemente, Absätze (p), Überschriften (h1 – h6):
- Breite und Höhe, diverse Abstände (innen und aussen), Breite des Rahmens. Vergleiche dazu das sogenannte Boxmodell:
Das klassische Box-Modell: »box-sizing: content-box«
Das Was oder Wo wir mit Grössenangaben gestalten können kennen wir nun. Welches sind die Grössen – Einheiten im Screendesign und was sind die Unterschiede?
Unterschiede der verschiedenen Einheiten
Bei den Einheiten unterscheiden wir zuerst einmal zwischen den absoluten und den relativen Einheiten.
Absolute CSS Einheiten
Es gibt nur wenige davon und die wichtigste ist
Pixel (px)
Ein Pixel beschreibt die kleinste Ausgabeeinheit eines Monitors Diese Einheit stellt eine absolute Größe am Bildschirm dar. Wie beim Speichern von Bildern in der Bildbearbeitungs – Software, wo die Größe in Pixel angeben werden kann, können wir das bei CSS Einheiten tun.
Die Einheit Pixel kann unter anderem bei Webseiten mit fixem Layout verwendet werden.
Relative CSS – Einheiten
Prozent – %
Die bekannteste relative Einheit ist Prozent.
Prozent bei Boxen
Beispiel: Ein 50% – breites Blockelement dehnt sich auf der Hälfte der Breite der aktuellen Browserfenster – Grösse aus.
Wird in diesem Blockelement wiederum ein 50% breites Element eingefügt, dann hat dieses – bezogen auf die Fensterbreite – noch 25% Breite.
Der Code dazu:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Prozent sind relative Einheiten</title>
<style>
div {
font-family: sans-serif;
text-align: center;
height: 10em;
margin: 20px;
line-height: 10em;
}
div div {
margin: 0;
}
</style>
</head>
<body>
<div style="width: 50%; background-color: #aaa">50%</div>
<div style="width: 50%;background-color: #aaa">
<div style="width: 50%; background-color: #ddd">50%</div>
</div>
</body>
</html>
Prozent bei Schriften
Grundsätzlich kann man die % – Angaben auch für Schriften verwenden. Dabei wird die Schrift relativ zur Schriftgröße des Eltern-Elements dargestellt. Falls also die Schriftgröße des Eltern – Element 16 Pixel ist, ergibt bei der Angabe von 50% für die Schriftgrösse ein 8 Pixel grosser Text.
em
Eine der Prozentangabe ähnliche relative Einheit bei der Größe von Schriften ist die em – Einheit. Ein em entspricht 100% der Schriftgröße der Schrift des Eltern Elements. Ist ein Element nicht in einem Element mit unterschiedlichen Schriftgrößen enthalten, dann gilt die Schriftgröße des HTML Elements (=Wurzel – Element). Dieses HTML – Element hat – sofern keine Grösse definiert wurde – 16 Pixel. Die Angabe 2em für einen Font bedeutet also, dass er 2 x 16 Pixel gross ist.
Ein Test:
HTML – Code
<p>Basis: Font - Grösse (16px)</p> <p class="em2">Text mit 2em Grösse</p> <p class="pixel32">Text mit 32px Grösse</p>
CSS – Code:
.em2 {font-size: 2em}
.pixel32 {font-size: 32px}
Das Resultat im Browser
Verwendet man 0.75em dann ist die Schrift 0.75 x 16 Pixel also 12 Pixel gross:
In beiden Fällen kann man die em Werte auch einfach in Prozent Werte umrechnen. Zum Beispiel sind 2em hier 200%.
Hinweis:
Für die Größenangaben bei Blockelementen können em – Werte nicht mit Prozent – Werten gleichgesetzt werden.
Bei der Angabe von Abständen mittels Padding oder Margin, bietet sich der em Wert sehr gut an, denn hier kann man die Abstände abhängig von der Schrift definieren.
Um das Umrechnen zwischen Pixel, em und rem (siehe weiter unten) zu erleichtern, gibt es Pixel / em – Umrechner, mit dem ihr – ausgehend von der Eingabe eines Basis Fonts – entweder Pixel in em/rem oder em/rem in Pixel umrechnen könnt.
http://www.w3schools.com/tags/ref_pxtoemconversion.asp
rem (root em)
Eigenschaften der Einheit rem sind:
- Orientiert sich am Stammelement html
- Ist flexible, jedoch mit einem festen Bezugspunkt
- Berechnungs – Formel: ‘Zielgrösse in px / 16 = Wert für rem’
Besipiele für Schriftgrad definieren mit rem:
html { font-size: 100%; } /* Browserdefault, 16px */
h1 { font-size: 1.625rem; } /* 26/16 */
h2 { font-size: 1.375rem; } /* 22/16 */
p { font-size: 0.875rem; } /* 14/16 */
Liste der Schriftgrössen auf Basis von Browserdefault = 16px
| px | rem (Basis 16px) |
| 12px | 0.75rem |
| 13px | 0.8125rem |
| 14px | 0.875rem |
| 15px | 0.9375rem |
| 16px | 1rem |
| 17px | 1.0625rem |
| 18px | 1.125rem |
| 20px | 1.25rem |
| 22px | 1.375rem |
| 24px | 1.5rem |
| 26px | 1.625rem |
| 28px | 1.75rem |
| 30px | 1.875rem |
| 32px | 2 |
Als Vergleich:
Liste der Schriftgrössen auf Basis von Browserdefault = 12px
| 12px | 1em |
| 14px | 1.167em |
| 16px | 1.333em |
| 18px | 1.5em |
| 20px | 1.667em |
| 22px | 1.833em |
| 24px | 2em |
Unterschied em und rem
Hier noch einmal das unterschiedliche Verhalten von zwei verschachtelten Boxen:
Problematik von em bei verschachtelten Elementen
Wie in der obigen Grafik dargestellt, beziehen sich die em (und Prozent) – Angaben immer auf das Eltern – Element. Bei stark verschachtelten Elementen werden die Schriftgrössen schwerer berechenbar.
Hat man zum Beispiel bei einem DIV Element eine CSS Angabe von 2em definiert, dann werden bei einem Basis-Font von 16px alle Schriften innerhalb dieses DIVs 32px gross.
Um das Problem zu demonstrieren, wird im folgenden Beispiel die Basis Font – Größe auf 32 Pixel gesetzt. Für die drei ineinander geschachtelten DIV – Tags wird eine Schriftgrösse von 0.5em angegeben.
HTML Code:
<p>Unverschachtelter Text mit Basis-Font-Grösse </p> <div> <div> <div> Text in verschachtelten DIV Elementen (Grössenangaben pro DIV - Element: 0.5em) </div> </div> </div>
CSS – Code:
html { font-size: 32px; }
div {font-size: 0.5em}
Resultat im Browser:
In diesem Fall ist nun die Schrift innerhalb des innersten DIV-Elements nur noch 4 Pixel und damit kaum erkennbar.
Im Inspector des Browsers kann nachgeprüft werden, dass er den Wert der Schriftgrösse des Textes auf 4px errechnet hat:
Mit der Einheit rem sieht das Beispiel von oben schon wesentlich besser aus: rem bezieht sich immer auf den Basis Font, also jener der im HTML – Element definiert oder standardmässig 16 Pixel ist. Im CSS – Code gibt es eine kleine Anpassung:
CSS – Code:
html { font-size: 32px; }
div {font-size: 0.5rem}
Resultat im Browser:
Der vom Browser errechnete Wert der Schriftgrösse des Textes ist 16px.
Weitere interessante Einheiten
Die Einheiten vw, vh, vmin und vmax sind spezielle Größenangaben, die sich auf den Viewport des Browserfensters beziehen. Somit kann man zum Beispiel Elemente, die immer so gross sind wie das aktuelle Browserfenster realisieren.
Fazit
Welche CSS – Einheit verwendet werden soll, kann nicht abschliessend festgelegt werden. Es hängt immer davon ab, welche Elemente man formatieren will und ob sie sich der Umgebung automatisch anpassen soll oder nicht.
Bei Schriftgrößen sollte man eher em oder rem statt px verwenden.
Bei der Angabe der Ausdehnung von Block-Elementen sind Pixel-Werte möglich. Soll auf verschiedene Gerätegrößen flexibel reagiert werden, sind Prozentwerte vorteilhaft.
Die Verwendung von em und rem bei den Breitenangaben von Block – Elementen ist eher abzuraten. Vorteilhaft kann em / rem bei border, padding und margin sein.