px, pt, em oder % – welche Angabe der Schriftgröße in CSS soll ich verwenden?

Es kam nun schon öfter vor, dass ich gefragt wurde, wo eigentlich die Unterschiede in den verschiedenen Maßen liegen und ob es egal sei, was man verwendet. Es ist gar nicht so schwer, wenn man weiß, welches Schriftmaß wo seine Stärken und seine Schwächen hat.

point (pt) – absolute Schriftgröße
Ein Point entspricht einem Zweiundsiebzigstel Zoll (engl. inch). Ein Mac-System arbeitet üblicherweise mit 72 dots per inch (dpi), womit ein Point die Entsprechung eines Pixels hätte, denn 72 * 1/72 = 1. Auf Windows hingegen arbeitet man mit 96 dpi, dort wäre ein Point also so viel wie 96 * 1/72 = 1.333 Pixel. In der Folge bedeutet dies bei der Verwendung von pt im Web, dass der Apple-User schnell mal eine (spürbar) kleinere Schrift erhält als der Windows-Nutzer. Das klingt marginal, aber bei 12pt beträgt der Unterschied bereits 4px zwischen beiden Systemen. Im Print ist der pt ein gutes Maß, im Web ist davon eher abzuraten. Stellen wir dem Benutzer zum Beispiel für die Druckansicht ein seperates Stylesheet zur Verfügung, empfiehlt sich hier pt.

pixel (px) – absolute Schriftgröße
Ich behaupte einmal, dass px die Einheit ist, auf welche man am Häufigsten im Web stößt. Theoretisch ist auch das Pixel eine absolute Einheit, aber auch nicht so richtig, da ein Pixel je nach Auflösung des Ausgabemediums unterschiedlich groß ist. Das eben angesprochene pt-Problem umgehen wir mit dieser Einheit, ein px ist auf Mac und auf Windows wie auch auf jedem anderen System das selbe, womit diese Einheit geeignet ist, wenn man auf vielen Ausgabemedien die gleiche Darstellung gewährleisten möchte, px führt sehr schnell zu Erfolgen. Ein Problem mit dieser Einheit besteht auf älteren Browsern, wo es nicht möglich ist, px-definierte Schriften in der Größe zu skalieren. Heute beherrscht jeder halbwegs moderne Browser die Veränderung der Schriftgröße unabhängig von der verwendeten Maßeinheit.

em (em) – relative Schriftgröße
Einen ganz anderen Ansatz zur Definition einer Schriftgröße bietet die Einheit em. Diese Einheit definiert sich – wie man oft sagt – durch die Breite des Majuskels „M“ in der dargestellten Schriftart und -größe. Ganz korrekt ist das nicht, genaugenommen bezeichnet ein em die Breite eines Gevierts im Druck. In der Praxis des Webs ist ein em aber ganz einfach die aktuelle Schriftgröße. Gehen wir von 20px für 1em aus, entsprechen 0.8em 16px, denn 20px * 100%/80% = 16px. Man skaliert Schrift in dieser Einheit also immer relativ zum Elternelement. Das W3C empfiehlt die Verwendung dieser Einheit, ich selber verwende ausschließlich em für Schrift.

Ist die Schriftgröße nicht explizit definiert, verwendet der Browser üblicherweise die Standardgröße von 16px. Ein beliebter Trick, ist es, die Standardgröße im body auf 62.5% zu setzen, womit 1em gleichzusetzen mit 10px wäre. Der Grund ist der, dass sich mit 10 leichter rechnen lässt als mit 16. So kann man beispielsweise für eine gewünschte Schriftgröße von 18px die Schrift einfach auf 1.8em setzen. Ganz so einfach ist es dann doch nicht. Browser unterstützen die Einstellung einer Mindestschriftgröße. Was ist, wenn diese über den 62.5% liegt? Dann liegt es am Browser, wie er damit umgeht und das Ergebnis ist je nach Browser sehr unterschiedlich.

Nachtrag: In Bezug auf einen weiter unten stehenden Kommentar möchte ich an dieser Stelle ergänzen, dass auch em nicht ganz unproblematisch ist. So scheint es unter Windows zu einem anderen Zeichenabstand als unter Linux zu kommen, wenn durch die em-Angaben keine ganzzahligen Schriftgrößen verwendet werden.

per cent (%) – relative Schriftgröße
Bei Schriftangaben in % gilt Vorsicht, denn hier kann eine unterschiedliche Interpretation durch verschiedene Browser für Gefahr sorgen, weswegen ich persönlich hiervon nur abraten kann. Eine Schriftgröße von 100% sorgt im Internet Explorer 6 oder auch in einer etwas älteren Opera-Version für eine viel zu kleine Text-Darstellung, 101% schafft in diesem Fall keine Abhilfe, aber sorgt in Safari für eine überdimensionale Schriftgröße. Eine Lösung für dieses Problem ist es, die Schriftgröße im body explizit auf 100.01% zu setzen. Ein weiterer Bug älterer Browserversionen ist es, dass die Schriftgrößen nicht in Tabellenzellen vererbt werden. Gehen wir von einer allgemeinen Schriftgröße von 80% aus, bedingt durch diesen Bug ist die Schrift in der Tabelle nun zu groß. Auf die gleiche Weise wie für den body setzen wir die Schrift für th und td nun folgendermaßen: font-size: 80.01%; Da 80% von 80% 64% sind, ist die Schrift nun natürlich in modernen Browsern zu klein, wir sind also noch nicht fertig. Es folgt dies als zweite Deklaration: f\ont-size: 100.01%; – wir nutzen die Tatsache, dass Browser mit diesem Bug die zweite Deklaration einfach ignorieren.

Keywords
Und dann gibt es auch noch die Keywords. Auch diese lassen sich wieder in die absoluten (xx-small, x-small, small, medium, large, x-large, xx-large) sowie die relativen (smaller, larger) Größen einteilen. Diese sollen sich voneinander jeweils um den Faktor 1.2 unterscheiden und auch wenn eigentlich jeder Browser diese Schlüsselwörter unterstützt, kann man von der Verwendung nur abraten, da die Darstellung in den einzelnen Browsern in der Praxis sehr unterschiedlich ist und es einem selber auch nur wenig Kontrolle über die Schriftgröße gibt. Ein Unterschied zwischen xx-small und x-small ist übrigens oft nicht erkennbar, was kein Fehler, sondern eine Empfehlung des W3C ist.

Der Vollständigkeit halber
Es gibt auch noch einige weitere Einheiten. Dabei sollten die centimeter (cm) wie die milimeter (mm) selbsterklärend sein, dann gibt es auch noch den inch (in), welcher 2.54cm entspricht sowie den pica (pc), der die Entsprechung von 12px hat. Dann gibt es da noch ex, welches die Höhe des kleinen „x“ zum Maßstab hat. Im Web trifft man diese Maßeinheiten aber nahezu gar nicht an.