Die leidige Sache mit der Schriftskalierung

Am Beginn eines jeden Projektes muss ich mich entscheiden, wie ich Schriftgrößen und auch Containerbreiten auszeichnen will. Ich bin diesbezüglich nicht fetgelegt und habe schon diverse Ansätze ausprobiert. Meist habe ich allerdings in der Vergangenheit den Ansatz verfolgt, die Basisschriftgröße auf 62.5% zu setzen. In der Annahme, daß jeder Browser eine Standardschriftgröße von 16 Pixeln eingestellt hat, kann man fortan mit em wie mit um eine Kommastelle versetzte Pixel arbeiten. Mir war bewußt, daß das immer nur eine Annahme war. Genau betrachtet können wir im Internet immer nur mit Annahmen arbeiten und für eine müssen wir uns entscheiden.

Thomas Scholz nennt ausführliche Argumente, warum die Idee mit den 62,5% keine gute Idee ist. Ich bin nicht ganz mit seiner Argumentation einverstanden, finde aber, man sollte sie in die eigenen Überlegungen mit einfliessen lassen. Wenn es doch nur einfacher und klarer wär. So langsam denke ich, ein erster Beitrag, den IE 6 gedanklich sterben zu lassen, ist die Umarmung von Pixeln als Einheit für die Auszeichnung von Schriften. Alle modernen Browser skalieren auch solche Seiten, denn sie haben automatischen Seitenzoom.

Und wie ich schon vor ein paar Tagen schrieb: wenn wir uns nicht in einem auf Jahre hinaus an den Dino IE 6 ketten wollen, dann ist es gut, sich so langam zu emanzipieren. Dazu gehört auch die Auszeichnung con Schriften in Pixeln. Und bevor jetzt jemand mit der Barrierefreiheitskeule kommt: Pixel ist ein relatives Mass, meint auch das W3C. Und laut BITV soll man relative Masseinheiten für Schriften nutzen.

