toscho.design

Mythos font-size: 62.5%

Vor viereinhalb Jahren hatte Richard Rutter eine Idee:

  1. Alle Leser haben eine Schriftgröße von 16px.
  2. 62.5% davon entsprechen 10px.
  3. Wenn man body also mit font-size:62.5% versieht, dann gilt für alle folgenden Elemente: 100% = 10px.
  4. Jetzt tut das Kopfrechnen nicht mehr so weh.

Viele Autoren haben seither auf dieses Schmerzmittel gesetzt. Hier kommt der Beipackzettel: Alle vier Punkte sind falsch. Wer sie für wahr hält, der ärgert seine Leser.

  1. Die Schriftgröße des Lesers ist unbekannt. Die meisten Browser haben zwar eine Voreinstellung von 16px – der Internet Explorer 12 Punkt – aber überall kann der Leser diese Größe ändern, per Browsereinstellung oder Userstylesheet.
    Man kann em nicht in px umrechnen.
  2. Selbst wenn der Leser 16px als Normalgröße benutzt, können die 62.5% nicht zuverlässig erreicht werden: Alle modernen Browser haben eine Option für die Mindestschriftgröße. Liegt diese über dem errechneten Wert der 62.5%, betreten wir einen ungenormten Raum. Das Ergebnis der Rechnung kann entweder auf den mathematischen Wert gesetzt werden oder auf den der Mindestgröße.
  3. Daraus folgt, daß 62.5% von 1em einfach 62.5% von unbekannt entsprechen – oder mehr. Wer jetzt mit p { font-size:160%; } versucht, die Originalgröße wiederherzustellen, der landet eventuell bei eine größeren Schrift.
  4. Jetzt muß man mindestens zwei Fälle testen: Einmal mit erreichten 62.5% und einmal mit Mindestgrößen. Der Test- und Rechenaufwand wird mit dieser Methode verdoppelt.

In der Praxis verfahren die Browser sehr unterschiedlich: Opera beispielsweise hält bei der Berechnung der 62.5% genau an der Mindestgröße an und berechnet den Rest von hier aus. So kann er schnell rendern, der Leser sieht aber oft zu große Schrift.

Firefox und Safari merken sich das mathematische Ergebnis und prüfen derzeit bei jeder Einzelangabe, ob das Ergebnis die Mindestgröße unterschreitet. Die gerenderte Schriftgröße liegt dann näher bei den Erwartungen des »Designers«, dafür kostet die Berechnung je nach Tiefe der Dokumentstruktur viel Zeit.

Bei 16px Normal- und 13px Mindestgröße rendert Opera WordCamp.de in 6 Sekunden. Firefox 3.0.5 braucht 12. Ja, Firefox ist ein bißchen langsamer. Aber die doppelte Zeit?

Also: Wer Pixelgrößen will, der schreibe sie auch hin. Wer sie nicht will, der nehme einfach 100% für body.

Und Richard Rutter? Der benutzt diese Methode schon lange nicht mehr. Denn er weiß: Es reicht nicht, eine Idee zu haben. Man muß auch lernen können.

Weiterlesen

