Typografisches Verständnis

Zunächst benötigen wir ein klein wenig typografisches Verständnis in Bezug auf die Schriftgröße. Viele der Einheiten, die wir in CSS benutzen, beziehen sich auf die Schriftgröße bzw. auf die Größe einzelner Buchstaben:

Liniensystem der Typografie - CodingLab

Bereits in der Schule wurde einem das Schreiben beigebracht, indem man alle Buchstaben auf eine Grundlinie gesetzt hat. Diese gibt es bei der Darstellung von Zeichen am Computer ebenfalls.

Alles was darunter fällt gehört zur Unterlänge und endet bei der p-Linie. Meistens gehören zur Unterlänge die Buchstaben: g, p, q, y.

Den Abschnitt von der Grundlinie bis zur x-Linie nennen wir Mittellänge. In diesem Bereich finden wir Buchstaben, wie zum Beispiel: o, u, n, x.

Der nächste Bereich endet an der h-Linie und grenzt Großbuchstaben ab. Dieser wird auch Oberlänge genannt und sollte nicht mit der k-Linie verwechselt werden, welche die Kleinbuchstaben abgrenzt, die über die Mittellinie hinausgehen: f, d, b, k.

Reden wir nun von der Höhe des Buchstaben "x", können wir uns anhand des oberen Schaubildes ein wenig mehr darunter vorstellen.

Unterschiede der Maßeinheiten

Ein Desing mit CSS zu erstellen, klingt kreativ und tatsächlich ist es das auch. Allerdings braucht der Browser für die richtige Darstellung von Elementen auch ein paar Richtwerte, d.h. Zahlen. Wenn wir also die Breite und Höhe eines Elementes angeben wollen, dann müssen wir der Grafikkarte auch eine tatsächliche Größe mitgeben. Da der Bildschirm aus Pixeln besteht, wird jeder Wert auf diesen umgerechnet. Jedoch heißt das nicht zwangsweise, dass px die beste und einzige Einheit darstellt. Es werden grundlegend zwei Arten von Maßeinheiten unterschieden.

Relative Maßeinheiten

Mit den relativen Maßeinheiten geben wir Größen an, die sich relativ an einem Punkt orientiert. Wenn wir unserem Element beispielsweise eine Breite von 50% zuweisen, dann wird dieses Element immer die Hälfte an Pixeln des Eltern-Elements sein. Ist unser Element an oberster Stelle im HTML-DOM, wird es die Hälfte der Breite des Browserfensters haben.

Der Vorteil der relativen Maßeinheiten besteht darin, dass sich der Benutzer die Webseite anpassen und so am komfortabelsten surfen kann. Aus diesem Grund sollte man diese Einheiten für die Bildschirmausgabe verwenden. Im Folgenden sind alle absoluten Maßeinheiten aufgeführt:

MaßeinheitBeschreibung
*Viewport ist bei Computern das Browserfenster und bei Smartphones i.d.R. der Bildschirm.
emRelativ zur Schriftgröße des Elements, wobei 2em die doppelte und 3em die dreifache Schriftgröße bedeutet.
remRelativ zur Schriftgröße des Root-Elements, wobei 2rem die doppelte und 3em die dreifache Schriftgröße des Root-Elements bedeutet.
exRelativ zur Höhe des Buchstaben "x", bzw. Abstand von Grundlinie zur x-Linie.
chRelativ zur Breite des Buchstaben "0" (Null).
vw1 Prozent der Breite des *Viewports.
vh1 Prozent der Höhe des *Viewports.
vmin1 Prozent von der Breite oder Höhe des *Viewports. Hierbei werden die Höhe und Breite des Viewports verglichen und der kleinere Wert genommen.
vmax1 Prozent von der Breite oder Höhe des *Viewports. Hierbei werden die Höhe und Breite des Viewports verglichen und der größere Wert genommen.
%prozentual relativ zum Elternelement.

Absolute Maßeinheiten

Die absoluten Maßeinheiten sind realitätsnahe Werte, unter denen wir uns auf jeden Fall etwas vorstellen können. Einen Pixel am Bildschirm kann man klar erkennen, wenn man näher herangeht oder eine Lupe benutzt und wie lang ein Zentimeter ist, wissen wir in der Regel auch.

Da wir mit absoluten Einheiten also keine Abschätzungen mehr machen müssen, werden diese auch gerne für Drucklayouts verwendet. Der Drucker profitiert ebenfalls davon, denn eine Schriftgröße em muss zunächst berechnet werden. Wie groß der Drucker jedoch einen Punkt pt auf einem DIN-A4 Blatt darstellen soll, weiß er ganz genau. Im Folgenden sind alle absoluten Maßeinheiten aufgeführt:

MaßeinheitName
Ein Pixel stellt lediglich bei low-dpi Geräten einen Bildschirmpunkt dar. Bei Druckern und Bildschirmen mit großer Auflösung stellen manchmal mehrere Bildschirmpunkte einen Pixel dar.
cmcentimeter (Zentimeter)
mmmillimeter (Millimeter)
ininch (Zoll)
pxpixel (*Pixel)
ptpoint (Punkt)
pcpicas (typografische Maßeinheit)

Schlüsselwörter

Ebenfalls gibt es in CSS vordefinierte Größen, die wir mithilfe von Schlüsselwörter als Wert benuthen können. Hierbei werden drei Gruppen unterschieden:

  • Klein (xx-small, x-small, small)
  • Mittel (medium)
  • Groß (large, x-large, xx-large)

Das Schlüsselwort medium ist die voreingestellte Schriftgröße des Browsers. Passend dazu kann man die Größe also kleiner oder größer skalieren.