Inhalt

Schrift muss skalierbar sein

Ein vielfach auftretendes Problem im Webdesign ist die Wahl der richtigen Schriftgröße. Viele Nutzer benutzen eigene Einstellungen für Schriftgröße, um Seiten auf ihre persönlichen Bedürfnisse anzupassen. Für Designer heißt das, dass die Schrift, so wie sie mir angezeigt wird nicht unbedingt dem entspricht, wie sie beim Benutzer erscheint.

Dies liegt nicht nur an unterschiedlichen Auflösungen, die von Benutzer zu Benutzer unterschiedlich sein können, sondern auch an den Einstellungen der Browser der Benutzer. So können Nutzer zum Beispiel unterschiedliche Schriftgrade im Browser einstellen (wie in der ersten Abbildung zu sehen), Abbildung der Schriftgradumstellung im Internet Explorer eine Mindestgröße für Schriften festlegen, definierte Schriftgrößen ignorieren (z.B. im Menu "Extras->Einstellungen" im Firefox, wie in der zweiten Abbildung zu sehen)Abbildung, wie im Firefox Schriftgrößen ignoriert werden können oder eigene Nutzer-Stylesheets mit eigenen Schriftgrößen verwenden.

Aus diesen Gründen sollten Schriften nicht absolut, also über Pixelangaben im Stylesheet, definiert werden. Besser ist eine Definition über relative Angaben wie zum Beispiel "em" und Prozent.

"Em" steht hier für die Breite des Buchstaben "M" in der dargestellten Schriftart und Schrfitgröße. Dies bedeutet, dass in "em" angegebene Schriftgrößen immer von den Einstellungen des Endbenutzers abhängig sind, da sie sich an der Größe des bei ihm angezeigten "M" orientieren. Ähnliches gilt für die Angabe in Prozent. Diese bezieht sich zunächst einmal auf die im Browser eingestellte Schriftgröße. Ist hier also die Schriftgröße 18px eingestellt, so entsprechen 100% genau diesen 16 Pixel.

Weiterhin bleibt noch zu sagen, dass sich die angesprochenen relativen Angaben der Schriftgröße auf die Größe der Schrift im Elternelement beziehen, was sich bei geschachtelten Elementen weiterhin auf die Darstellung auswirkt. Wenn also ein p-Element mit einer Schriftgröße von 90% in einem div-Element auftaucht, dessen Schriftgröße zuvor ebenfalls auf 90% gesetzt wurde, so hat das p-Element eine Schriftgröße von 90% der Schriftgröße des div-Elements. Dies bedeutet, dass bei einer beim Endnutzer eingestellten Schriftgröße von 20 Pixel die Schrift im div-Element mit 18px angezeigt wird und die Schrift im p-Element mit 16,2px.

Hier einmal eine Beispieldefinition im CSS:

p { font-size: 0.9em; }