textpattern resources [ge]

Zum Thema Schriftgrößen gibt es im Web unmengen von Artikeln. Welcher Ansatz ist davon aber übergreifend brauchbar? Welche Schriftangaben können zentral im CSS gesetzt werden, damit die Schriftgröße in allen Browsern (fast) einheitlich dargestellt werden und gleichzeitig auch in allen Browsern skaliert werden können?
Die native Größenangabe für den Screen wären Pixel. Doch Schriftangaben in Pixel kann der IE nicht skalieren. Daher kämen eher % oder em in Betracht.

Zunächst gilt, dass eine Schriftgröße von 100% in vielen Browsern ungefähr einer Schriftgröße von 16px entspricht. Umgerechnet entsprechen 62,5% damit einer Schriftgröße von etwa 10px.
Eine Ausnahme von der Regel ist der Safari, der bei 100% die Schrift mit ca. 14px anzeigt. 62,5% wären daher kleiner als 10px.
Um bei allen Browsern, inkl. Safari, eine zentrale Schriftgröße von 10px zu erzielen, kann man diesen CSS Code verwenden:

body {
font-size: 62.5%; // Für IE
}

html>body {
font-size: 10px; // IE kann das nicht verstehen
}

Im Weiteren kann nun die Schriftangabe mit em gestaltet werden. Dabei entspricht 1em nun 10px. em ist eine relative Größenangabe. Sie bezieht sich immer auf die Größenangabe des vorhergehenden Elternelements. 1.2 em würden 120% von 10px also 12px ergeben.

Der Vorteil dieses Ansatzes ist daneben auch, dass die Schriftgröße nun zentral im body tag verwaltet werden kann.

Der Artikel ist ein Extrakt des Artikels zur Schriftgröße auf clagnut.com teilweise auf Deutsch zu lesen auf webpropaganda: CSS basteln: Schriftgrösse