Schriftgröße in px oder em?

Ich spreche heut wieder mal ein Thema an, von dem ich dachte, dass es eigentlich schon vor langer Zeit in diverse x-Dinge-die-man-nicht-macht-Listen aufgenommen wurde. Die Rede ist von Schriftgrößen auf Webseiten und ob diese in der Einheit px angegeben werden sollten.

Die BITV fordert ganz allgemein die Verwendung von relativen statt absoluten Einheiten. Ein Blick in die Spezifikation verrät, dass in CSS die Einheit px als relative Einheit zu verstehen ist. Logisch, denn wenn ich auf einen 15" Flachbildschirm 1024×768 Bildpunkte aber auch 1400×1050 Bildpunkte unterbekomme, dann muss der Platz pro Bildpunkt von Gerät zu Gerät unterschiedlich sein. Soweit die Theorie die sagt, px als Einheit ist okay für die Angabe der Schriftgröße. In der Praxis offenbaren sich dann doch einige Probleme, die ich hier demonstrieren will.

Als Testobjekt dient dieses HTML Dokument, dessen Quelltext im wesentlichen so aussieht:

<style type="text/css">
	body {
		font-size: 100%;
		line-height: 1.5;
	}
	h1 {
		font-size: 2em;
	}
	h2 {
		font-size: 32px;
	}
	h3 {
		font-size: 1em;
	}
	h4 {
		font-size: 16px;
	}
	h5 {    
		font-size:. 8em;
	}
	h6 {
		font-size: 13px;
	}
</style>
	<h1>Text mit 2em Schriftgröße</h1>
	<h2>Text mit 32px Schriftgröße</h2>
	<h3>Text mit 1em Schriftgröße</h3>
	<h4>Text mit 16px Schriftgröße</h4>
	<h5>Text mit .8em Schriftgröße</h5>
	<h6>Text mit 13px Schriftgröße</h6>

Anschauen werde ich die Seite unter WinXP, bei einer Bildschirmauflösung von 1400×1050 mit Firefox 2, Opera 9.6, InternetExplorer 6-8 und Safari 3, sowie unter Vista, 1280×800 mit Firefox 3.5 und IE8 jeweils bei einem im Browser eingestellten Schriftgrößengrad von ›16‹ (also die Standardeinstellung der meisten Browser).

Auf Grund der 100%-Schriftgröße für den Body, die sich auf die im Browser eingestellte Schriftgröße bezieht, sind die jeweiligen Wortgruppen annähernd gleich groß (1em entspricht hier 16px). Mit Ausnahme aller Versionen des InternetExplorers werden bei reiner Schriftvergrößerung alle Texte gleichermaßen vergrößert. Der IE8 und Opera, aber auch Firefox ab Version 3 bieten zusätzlich noch eine komplette Zoomfunktion, die die gesamte Seite proportional vergrößert/verkleinert.

Soweit so gut. Was passiert aber, wenn ich von der Möglichkeit gebrauch mache, mir die Schriftgröße auf ein für mich optimales Maß im Browser voreinzustellen, z.B. auf 20? Hier zeigt sich das Problem der einheit px: der Text ist festzementiert auf die Größe, die im Stylesheet der Seite steht. Der Schriftgrad in der Browsereinstellung wird schlicht ignoriert. Als Besucher muss ich also erstmal am Mausrad drehen, oder auf die Plus-Taste drücken, um die Schrift zu vergrößern.

Jeder bessere Browser bietet außerdem die Möglichkeit an, eine Mindestschriftgröße festzulegen, die dann nicht mehr ignoriert werden kann. Diese stellt, wenn sie denn überhaupt eingestellt ist, meist die unterste Schmerzgrenze dar, unter der absolut nichts mehr geht, und die für Fließtext eigentlich schon zu klein ist. Spätestens da ist dann Schluss mit den Pixelschriftgrößen. Im schlimmsten Fall verspielt man so die Möglichkeit mit Schriftgrößenunterschieden auf der Seite zu arbeiten, wenn man mit seinen Schriftgrößen unterhalb der Mindestgröße agiert.

Aus diesen Gründen kann ich nur dringend davon abraten, Schriftgrößen in px anzugeben. Ansonsten drängt man den Besucher, zu erst zu Zoomen, um den Text lesen zu können. Dabei ist es unerheblich ob nun reiner Textzoom oder der komplette Seitenzoom eingesetzt wird.

Meine Herangehensweise sieht so aus, dass ich für den Body einen Prozentwert um 100 angebe (von mir aus auch 100.01% für die älteren IEs). Überschriften und große Texte werden dann im Bereich 1.4 bis 2em bemaßt, Fließtest zwischen 1.1 und .85em und Fußnoten .9 bis .8em. Dabei kann man durchaus sehr Genau arbeiten, da die Einheit em bis auf die vierte Nachkommastelle genau angegeben werden kann. Ich richte meine Schriftgröße nur so lang am Design aus, wie es mir die Bemaßung in em erlaubt und bin damit bisher immer gut gefahren, auf Pixelgenauigkeit achte ich auch sonst eher selten. Viel wichtiger sind optimale Zeilenlängen und vor allem ein ausreichender Zeilenabstand. Der Besucher sollte, unabhängig von seinen gewählten Einstellungen, ein lesbares Schriftbild vorfinden. Ihm diese Freiheit zu lassen, muss nicht im Widerspruch zu gutem und detailiertem Design stehen, man muss es nur berücksichtigen.

Kommentare

Es wurden noch keine Kommentarte zu diesem Artikel geschrieben.

Fragen, Ideen oder Kritik? – Hier ist Platz dafür!

Dein Kommentar

Um ein Kommentar abzugeben, reicht der Text im Kommentarfeld. Die Angabe eines Namens wäre nett, ist aber nicht erforderlich.

Du darfst folgenden HTML-Code verwenden, musst aber nicht:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>