11.08.05Schriftgrößen, SCHRIFTGRÖSSEN, schriftgrößen
Wieder einmal wurde Lesern einer Zeitschrift u.a. fixe Schriftgrößen für Websites vorgelegt, ohne darauf hinzuweisen, dass diese nicht verwendet werden sollten. Daher ein kleiner kompakter Schriftgrößenguide - aus gegebenem Anlass.
Was man nie tun darf
Schriftgrößen werden nicht in absoluten Maßeinheiten angegeben. Auch wenn moderne Browser (fast alle außer dem IE) in der Lage sind, diese flexibel zu vergrößern und verkleinern, wenn das der Surfer möchte.
Falsch
- px (Pixel)
- Die Schriftgröße festzumeißeln ist Stammgast in der Top 10 der größten Webdesignsünden. Im Internet Explorer können Besucher nicht die Schriftgröße verändern. Außerdem gibt es Probleme bei der Größenberechnung zwischen verschiedenen Systemen.
- pt (Punkte)
- Eigentlich noch falscher, da diese Einheit wirklich nur für den Einsatz in Printmedien gedacht ist. Im Internet wird nichts gedruckt.
FLExibLE gRößen
Schriftgrößen moderner Websites sind flexibel und richten sich nach dem Standardwert. D.h. dem Wert, den der Benutzer in seinen Browsereinstellungen festgelegt hat. Hingegen anderer Meinungen denke ich, dass man nicht immer gleich die Standardschriftgröße anbieten muss. Der Text kann auch etwas kleiner sein, da das auch oft einfach besser aussieht. Nur eben sollten die Leser die Möglichkeit haben, die Schriftgröße bei Sehproblemen zu vergrößern. Dann ist das eigentlich gar kein Problem.
Richtig
- Prozent (%)
- Die Größe der Schrift liegt dann bei x Prozent der Standardschriftgröße und lässt sich flexibel einstellen.
- em
- Die zweite flexible Wahl. 1em entspricht 100%
Beide relativen Maßeinheiten haben Vor- und Nachteile. Ich verwende prozentuale Werte, da der 5.xx Probleme mit em hat und die Schrift dann schlecht skaliert und bei Vergrößerung sogar das Layout einer Website "zerschießen" kann. Der Browser hat scheinbar Probleme damit und stellt bei Vergrößerung gleich eine extrem große Schrift ein, die in keinem Verhältnis steht. Deshalb Prozent als Größenmaß. Dabei verhält er sich angemessen beim Skalieren. Auch kann es passieren, dass Schriften die in em definiert wurden im IE winzig klein dargestellt werden, was auch auf einen Interpretationsfehler zurückzuführen ist. Die sichere Wahl sind also Prozentangaben für Schriftgrößen.
Um Problemen vorzubeugen sollte man sich bewusst machen, was flexibel oder relativ bedeutet und auch den CSS-Vererbungsmechanismus beachten. Denn hat man etwa in CSS für das body-Element eine Schriftgröße von 85% gewählt und möchte natürlich, dass Überschriften größer dargestellt werden als normaler Text, darf man nicht den Fehler machen und z.B. 90% wählen. Weil 90 ja größer 85 ist. Dann hat die Schrift nämlich eine Größe von 0,85*0,90 also etwa 77% der Standardschriftgröße. Also kleiner (extrem klein) als die normalen Texte auf der Website. Man muss also für Schriftgrößen bestimmter Elemente, die größer sein sollen mit Werten oberhalb 100% bzw. 1em operieren.
Kleines Beispiel
body {
font-size: 90%;
}
h1 {
font-size: 120%;
}
H1-Überschriften hätten dann eine Schriftgröße von 0,9*1,2 bzw. 108% der Standardschriftgröße.
Das war ein kleiner Überblick zum Thema Schriftgrößen. Schriftgrößen und Schriften im Web allgemein sind ein sehr ausgiebiges Thema. Dieser Überblick sollte kurz schildern, warum flexible Schriftgrößen die bessere Wahl sind und wie man sie anwendet. Hier sind noch Links zu zwei älteren Artikeln zum Thema flexible Schriftgrößen.
Frank am Aug 11, 2005 | Reply
nicht ganz richtig. Ich drucke mir oft Seiten aus, um diese besser zu lesen. Deshalb auch Danke an das Print-Stylesheet, welches du hinterlegt hast. Allerdings ist da die Verwendng von pt schon angebracht.
Liebe Grüsse Frank
bs am Aug 11, 2005 | Reply
Danke Frank, daran hab ich in der Eile gar nicht gedacht und auch bei meinem Druck-Stylesheet gleich noch was geändert.
Thorben Kühl am Aug 12, 2005 | Reply
Ich habe nur einen Einwand - die Browser-Funktion “Schriftgard” finde ich weniger gebräuchlich.
Eher sollte im Kontext “Schrift größer” und “Schrift kleiner” angeboten werden, was ja auch schon einige machen. So läßt sich das gleich ein wenig steuern, ohne dass einem gleich das Layout “um die Ohren fliegt”.
Jeena Paradies am Aug 17, 2005 | Reply
Thorben am Aug 21, 2005 | Reply
Ich dachte mehr an eine Lösung auf PHP-Basis, wo möglichst wenig vom Browser (aufgrund der vielen Tücken) verlangt wird.
Sollte ich da falsch liegen?
CT am Mrz 19, 2006 | Reply
Diese Diskussion wird doch schon seit Jahren geführt und mal wieder ist jemand der Meinung, dass er die korrekte Lösung hat, na super.
Für media=screen sind theoretisch em, % und px sinnvoll, über erstere muss ich mich wohl nicht streiten, wobei meiner Meinung nach für Standard-Absatztext andere Angaben als 1em/100% absolut tabu sein sollten, dies ergibt einfach keinen Sinn.
Nun zu px: Ein Design für ein auf Pixel basierendes Ausgabegerät (media=screen, projection) kann sehr wohl auch Pixel benutzen. Im praktischen Fall ist es derzeit nicht die beste Wahl, da das Schriftgrößen-Anpassen dann im IE nicht möglich ist. Langfristig aber ist dies kein Tabu - der IE7 bringt eine ordentliche Zoom-Funktion mit und damit wird dann hoffentlich über kurz oder lang das Komplett-Zooming, wie es Opera seit 10 Jahren anbietet in den Browsern Standard, ich denke, dass Firefox da nachziehen wird.
Spätestens dann und wenn man genügend alternative Stylesheets für Aural und Print mitliefert, ist px gleichberechtigt mit em und %.
wahsaga am Mrz 23, 2006 | Reply
Da hat es sich doch als Workaround bewährt, für html eine font-size von 100.1% (bzw. 100.01%, weil ersters in manchen Safari-Versionen Probleme machte) anzugeben - und “darunter” kann man dann wieder mit em weitermachen.
Bei der 100.01%-Methode ebenfalls.
Xentonix am Apr 19, 2006 | Reply
sehr gut erklärt, habe es gleich mal ausprobiert und es funktioniert einwandfrei. Man muss bei CSS wirklich umdenken ^^
Stone am Mai 10, 2006 | Reply
px sind NICHT falsch. px sind eine relative Grösseneinheit, siehe W3C CSS-Spezifikation
Der einzige Fehler von px ist, dass die die IE WIN-Versionen