Schriftgröße
logo5

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.