Mythos font-size: 62.5%
27.02.2009 in: Browser, CSS, Typographie und Webdesign • 19 Kommentare
Letzte Änderung: 11.08.2010, 10:20 Uhr.
Vor viereinhalb Jahren hatte Richard Rutter eine Idee:
- Alle Leser haben eine Schriftgröße von
16px. 62.5%davon entsprechen10px.- Wenn man
bodyalso mitfont-size:62.5%versieht, dann gilt für alle folgenden Elemente:100% = 10px. - 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.
- 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 kannemnicht inpxumrechnen. - Selbst wenn der Leser
16pxals Normalgröße benutzt, können die62.5%nicht zuverlässig erreicht werden: Alle modernen Browser haben eine Option für die Mindestschriftgröße. Liegt diese über dem errechneten Wert der62.5%, betreten wir einen ungenormten Raum. Das Ergebnis der Rechnung kann entweder auf den mathematischen Wert gesetzt werden oder auf den der Mindestgröße. - Daraus folgt, daß
62.5%von1emeinfach62.5%von unbekannt entsprechen – oder mehr. Wer jetzt mitp { font-size:160%; }versucht, die Originalgröße wiederherzustellen, der landet eventuell bei eine größeren Schrift. - 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
- In Schriftgröße: Meine Praxis beschreibe ich meine Strategie.
- In Zu groß wird ein extremes Beispiel großer Schrift gezeigt.
- Zu klein: »font-family: monospace« in Safari löst auch ein Konsistenzproblem.
- Text-rendering: illegibility behandelt einen seltsamen Bug, bei dem Text unterhalb 20px komplett verschwindet. Webkit mal wieder.
- Warum man Inhalt und Layout nicht trennen kann spricht über die Botschaft, die ein schlampiges Layout über den Autor aussendet.
Danke, dass das mal endlich Jemand schreibt. Da bei Dir Pingback nicht geht, manuell: http://www.rorkvell.de/news/2009/Minischriften
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?
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.
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 BreiteGeht es dann? Wenn nicht, bitte ich dich um einen Screenshot, denn das wurmt mich jetzt doch, und ich möchte es gerne reparieren.
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.
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?
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?
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.
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.
Sehr interessanter Artikel.Sie haben die Infos sehr ausführlich vorgestellt,was mir eigentlich sehr beim Arbeit geholfen hat. Danke.
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.
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
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 mitfont-size:62,5px;eigentlich ja auch, oder?@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.
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%; }
@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.
Sehr schön geschrieben, vorallem der letzte Satz :)
Verstehe jetzt nich wieso man nicht einfach mit px arbeitet? Alle neue Browser kommen damit doch ganz gut zu recht, oder?
@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.