19 Kommentare

  1. Siegfried am 28.02.2009 · 10:12

    Danke, dass das mal endlich Jemand schreibt. Da bei Dir Pingback nicht geht, manuell: http://www.rorkvell.de/news/2009/Minischriften

  2. Thomas Scholz am 28.02.2009 · 13:27

    Interessanter Artikel, Siegfried. Den werde ich weiterempfehlen.

    Ich benutze seit Jahren nur genau die Schriftgröße, die sich meine Leser eingestellt haben. Das erspart ihnen Frust und mir den zusätzlichen Test mit ignorierter Schriftgröße.

    Benutzt du ein Userstylesheet?

  3. Siegfried am 28.02.2009 · 14:54

    Danke, dass Du den Artikel weiter empfehlen willst :)

    Ich benutze ein Userstylesheet, aber nur für ein paar Besonderheiten, nicht für die Schriftgröße. Ich benutze die Firefox Extension NoSquint. Die tut etwa das, was ich brauche.

    Und vielen Dank, dass Du in Deinen Seiten genau die Schriftgröße verwendest, die ich lesen kann! Nur die Kommentare hier muss ich mehr oder weniger blind tippen. Aber das geht schon.

  4. Thomas Scholz am 28.02.2009 · 15:07

    Nanu? Ich habe die Schrift für das Kommentarfeld nicht angefaßt. Eventuell hast du da noch die Voreinstellung in Firefox stehen.

    Du kannst du die passende Größe einstellen unter:

    Extras/
      Einstellungen/
        Inhalt/
          Schriftarten & Farben/
            Erweitert/
              Feste Breite

    Geht es dann? Wenn nicht, bitte ich dich um einen Screenshot, denn das wurmt mich jetzt doch, und ich möchte es gerne reparieren.

  5. Siegfried am 28.02.2009 · 15:14

    Ah, danke. Sieht so aus, als hätte ich den übersehen. Mit diesen Menues und Dialogboxen des FF ist das das gleiche Problem: Die sind auch zu klein. Ich muss mehr raten, als dass ich lesen kann.

    Es gibt zwar auch Themes mit großen Schriften, die sind aber wieder viel zu groß. Ich hatte so ein Theme mal eine Zeit lang drin. Aber da passen die Menues trotz wide-screen kaum noch auf den Bildschirm, was auch wieder nicht Sinn der Sache ist.

    Aber danke für den Hinweis. Habe ich sofort geändert.

  6. Dave am 28.02.2009 · 22:40

    Siegfried, hast Du Dir mal Deine Website (Link aus Kommentar 1) mal in Safari angesehen? Da geht gehörig was schief, was Farbe, Form, Background und Transparenzen angeht. Absicht?

  7. Siegfried am 01.03.2009 · 11:36

    Nein, habe ich nicht. Safari habe ich nicht. Kannst Du mir einen Screenshot schicken? Die e-mail Adresse findest Du im Impressum.

    Ich wäre da wirklich dran interessiert. Ach ja, und welche Version bekommst Du im Safari zu sehen? Die XHTML-Version oder die HTML-Version?

  8. Siegfried am 01.03.2009 · 12:00

    Screenshot dürfte überflüssig sein. Ich habe mich grade an Browsershots erinnert und Shots in Auftrag gegeben: http://browsershots.org/http://www.rorkvell.de/news/2009/Minischriften

    Safari 4.0 unter Windows XP kriegt's hin, problemlos. Chrome 1.0.154.48 unter Windows XP macht Mist. Sucht sich anscheinend per Zufall einen oder mehrere der alternativen Stile raus und mischt diese nach Gutdünken zusammen. Den Fehler hatten früher auch schon andere Browser. Dass übrigens in den Shots der Hintergrund vertikal wiederholt wird, dürfte ein Fehler des screenshot Programms sein.

    Viele Browser bekommen anscheinend automatic content negotiation nicht hin. Mal sehen, ob ich dazu Irgendwas bei Apache finde. Normalerweise habe ich per .htaccess die HTML-Version als Default eingestellt. Und der IE kriegt das auch hin. Auch ohne dass er einen HTTP Accept Header sendet. Wieso das mit manchen Browsern nicht klappt, weiss ich nicht.

  9. Paul am 11.03.2009 · 10:57

    Dass übrigens in den Shots der Hintergrund vertikal wiederholt wird, dürfte ein Fehler des screenshot Programms sein.

    Ich nehme an, du vergößerst dein Hintegrundbild mit JavaScript. Wenn das so ist, wird in Browsershots JavaScript wahrscheinlich einfach ignoriert und somit waere es gar kein Fehler, sondern du hast einfach nicht mit diesem Sonderfall gerechnet.

  10. Martin am 18.03.2009 · 13:43

    Sehr interessanter Artikel.Sie haben die Infos sehr ausführlich vorgestellt,was mir eigentlich sehr beim Arbeit geholfen hat. Danke.

  11. der blogcrafter chris am 20.04.2009 · 08:16

    Vielen Dank für diese aufschlussreiche Lehre! Man denkt manchmal gar nicht so weit und wundert sich dann, wenn der eine oder andere Besucher sich über das kaputte Layout beschwert.

  12. Dieter am 07.11.2009 · 13:45

    Lieber Thomas,

    ganz herzlichen Dank für diesen Blogbeitrag, den ich in seiner Tragweite erst verstand, als Du einen entsprechenden Kommentar auf Webseiten-Infos.de schriebst.

    Inzwischen ist die Ausgangsschriftgröße auf Webseiten-Infos.de 100.01% statt 75%. Näheres dazu in meinem Blogbeitrag "Webseiten-Infos.de unterstützt Benutzer-Stylesheets besser".

    Beste Grüße
    Dieter

  13. Markus am 06.05.2010 · 19:44

    Ich versteh' ehrlich gesagt noch immer nicht, was gegen die Benutzung von 62,5% spricht. Denn wenn ich die Schriftgrösse im Firefox ändere, ändert sich ja die Grösse auf so einer Seite mit font-size:62,5px; eigentlich ja auch, oder?

  14. Thomas Scholz am 06.05.2010 · 19:50

    @Markus: Hier geht es nicht um Firefox; der wird bloß noch langsamer – und damit kann er seine Nutzer wahrlich nicht mehr überraschen.
    Aber andere Browser wie Opera operieren dann von einem höheren Grundwert aus, als der Autor es erwartet. Das führt zu größerer Schrift, als der Leser sie gerne haben will. Man verdreifacht ohne Not den Testaufwand, oder lebt mit einer Seite, die wie ein einziger Unfall aussieht. Beides halte ich für schlechte Optionen.

  15. angelika am 05.12.2010 · 13:16

    Mit dem Stern zuvor die Schriftgröße auf 100% stellen, dann funktioniert es mit allen Browsern - dann stimmen auch alle 4 Punkte.
    html * { font-size: 100.01%; }

  16. Thomas Scholz am 05.12.2010 · 15:49

    @angelika: Nein, sie stimmen nicht. Wer eine Mindestgröße von 20px eingestellt hat, wird niemals 10px sehen. Obendrein ist der Universalselektor sehr langsam, den verwendet man nur, wenn es nicht anders geht.

  17. Tobi am 10.02.2011 · 19:28

    Sehr schön geschrieben, vorallem der letzte Satz :)

  18. troshka am 02.04.2011 · 11:52

    Verstehe jetzt nich wieso man nicht einfach mit px arbeitet? Alle neue Browser kommen damit doch ganz gut zu recht, oder?

  19. Thomas Scholz am 02.04.2011 · 12:00

    @troshka: Liegt die in Pixeln angegebene Schriftgröße unter der Mindestgröße des Lesers, entsteht exakt dasselbe Problem wie bei den 62.5%. Pixelgrößen sind daher handwerklich ebenso falsch wie extreme prozentuale Verkleinerungen.