CSS – Font Size

CSS Einheiten – das personifizierte Böse ? Ich werde versuchen etwas Licht ins Dunkel zu bringen, allerdings wurde auch zu diesem Thema schon genug geschrieben, so dass ich versuche die Anwendung mehr zu erläutern. Im Prinzip geht es nur um die Frage relativ gegen absolute. Als ich diese Seite mit den Webdeveloper Tools von Firefox überprüfte, zeigte sich schnell, dass die Block-Level Elemente sehr unsauber (=unlogisch) positioniert sind. Ich versuchte dies zu verbessern, mit dem Ergebnis, das ich alles so belassen habe, da ein größeres Problem die Sache zu riskant macht.

Feste Breite

Wie wohl kaum zu übersehen ist, liegt hier ein Design, mit einer festen Breite vor, was bedeutet, dass ich der äußersten DIV eine feste Breite von 724px gegeben habe. 724px ist eine absolute Einheit. Mein Fehler war, später andere Elemente z.B. das p-Tag, bei ihrer horizontalen Positionierung relativ formatiert zu haben und zwar mit der Einheit em. Hier also die erste These des Artikels: Man sollte es vermeiden, bei Layouts mit fester Breite, relative horizontal Positionsangaben zu machen (padding/margin-left/right).

Relativ?

Wie funktionieren relative Einheiten ? Jede Einheit die relativ angegeben wird, sucht in ihrem Elternelement nach einer absoluten Angabe. Ist dort keine Angabe, dann wird eine Ebene weiter drüber gesucht. Dies geht bis zum letzten Tag, dem body-Tag. Daraus ergeben sich nun sowohl Vor- als auch Nachteile. Sofern ich alles relativ abmesse, kann ich durch eine einzige Angabe später das gesamte Layout verändern und muss nicht jedes einzelne Element wieder anfassen – ein Riesenvorteil. Allerdings sollte man sich dafür Elemente aussuchen, die mit einer relativen Angabe Sinn machen und da kommt hauptsächlich die Schriftformatierung in Frage.

font-size

Aus der Typografie kommt die Einheit her und nur hier gehört sie in meinen Augen auch bei CSS hin. Wieso sollte man nun ems statt der üblichen Pixel (px) Angaben nutzen. In meinen ist es logischer bei Schriftgrößen relativ zu arbeiten. Einige Browser lassen Textzoom nur bei Text mit relativer Größe zu. Mit absoluten Angaben blockiert man hier eine Funktion der Benutzer.

Relative Angaben sind unabhängig vom Ausgabegerät, im Gegensatz zu Pixel Angaben. 12 px sind immer 12px egal auf welcher Anzeige. 0.8 em sind aber halt nicht immer 12px, denn relative Angaben skalieren je nach Auflösung bzw. je nach Quellgröße. Bestes Beispiel ist der dpi(Dots per Inch) Unterschied bei der Darstellung von Text auf einem Mac und einem PC. Moderne PCs arbeiten bei der Darstellung mit 96dpi, Macs dagegen mit 72dpi. Im Gegensatz zur Auflösung beim Druck, bringen mehr dpi bei der Bildschirm Darstellung keine feineren Konturen, der Grund hierfür ist, dass sich Monitore in der Lochmaske kaum mehr unterscheiden. Die Feinheit der Monitore ist grob gesagt fast immer gleich, das Ergebnis daraus, Mac und PC stellen absolute Größen unterschiedlich groß dar. Hier nun spielen relative Angaben ihre Stärke aus.

Die Frage die nun kommen muss: Wieso stellt man dann nicht sämtliche Größen relativ dar ? Im Prinzip wär das möglich und ideal, nur sofern man mit Bildern arbeitet die in Pixeln vorliegen kommt man um Pixelgrößen als Maße für DIVs nicht drum herum. Die Größe em gibt es leider in Photoshop nicht, und wird es auch so schnell nicht geben ;o). Dahei bleiben absolute Angaben in Pixeln für DIV Größen und Positionen erste Wahl, genauso wie relative Werte bei Schrift geeigneter sind.

Also wie groß ist 1em ?

Genau das bestimmt man im body-Tag. Mit font-size im body-Tag legt man fest, wie groß 1em ist.

body {
font-size: 20px
}

In diesem Beispiel wär 1em also genau 20px groß/lang, was auch immer. Ein DIV mit den Maßen 3em hoch und 4em breit, wär somit genau 60px hoch und 80px breit. Definiert man keine font-size im body, dann scheint ein 1em genau 16px zu betragen, zumindestens konnte ich das nach ein paar Tests festellen. Wenn also kein font-size im body festgelegt wird, dann gilt wohl:

font-size: 1em = 16px;

Jetzt die spannende Frage welche Größe ideal für das body-Tag ist. Hier empfehlen viele Seiten den Wert 0.8em. Was ein relativer Wert der relative Werte bestimmt ? Exakt so ist es. 0.8em sind auf fast allen Browsern gleich groß entspricht 11px und stellt somit eine zu empfehlende Basis dar. Wer davon ausgehend, den Rest der Font Größen bestimmt, fährt relativ sicher. Da das p-Tag zu 99% immer ein Child-Element darstellt, und ich oben schrieb, dass relative Werte erst im Eleternelement nach einer Basisgröße suchen, sind ein paar kleine einfache Demonstrationen möglich.

Diese DIV beinhaltet als style Element <style=“ font-size: 3em“>. Der Text innerhalb der DIV ist mit <style=“ font-size: .5em“> definiert.

Diese DIV beinhaltet als style Element <style=“ font-size: 2em“> . Der Text innerhalb der DIV ist mit <style=“ font-size: .5em“> definiert.

Diese DIV beinhaltet als style Element <style=“ font-size: 1.5em“>. Der Text innerhalb der DIV ist mit <style=“ font-size: .5em“> definiert. Die Texte innerhalb der 3 DIVs sind alle gleich formatiert nur die Elternlemente nicht, deshalb sind auch die Texte unterschiedlich groß, weil die Texte in relativer Größe angelegt sind..

Fazit

Für Fontgrößen im Webdesign ist die Einheit em eigentlich nicht viel anders als eine Prozent-Angabe. Der Vorteil von beiden Varianten ist die Skalierung mit dem Elternelement. Absolute Angaben sind immer statisch, relative sind es nicht. Wer relative Einheiten gekonnt anwendet kann viel Zeit sparen. Eine kleine Veränderung am body-tag und alle relativen Fontgrößen ändern sich automatisch mit. Mit Pixelwerten ist dies schlichtweg nicht möglich.

Zum Abschluss noch etwas zum Schmunzeln. Hier ein paar weitere Einheiten, die aber bis heute nicht so recht den Durchbruch geschafft haben.

<humor>
Lesser-known units for presentation factors:
aitch = area covered by capital H, corner to corner
el = width of lower-case L, used for converting aitch to linear inch
pica = 1/6 of an inch
point = 1/12 of a pica
twip = 1/20th of a point, 1/1440th of an inch
twit = moron who came up with pica, point, and twip
gee = basic unit of surprise
oh = null or zero content measure
gates = random units of consumer impact, applied as
capricious constants to measures of monopolistic scope,
variable depending on audience
ess = jerk in charge - "He's a capital ess."
ess-oh = null-content ess - "He's a real ess-ohh."
ay-oh-el = null-content corporation evolved from creative bookkeeping