Maße für Schriftgrößen, Breiten und Höhen
Das Vielerlei kommt dem responsiven Layout von Webseiten entgegen, aber das Verhältnis zwischen der Auflösung des Viewports und den Angaben von Breite, Höhe und Schriftgröße ist alles andere als entspannt.
CSS arbeitet mit Schriftgrößen in px, %, ems oder mit Schlüsselwörtern wie small oder larger.
Relativ
em, ex, rem, %, vh, vw, vmin, vmax, smaller, larger
Absolut
px, xx-small, x-small, small, medium, large, x-large, xx-large
Dazu kommen Maßeinheiten wie cm, inch, mm, pt und pc, die sich für die Wiedergabe auf dem Monitor nicht eignen, sondern für den Druck gedacht sind.
Responsive Schriftgrößen
px, em, ex, rem und % eignen sich für die Ausgabe auf dem Monitor am besten. px war bis zum Erscheinen der mobilen Geräte und hochauflösender Monitore ein exaktes Maß. Für responsive Webseiten bevorzugen wir heute em und rem.
vw und vh
vw und vh wirken auf den ersten Blick redundant, denn wir haben ja schon width: 50%. Auf der einen Seite können wir width und height nicht auf Schriftgrößen anwenden (font-size: 50% bezieht sich auf die Größe der Schrift und ist nicht relativ zur Größe des Viewports), auf der anderen Seite hat immer schon ein stabiles Maß für die Höhe des Browserfensters gefehlt.
Gerade Überschriften und Seitentitel müssen häufig durch viele Media Queries angepasst werden. vw passt z.B. die Schriftgröße an und berücksichtigt dabei die Größe des ViewPorts oder Browserfenster.
ch – Wie breit ist die Null?
Und noch ein ziemlich neues Maß: ch ist ein Maß für die Breite des Zeichens 0 des aktuellen Fonts. Nehmen wir eine nicht proportionale Schrift (alle Zeichen gleich breit) und setzen die Breite auf 70ch – width: 70ch –, wird die Breite des Blocks 70 Zeichen der aktuellen Schrift betragen. Bei Proportionalschriften sind die Zeichen unterschiedlich breit (ein i ist nichts gegen ein m), aber mit einer Breite von 70ch kommen wir einer optimalen Breite für die Lesbarkeit des Lauftexts näher als mit Angaben in em oder px.
Mehr zu ch Kleine Diskussion der Schriftgröße ch auf meyerweb.com
cap – Wie hoch ist der Großbuchstabe?
Und noch ein neues Maß: cap ist die Höhe der Versalien – Großbuchstaben – der Schrift.
READ THE MANUAL!
OBI WEB KENOBI
Das ist eine Maßeinheit für alle, die den Text in Spalten bündig an der oberen Kante halten wollen.
Absolute Einheiten
Absolute Größen in Zentimetern oder Millimetern sind für den Druck gedacht, denn CSS steuert auch den Druck der Webseite.
| cm Zentimeter | Absolut Als Maßeinheit geeignet für den Druck. |
| in Inch (2,54 Zentimeter) | Absolut Als Maßeinheit geeignet für den Druck. |
| mm Millimeter | Absolut Als Maßeinheit geeignet für den Druck. |
| pt Punkt (1/72 Inch) | Absolut Typografische Maßeinheit, geeignet für den Druck. |
| pc Pica. Ein Pica entspricht 12 Punkt. | Absolut Typografische Maßeinheit, geeignet für den Druck. |
Auflösung und Größe des Monitors
Da Auflösung und Größe der Monitore vom Smartphone über das Tablett bis zum 30"-Monitor immer weiter spannt, ist ein konsistentes Layout mit der Wahl der Schriftgrößen auf Media Querys angewiesen.
Media Querys basieren fast immer entweder auf Pixelbasis oder auf Basis von em. Die modernen Browser machen keinen Unterschied zwischen em-basierten and Pixel-basierten Media Queries – beide Techniken zoomen korrekt und beide Techniken verarbeiten Media Querys gleich schnell.
Die Angabe von em für die Abmessung von Layout-Elementen ist allerdings besonders flexibel. Wird ein Block in em angelegt, reicht schon eine CSS-Regel in der Media Query, um den Block proportional zu vergrößern.
header h1 {
font-size: 1.2em;
width: 9em;
background-color: red;
color:white;
padding: 0.5ex 1ex;
box-sizing: border-box;
line-height: 1.3em;
}
@media (min-width: 40em) {
header h1 {
font-size: 2.4em
}
}
Der h1-Block wird immer proportional skaliert – d.h., in beiden Breakpoints wird der Text gleich weit laufen und an derselben Stelle umbrechen. Selbst wenn der Benutzer die Schriftgröße ändert, behält der Block die Proportionen und der Text wird nicht an einer anderen Stelle umbrechen.
Wenn die Schriftgröße des Elements in Pixeln angegeben würde, müsste der Block für jeden Breakpoint neu eingerichtet werden, gleich ob er in em oder Pixel notiert wäre.
| Abkürzung | Absolut Relativ Typische Anwendung |
|---|---|
| px Pixel | Absolut / Relativ Ein Pixel beschreibt die kleinste Ausgabeeinheit eines Monitors und ist relativ von Ausgabegerät zu Ausgabegerät. Auf den einzelnen Monitor bezogen ist die Angabe von Pixeln ein absolutes Maß. Pixel sind ein geeignetes Maß, um Schriftgrößen und die Abmessungen von Elementen für den Monitor festzulegen. Pixel sind unabhängig von der CSS-Kaskade. |
| em EMS | Relativ bezieht sich auf die Schriftgröße eines Elements. Für ein flexibles Layout, dass sich anpasst, wenn der Benutzer die Schriftgröße im Browserfenster ändert, ist em als Maßeinheit für Schriften und Layout-Boxen besser geeignet als Pixel. em reagiert auf die CSS-Kaskade. |
| ex EX | Relativ wie EMS, aber ex steht für die Größe des Kleinbuchstabens in einem Element – i.d.R. also etwa die Hälfte von em. |
| % Prozent | Relativ Prozentangaben eignen sich besonders gut für die Ausgabe auf dem Monitor, wenn Layoutelemente an verschiedene Monitorgrößen angepaßt werden sollen. |
Tatsächliche Größen prüfen
Elemente untersuchen ist heute eine Funktion in allen Browsern. Wenn wir also wissen wollen, wie groß, wie hoch oder breit ein Element ist, gibt die Konsole des Browsers nicht nur die aktuellen Maße heraus, sondern zeigt auch, wie Vererbung und CSS-Cascade zur aktuellen Größe geführt haben.
font-size: 1.2em; width: 9em; background-color: hsl(357, 70%, 60%); color: white; padding: 0.5ex 1ex; box-sizing: border-box; line-height: 1.3em; margin: 1em auto;
Das Element hat einige Eigenschaften vom body-Element überschrieben und zusätzliche CSS-Eigenschaften vom body-Element geerbt
padding: 0;margin: 0;line-height: 1.46;color: #5a5a5a;font-size: 108%;font-family: "Open Sans", sans-serif; font-weight: 300
