Die "richtige" Schriftgrösse
Grössenangaben können in HTML sowohl relativ (in Abhängigkeit vom Kontext) als auch absolut (unabhängig vom Kontext) angegeben werden.
Im Kontext eines Ausgabemediums fester physischer Grösse (z.B., ein Blatt Papier im DIN A4 Format) können absolute Einheiten sinnvoll sein, mit denen man auch das Ausgabemedium beschreiben kann, dies wäre z.B. 'cm'. In einem anderen Kontext, der Relation zu einer Bitmapgrafik beispielsweise, die sich in 'px' definiert, können 'px' sinnvoll sein.
Dagegen ist die Wahl der absolute Längen für die Bildschirmausgabe schädlich und unnötig; es kann unter Umständen dazu führen, daß der Browser keinerlei Skalierung mehr durchführt und die Webseite z.B. für Sehbehinderte praktisch unlesbar wird.
Mit anderen Worten ist die Wahl der "richtigen" Schriftgrösse nur in Abhängigkeit vom Kontext zu treffen!
Beispiele
<link href="print.css" media="print" type="text/css" /> <link href="screen.css" media="screen" type="text/css" /> <link href="speaker.css" rel="stylesheet" media="aural" />
usw.
Mit CSS3 soll es sogar möglich sein, das Ausgabemedium mit Abfragen (Media Queries) zu ermitteln, um ein passendes Style Sheet anzubieten:
<link rel="stylesheet" media="screen and (color)" href="http://www.example.com/color" />
Welche Möglichkeiten gibt es, Schriftgrössen in CSS anzugeben?
Beispiele
Absolute Längen
H1 { font-size: 10pt }
H1 { font-size: 1pc }
H1 { font-size: 0.5cm }
H1 { font-size: 20mm }
H1 { font-size: 1in }
Schlüsselwörter
H1 { font-size: x-large }
H1 { font-size: larger }
Prozente
H1 { font-size: 125% }
Relative Längen
H1 { font-size: 1.1ex }
H1 { font-size: 110% }
H1 { font-size: 1.5em }
Absolute Längen
Absolute Längen zu benutzen ist nur dann sinnvoll, wenn die physikalischen Gegebenheiten des Ausgabemediums bekannt sind, also zum Beispiel die Aussmasse eines Blatt Papiers.
Punkte (pt) und Pica (pc)
Punkte und Pica sind die typographischen Masseinheiten (1 Punkt entspricht 1/72 Inches, 1 Pica entspricht 12 Punkte), mit der Designer am ehesten vertraut sind, da besonders Printmedien vor allem mit dieser Einheit arbeiten.
Points sind im Web aber bedeutungslos - sie sind eine Einheit für den Druck, nicht für den Bildschirm. Um Punkte auf dem Bildschirm darstellen zu können, müssen sie in Pixel umgerechnet werden. Dies geschieht anhand der ppi Zahl (Pixel Pro Zoll). Diese Zahl kann sehr unterschiedlich sein.
Auf Windows Systemen kann man sie konfigurieren, bei "kleinen Schriftarten" sind es 96ppi und bei "grossen Schriftarten" sind es 120ppi.
Auf dem MacOS sind es nur 72ppi. Eine 9pt grosse Schrift würde also auf dem Macintosh 9 Pixel gross sein, auf einem Windows System 12 Pixel oder 15 Pixel. Ist eine Schrift auf einem Windows System noch lesbar, ist sie auf dem Macintosh nicht mehr zu entziffern.
Punkte sind besonders in Stylesheets für den Druck nützlich, die z.B. mit
<link href="print.css" media="print" type="text/css" />
eingebunden werden können.
Ein Drucker weiss ganz alleine, wie viele Punkte er für ein Zoll braucht, egal ob 300dpi oder 1200dpi, Punkte müssen also nicht erst umgerechnet werden.
Pixel hingegen sollte man auf alle Fälle in solchen Style Sheets vermeiden, da ein 1200dpi Drucker eine 12px grosse Schrift 0.01 Zoll gross drucken würde, Fliegendreck also.
Neuere Browser sollten Pixel vorher entsprechend umrechnen, aber nicht alle Benutzer verwenden auch solche Browser.
Punkte für Bildschirmdarstellungen zu verwenden führt mit Sicherheit dazu, dass viele User die Schrift nicht lesen können.
Mehr zu diesem Thema
"Sind Punkte(pt) die richtige Maßeinheit für Bildschirmdarstellungen?"
Zoll (in), Zentimeter (cm) und Millimeter (mm)
in, cm und mm müssen genau wie Punkte anhand der ppi Zahl umgerechnet werden, daher gilt alles, was zu Punkten gesagt wurde.
Schlüsselwörter
... für absolute Grössen
Davon gibt es 7 Stück:
* xx-small * x-small * small * medium * large * x-large * xx-large
Sie sind nützlich und werden empfohlen, nur gibt es auch hier Probleme: NN4 ignoriert sie weitgehend, der NN4.5 rendert sie in keiner annehmbaren Grösse (was diesmal nicht Netscapes Schuld ist, in CSS1 war der Skalierungsfaktor zwischen den Grössen 1,5 was eindeutig zu gross ist, in CSS2 ist er 1,2) und der IE4+5 stellt "medium" als "small" dar, was nicht unbedingt falsch ist, aber sehr verwirrend für den Autoren. Im MacIE5 ist das anders, ebenso wie in Opera. Was in dem einen Browser lesbar ist, ist in dem anderen zu gross oder zu klein, daher sind sie momentan nicht zu gebrauchen.
... für relative Grössen
* larger * smaller
Im IE3 und MacNN4 werden sie ignoriert, teils auch falsch dargestellt und ihr Einsatzbereich ist sehr beschränkt.
Man kann mit ihnen zum Beispiel nicht definieren, dass eine H1 Überschrift grösser als eine H2 überschrift dargestellt werden soll, somit sind sie weitgehend unbrauchbar.
Prozente (%)
Eine Prozentangabe bezieht sich auf die Grösse des übergeordneten Elementes. Ist keine absolute Grösse für ein übergeordnetes Element angegeben, ist 100% die vom Benutzer eingestellte Schriftgrösse. Prozentangaben sind somit ähnlich praktisch, wie die Einheit em.
Im IE3 werden Prozentangaben immer relativ zur eingestellten Schriftgrösse berechnet, nicht zu der des übergeordneten Elements, was die Einheit unbrauchbar macht.
NN4 verhält sich unterschiedlich, meistens werden Prozentangaben ignoriert oder falsch berechnet. Der IE4 ignoriert Prozentangaben für Schriftgrössen ebenfalls grösstenteils, daher ist es nicht sinnvoll, Prozentangaben im Moment zu benutzen.
Relative Längen
Wenn man nach der richtigen Einheit für Bildschirmausgaben sucht, sind die relativen Längen die richtige Wahl.
ex
1 ex wird durch die Höhe des Kleinbuchstaben 'x' in diesem Element bestimmt, auch wenn die Schrift kein 'x' enthält.
Ausnahme: wenn also die Schriftgrösse selbst mit dieser Massangaben gesetzt wird, steht diese für die Höhe des Kleinbuchstaben 'x' im Elternelement.
'ex' ist für Schriftgrössen nicht geeignet, ebenso ist ex im NN4, IE3+4+5.0 sowie Opera3 fehlerhaft implementiert, daher sollte man ex momentan am besten gar nicht benutzen (zumindest nicht im WWW).
Pixel (px)
1 Pixel ist in der Regel so groß wie ein Pixel auf dem jeweiligen Ausgabegerät, ist dort also eine absolute Größenangabe. Zwischen verschiedenen Ausgabegeräten mit unterschiedlichen Pixeldichten allerdings variiert die Größe der Darstellung, in dieser Hinsicht handelt es sich um eine relative Größenangabe.
Pixelangaben funktionieren in so ziemlich allen Browsern zuverlässig, ein Pixel ist auf dem Mac genauso gross wie auf Windows Systemen. Auf Systemen mit besonders hoher Auflösung sollte ein Pixel entsprechend umgerechnet werden - Pixel dürften auch dort nicht problematisch sein, sofern der Browser dies unterstützt. Generell und insbesondere für den Fall, dass ein Browser das nicht tut, sollte man ein extra Style Sheet für den Drucker angeben, um sicherzustellen, dass die Seiten auch dort korrekt ausgegeben werden (man benutzt dann zum Beispiel Punkte (pt) statt Pixel).
Das Problem mit Pixelangaben ist, dass ihre Grösse zwar relativ ist, aber dennoch unveränderlich. Eine 12px grosse Schrift ist 12px gross, egal was der Benutzer in seinem Browser für eine Schriftgrösse eingestellt hat. Sie lässt sich jedoch in manchen Browserversionen nicht mehr verändern, was dazu führt, dass Menschen mit einer Sehschwäche oder einer hohen Auflösung es schwer haben, einer nur 12px grosse Schrift zu entziffern.
Neuere Browser erlauben aber auch das Skalieren über diese Angabe hinaus, und der IE4+ ermöglicht es dem Benutzer sogar, Schriftgrössenangaben auf Webseiten generell zu ignorieren, was diesen Nachteil einschränkt.
Man kann natürlich auch keine Schriftgrösse angeben und es dem Benutzer überlassen, wie gross Schrift dargestellt werden soll.
Als funktionierendes Optimum kann man Pixel als Einheit für alte Browser definieren und bei neueren Browsern die wesentlich bessere Einheit em anbieten, wie das geht, zeigt Appendix A.
em
Sicherlich die beste Einheit. Ein 'em' ist die Schriftgrösse der relevanten Schrift, es sei denn, man benutzt das em als Schriftgrösse, dann ist 1em die Schriftgrösse des übergeordneten Elementes. Ist für sämtliche Väter-Elemente keine Schriftgrösse angegeben, ist es die vom Benutzer eingestellte Schriftgrösse. 1em ist also die für den Benutzer am besten lesbare Schriftgrösse.
Mit em ist es möglich, eine hunderprozentig skalierbare Website zu erstellen. Man kann em nicht nur für Schriftgrössen benutzen, sondern auch für die meisten anderen Eigenschaften. Auch Bilder kann man mit 'em' Einheiten auszeichnen. Die Größe eines Bildes ändert sich dann mit der vom Benutzer gewählten Schriftgrösse. Bei der Verwendung von Vektorgrafiken funktioniert das am Besten. Man hat nicht mehr das Problem, dass eine Webseite alles zu klein darstellt, wenn man unter einer Sehschwäche leidet, man stellt im Browser die Schriftgrösse einfach ein wenig größer und alle Texte, Grafiken und anderes passt sich dieser Einstellung an.
Ein Beispiel:
http://style.cleverchimp.com/font_size/scale/
Mittlerweile wird immer weniger von den Problemen, die mit 'em' zusammen hängen berichtet, so das man durchaus 'em' neben '%' als die ideale Einheiten für Bildschirmausgaben empfehlen kann.
Die älteren Browser machen es jedoch unmöglich, diese wunderbare Einheit zu benutzen. Der Internet Explorer 3 interpretiert ems als Pixel was jeden Text als Fliegendreck erscheinen lässt (1em wird zu 1px im IE3). Im NN4 ist die em Einheit ebenfalls nicht zu gebrauchen, daher sollte man vermeiden, dass IE3 oder NN4 ems vorgesetzt bekommen (vgl. Appendix A).
Appendix A
Der NN4 und IE3 oder andere Browser, die CSS unzureichend oder überhaupt nicht unterstützen, haben Probleme 'em' richtig darzustellen. Beide Browser können aber auch keine externen Style Sheets mit @import einbinden, daher kann man folgendes machen:
<style type="text/css">
h1 {
font-size: 24px;
}
</style>
<style type="text/css">
@import url("das-bessere-style-sheet.css");
</style>
/* das-bessere-style-sheet.css */
h1 {
font-size: 2em;
}
Die Angabe in fueralle.css wird durch die Angabe im importierten Style Sheet überschrieben. So ist gewährleistet, dass die Angabe der Schriftgrösse in möglichst allen Browsern wie gewollt dargestellt wird und in Browsern die mit 'em' umgehen können, die Unzulänglichkeiten von Pixeln wegfallen und man die vielen Vorteile von 'em' geniessen kann.
Siehe dazu: "How to hide CSS from buggy browsers"
Appendix B
Die Lesbarkeit einer Schrift bezieht sich weniger auf die Schriftgrösse als auf die Grösse eines 'x' also die x-Höhe oder besser gesagt, das Verhältnis der beiden. Dieses Verhältnis kann von Schrift zu Schrift sehr unterschiedlich sein. Während man die serifenlose Schrift Verdana auch bei kleinen Schriftgrössen gut lesen kann, ist 'Times new Roman' bei der gleichen Grösse subjektiv wesentlich kleiner und schlechter zu lesen - umgekehrt wirkt Verdana zu gross. Um diesem Unterschied gerecht zu werden, gibt es die CSS Eigenschaft 'font-size-adjust'.
h3 {
font-family: Times, "Times New Roman", Serif;
font-size-adjust: 0.8em;
}
Da diese Eigenschaft bisher kaum unterstützt wird, ist es in jedem Fall erforderlich, eine Schriftalternative passend zur Familie anzugeben, z.B.
font-family: Verdana, sans-serif;
Wenn die Schrift "Verdana" nicht installiert ist, wird eine serifenlose Schrift benutzt, statt der Standardschrift (Times New Roman bei den meisten Benutzern).
Hinweis
Die Eigenschaften 'font-size-adjust' und 'font-stretch' führten nur ein kurzes Dasein - eingeführt mit CSS2, wurden sie bei der überarbeitung zu CSS 2.1 schon wieder verbannt, wie auf http://www.w3.org/TR/CSS21/changes.html#q23 nachzulesen ist.
Appendix C
Eine Schrift darf nie kleiner sein, als 9 Pixel wenn sie lesbar sein soll. Das ergibt sich aus der Tatsache, dass 9 Pixel unbedingt erforderlich sind, um Zeichen naturgemäss darzustellen. Ein Beispiel:
1 # # 2 ##### 3 # ##### 4 # # #### ### 5 ### ### # # # # 6 # # # # ##### 7 # # #### # 8 ##### ##### # #### 9 ####
Jedes Pixel weniger würde bewirken, dass die Schrift zusammenschrumpft, wobei wichtige Bestandteile der Glyphen verloren gehen. Das schränkt die Lesbarkeit der Schrift stark ein. Auch wenn der Monitor klein ist oder die Auflösung hoch, sind 9 Pixel die unterste Schmerzgrenze, bei normalem Text sollte man auf jeden Fall dafür Sorgen, dass die Schrift grösser dargestellt wird. Am besten überlässt man das dem Benutzer und arbeitet mit em- oder %-Angaben.
Björn Höhrmann • bjoern@hoehrmann.deüberarbeitet am 10.11.2003 durch Huschiar Madjidi • http://www.netandmore.de