15 Kommentare

  1. Praktiziere ich bereits seit gut einem Jahr nur noch so… die Geschichte mit em war mir irgendwie zu frickelig. Ständig gab es da doch irgendeinen Browser der sich nicht exakt dran halten wollte.

    Da die Sache mit den Pixeln eigentlich nur auf den IE6 zutrifft kann man Pixel denke ich ohne weiteres nutzen. Denn seien wir mal ehrlich. Wer auf skalierte Webseiten angewiesen ist, der nutzt (hoffentlich) eh einen barriereärmeren Browser als den IE6. Und wens nur der IE7 ist…

  2. Exakt meine Meinung! Pixel sind im CSS-Kontext nämlich keineswegs als „Gerätepixel“ zu verstehen, auch wenn dies viele Webdesigner bisher noch nicht verstanden haben. Was natürlich daran liegt, dass es eine missverständliche Bezeichnung ist. Insofern danke für die Aufklärungsarbeit und Pixel ahoi!

  3. Pixel ist ein relatives Mass, meint auch das W3C.

    So ganz leuchtet mir das nicht ein, wie verhält sich das denn am Screen. Wenn ich meine Auflösung von 1900 auf einem anderen Screen übertrage, dann ist da nix relativ, dass ist dort zu groß oder zu klein. Hast du den Link dazu parat? Bisher war mir immer % und em als relativ bekannt.

  4. Ein Pixel ist zunächst mal relativ zum Gerät. Da kann ein gerrit van Aaken schreiben, was er will, ein Pixel, oder besser, die Größe eines Pixels, ist zunächst einmal abhängig von den physischen Gegebenheiten eines Gerätes. Auf alten Röhrenmonitoren maß man die Pixelgröße in Millimetern, auf Riesen-LED-Monitoren für Stadien misst man ein Pixel in Centimetern, und auf modernen LCD-Monitoren in wenigen Bruchteilen von Millimetern.

    Relativ bedeutet schlicht abhängig von.., in diesem Fall also abhängig vom Gerät.

    Allerdings ist diese Abhängigkeit von der _physischen_ Pixelgröße nicht die Einzige. Auf einem Monitor mit einer gegebenen physischen Auflösung X kann man auch eine davon abweichende Auflösung Y fahren. Dann setzt sich ein logisches Pixel aus soundsoviel physischen Pixeln zusammen. Der Zusammenhang kann durchaus krumme Zahlen ergeben.

    Ein Pixel einer Webseite misst sich nun immer nach der _logischen_ Pixelgröße. Diese hängt a) ab von der gewählten Auflösung und b) von der physischen Pixelgröße. Beides hat der Webdesigner _nicht_ in der Hand.

    Eine absolute und feste Größe wäre beispielsweise in cm (Centimetern). Um solche Schriften korrekt darstellen zu können, müsste der Browser aber Informationen über die Bildschirmauflösung haben (dpi, dots per inch). Davon kann man eher selten ausgehen.

    Ein em ist relativ. Und zwar relativ zu dem, was der Leser sich eingestellt hat.

    Und % ist relativ zur Größe des Viewports (bei Fullscreen in etwa zur Größe des Monitors).

  5. Ah sorry, Korrektur. Bei Schriften ist % natürlich auch relativ zu dem, was der Leser sich eingestellt hat.

  6. @Frank: Pixel sind ein relatives Mass. Dein Monitor hat eine feste Größe, damit eine feste Fläche. Und auch wenn die modernen TFT-Monitore es nicht so möchten, man kann die Auflösung der Monitore softwareseitig verändern. Dann passen auf den gleichen Monitor entweder 1024×768 oder 800×600 oder 1280×1024 oder sonstwelche Pixelanzahlen. Der Monitor ist dabei weder geschrumpft noch gewachsen. Also sind in den genannten Beispielen die Pixel in jeweils anderer Größe auf dem Bildschirm.

    Anders ist es bei absoluten Größen wie Zentimeter oder Punkt (pt). Das W3C führt als relative Einheiten em, ex und px auf. (http://www.w3.org/TR/CSS2/syndata.html#length-units). Prozentwerte werden seltsamerweise weder den relativen noch den absoluten Größen zugeordnet.

  7. @Siegfried,

    deine Meinung in allen Ehren, aber es ist dennoch kein Grund so schnipisch zu reagieren:

    Da kann ein gerrit van Aaken schreiben, was er will

  8. @Jens,

    wo soll ich unterschreiben? 🙂

  9. Es mag einfacher und logischer sein, wenn man eine Website mit px im Font erstellt, aber das Verständnis für die Relation bei px fehlt mir noch. Ein Pixel ist doch so ungenau definiert, dass man nie weis, was es wirklich ist. Man hat keinen Bezug. Ich muss darüber nochmal nachdenken. Gerade die TFTs sind ja nicht sonderlich dafür geeignet, die Auflösung zu ändern, denn die Anzahl der px bleibt, es wird nur interpoliert, was auch die schlechtere Qualität danach begründet. Klar, den meisten Browsern ist es egal ob px oder em, sie lassen es zu, dass man die Größe ändert, wie in einigen Browsern nun ja auch mit Bildern. hmmm…
    Vorerst bin ich nicht überzeugt, em und % scheinen mir noch immer logischer als Def. von Fonts von dig. Medien.

  10. O.k., hast Recht. Entschuldigung.

  11. Eigentlich ist es ziemlich naheliegend, die Einheit Pixel zu benutzen. Etwas anderes steht einem am Ende gar nicht zur Verfügung. Warum dann nicht gleich auf den Punkt kommen.

  12. Der Punkt ist, dass das Web _medienunabhängig_ konzipiert und gedacht ist. Hier ein Pixel und da ein Pixel ist einfach an der Intention des Webs vorbei. Ich weiss, dass das die eher visuell orientierten Künstler nicht so gerne hören, aber es ist eine Tatsache.

    Auf einem Handy-Screen mit vielleicht 320 Pixel Breite stehen nun mal deutlich weniger Pixel zur Verfügung wie auf einem Widescreen LCD mit vielleicht 1980 Pixel Breite. Es ist unlogisch, anzunehmen, dass man eine Webseite pixelgenau identisch auf beiden Monitoren darstellen könnte.

    Aber die Medienunabhängigkeit geht noch weiter. Es steht nirgendwo geschrieben, dass Webinhalte unbedingt visuell aufgenommen werden müssen. Es steht nur geschrieben, dass sie aufgenommen werden müssen. Webinhalte können durchaus auch taktil (Braille) oder audible (vorgelesen) aufgenommen werden. Und hier ist es noch unlogischer, von Pixen zu sprechen. Es mach einfach keinen Sinn, darüber zu sprechen, wie viele Pixel denn wohl z.B. der Kammerton a hat.

    Wenn man diese Medienunabhängigkeit konsequent umsetzt, kommt man zu ganz erstaunlichen Ergebnissen und ganz anderen Seiten. Und einige (nicht alle) der Probleme des IE 6 werden da ganz plötzlich irrelevant.

    Um das richtig zu begreifen, gibt es eine einfache Technik. Man gestaltet eine Webseite, ganz so, wie gewohnt und wie man sie sich vorstellt. Dann fügt man dieser Webseite ein alternatives Stylesheet hinzu. Dieses alternative Stylesheet soll nun die gleiche Seite ganz anders aussehen lassen. Nicht nur Farben, die gesamte Geometrie. Und dann vielleicht noch ein paar weitere alternative Stylesheets, die alle die Seite ganz anders aussehen lassen. Nicht verschiedene html-Seiten. Ein und die selbe html Seite mit diversen alternativen Stylesheets. Wenn man das durchzieht, wird man zwangsläufig auf medienunabhängiges und semantisches Markup gestoßen, weil es anders gar nicht geht. Die Frage nach irgendwelchen Pixeln erübrigt sich da vollständig.

  13. Das letzte ist doch mal wieder einfach nur ganz grober Unfug. Sorry, aber was hat denn bitte die Bemaßung einer Schrift im CSS mit px oder in was für einer Einheit auch immer mit der Ausgabe des Textes einer Seite über den Lautsprecher oder die Braille-Zeile (also beides Ausgabeformen, die gemeinhin kein CSS interpretieren und somit schon mal gar keine Bemaßungen) zu tun?

    Genau: gar nichts.

  14. Eben! Und warum wird’s dann trotzdem gemacht? Warum muss ein Text, der über Lautsprecher ausgegeben wird, unbedingt eine Schriftgröße von 62.5% oder 10px haben? Das ergibt für mich in der Tat keinen Sinn.

    Und wenn man diese Art der Formatierung beschränkt auf das Medium „Screen“, macht es dann Sinn? Für welchen Screen gilt das dann? Für das 14 Zoll Mäusekino? Für den 24 Zill Wide-Screen LCD? Ergibt für mich auch keinen Sinn. Also, warum wird’s trotzdem gemacht?

    Es könnte Sinn machen, wenn die Viewport-abhängigen Styles in CSS3 umgesetzt werden. Dann _kann_ das Sinn machen. Aber auch dann ist es i.d.R. besser, die Finger davon weg zu lassen.

    Was „Ganz grober Unfug“ angeht: Ich stimme Dir zu. Die veränderung der Standardschriftgröße ist „ganz grober Unfug“.

  15. Nee, sorry, das was du hier von dir gibst ist ganz einfach nur wirres Zeugs.