Schriftgröße: Meine Praxis
20.05.2009 in: CSS, Interna, Typographie und Webdesign • 9 Kommentare
Letzte Änderung: 06.06.2010, 00:36 Uhr.
Mit diesem Text will ich meine Position dokumentieren. Ich will niemanden überzeugen – das habe ich längst aufgegeben. Dennoch widme ich die folgenden Worte all jenen, die glauben, sie dürften ihre Leser zum Zoomen zwingen.
Grundlagen
Ich arbeite mit der Schriftgröße meiner Leser. Die Maße aller Boxen beziehe ich auf diese Größe, damit nirgendwo Text ausläuft.
Ich unterstelle keine »Standardschriftgröße«, weil ich Ockhams Rasiermesser für eines der wichtigsten Werkzeuge jedes Gestalters halte: Die Annahme, meine Leser hätten diese oder jene Schriftgröße, ist überflüssig und fast nie verifizierbar. Selbst Studien, die allein die Größe messen, sagen nichts über Mindestschriftgrößen oder ob der Leser genau 16px mag.
Zwar haben die meisten Browser ab Werk eine Größe von 16 Pixeln eingestellt, aber ob der Leser es dabei belassen hat oder nicht, kann niemand sagen. Im Internet Explorer sind es übrigens 12 Punkt, die bei der Systemeinstellung »Große Schriften« erheblich größer ausfallen als 16 Pixel.
Vorteile
Nicht nur meine Leser profitieren davon, sondern auch ich: Wenn ich in meinem Layout auf leserfremde Größen setzte, müßte ich testen, was passiert, wenn meine Besucher diese Größenangaben ignorieren (das bietet heute jeder Browser an), und wie mein Entwurf mit Mindestschriftgrößen harmoniert. Das erspare ich mir; so habe ich mehr Zeit für richtiges Design.
Viele Entwickler vergessen diese Tests; sie »optimieren« ein Layout im Grunde bloß für die eigenen Verhältnisse und vielleicht für die ihrer Kunden. Schade. Im Netz sind so viel mehr Menschen unterwegs.
CSS
Im Stylesheet setze ich die Schriftgröße (font-size) für body auf 100.01%. Wenn ich die Angabe komplett weglasse oder als 1em angebe, skaliert der Internet Explorer 6 sehr drastisch. Bei genau 100% ziehen ältere Operaversionen (5 & 6) einen Pixel ab, bei 100.1% verkalkuliert sich Safari 1.x bei Breitenangaben in em. All dies sind eigentlich schon veraltete Probleme. Es kostet aber nichts, wenn ich sie immer noch berücksichtige.
Denn darum geht es ja (nicht nur) beim Webdesign: Wer ernst genommen werden will, der muß auch seine Leser ernst nehmen.
Lektüre
- Mathias Schäfer: (Keine Antwort auf) Die Frage nach der richtigen Schriftgröße.
Differenzierte Betrachtung der vielen Faktoren für die Lesbarkeit. - Oliver Reichenstein: The 100% Easy-2-Read Standard.
Pointierte und illustrierte Aufforderung, lesbare Webseiten zu gestalten. - In diesem Blog:
- Mythos font-size: 62.5%: Was geschieht, wenn man die Mindestschriftgröße vergißt.
- Zu groß: Größer ist nicht automatisch besser. Ein extremes Fallbeispiel.
- Zu klein: »font-family: monospace« in Safari: Wenn 100% nicht 100% sind.
Ich bin kein wirklicher Freund von der Website, die sich der Schriftgröße anpasst.
Wenn jemand, anstelle zu "zoomen", die Schrift vergrößern möchte und die ganze Website mit wächst und das nicht nur in der Höhe, um zu verhindern, dass der Text aus eine "Box" läuft, sondern auch horizontal, dann zwinge ich ihm quasi einen "Zoom" auf.
Gut, du hast hier die maximal Breite begrenzt, was leider nicht alle mit dieser Technik machen, es kann mit unter schon Leserwunsch sein, wenn man nur die Schrift vergrößert haben möchte. ;)
@Christian: Stimmt, ein wenig mitdenken muß der Autor dabei natürlich. Das kann ihm keine Faustregel abnehmen, und sei sie noch so knackig.
Neben der hier beschriebenen Schriftgrößenregel habe ich noch eine zweite Maxime: Jedes Layout skaliere bis auf
20emhinab.Bilder oder große Datentabellen haben natürlich Vorfahrt, aber ansonsten orientiere ich mich schon daran.
Die Kombination beider Regeln schon bei der Konzeption eines Layouts führt fast automatisch zu einem recht zugänglichen Grundgerüst.
Ich hab mal das mal in einem Mix aus "em" und "px" in Verbindung mit "min/max-width" umgesetzt: http://blackhawk-zone.de/ (großer Gott...da muss ich mal wieder dringend Hand anlegen...aber man kommt ja zu nichts^^)
Mit der Lösung war ich eigentlich recht zufrieden, würde allerdings bei einem neuen Design wieder vor der Frage stehen, ob und wie breit eine Website mit der Ansichtsbreite mitwächst, zwecks Lesbarkeit und der Schriftgröße im Verhältnis dazu.
Auf der einen Seite wollen manche Nutzer keine langen Zeilen lesen, auf der anderen Seite will man seinen breiten Monitor nutzen können.
Heiko vom xhtmlforum.de meinte mal, dass es mittlerweile sinnvoll wäre, wenn man wieder auf fixe Breite umsteigt, da ja jeder "zoomen" könnte. Da leidet dann wieder die Grafikqualität...
@Christian: Die Website wirkt ein bißchen vernachlässigt. Keine Zeit?
Von fester Breite halte ich gar nichts. Niemand will zoomen müssen. Viele wissen nicht einmal, daß das geht. Wer sein Layout an einem Notnagel aufhängt, der verdient den Absturz, der ganz sicher kommt.
Ja, keine Zeit. Ich bin schon 12 Wochen "dabei" die Seite auf ein CMS (Drupal) mit neuem Design (schwierig) und leicht veränderter Themenausrichtung umzustellen, um dann ein Relauch online stellen zu können, damit endlich das Inhalte-Online stellen viel einfacher wird und damit schneller und öfter welche kommen können. Wie an den Daten sieht, ist da nicht mehr so oft was gemacht worden. Gleichzeitig ist die Startseite nicht besonders "Streß fest".
Leider finde ich neben dem Studium nicht mehr so viel Zeit und Lust da weiter zu arbeiten. Die meiste Zeit wird dann in Anpassungen hier: http://www.squadrevolution.de gesteckt oder mal schnell 15min in ein Forum zum Helfen. Aktuelles Ziel ist Weihnachten^^
Argh...zu früh gedrückt.
Gerade bei einer Seite, die mit festen Screenshots arbeiten (muss), die den Text auflockern, ist es immer recht schwierig, da die richtige Größe im Vergleich zum Text und Position zu finden, wenn dann auch noch die Seite horizontal mitwächst.
Will mich auch mal beteiligen :).
Generell ist deine Idee gut. Bei meinen Projekten ergab das jedoch fast immer Probleme. Die Kunden haben auf einmal eine total bescheuerte Idee was das Layout angeht. Dann muss man auf einmal auf ein position: absolute zurück greifen und schon hast du ein Problem. Wenn die ganze Seite dynamisch ist, kannst du diese Absolute Box nicht sicher ausrichten. Dann läuft es wieder über Javascript etc... kommt natürlich immer auf die Webseite und den konkreten Fall drauf an, ich möchte nur sagen das es eben manchmal Probleme bereitet.
Es ist generell ein unsicheres Pflaster wenn man mit Prozent arbeitet. Der IE mogelt sehr gerne hier und da einen Pixel dazu (Rundungsfehler) und schwups steht die Box nicht mehr rechts sondern unter dem Content.
Generell bin ich bei meinen Projekten weg von der Perfektion. Es muss nicht in jedem Browser immer gleich aussehen! Wenn ein User meint er muss mit einem uralt IE6 oder sonstwas rum surfen dann ist es nicht meine Aufgabe ihm ein schönes Layout zu bieten. Da gibt es ja so eine Redewendung 80% eines Projektes kosten 20% der Zeit. Die restlichen 20% kosten 80% der Zeit. Kommt aber natürlich auf den Fall drauf an.
@T-Rex: Gut, den IE6 berücksichtige ich eh nur noch nebenbei. Das ist mir bei Privat-Websites einfach zu blöd, das Teil da noch mit zu schleifen. Wenn ich Zeit hab und mir ein Fehler auffällt, wird er auch mal gefixed, wenn es einfach geht. Aber ansonsten muss der User eben damit leben, dass er kein so schönes, gutes Angebot zu sehen bekommt.
@T-Rex: Du kannst auch mit absoluter Positionierung arbeiten, wenn du die Dimensionen in
emangibst. Ja, selbst im IE. Prozentuale Angaben für Boxen sind ein anderes Thema, das wird tatsächlich oft sehr schwierig. Deshalb schlage ich das auch nicht vor; ich benutze Prozente fast ausschließlich für die Schriftgröße.Und selbst in kommerziellen Projekten spielt der IE 6 kaum noch eine Rolle. Ich hatte schon einige, in denen ich den ignorieren durfte. Habe ich nicht komplett gemacht, aber der Trend ist klar. :)