Das Webwriting-Magazin

- Über das Publizieren im Web -

 

www.webwriting-magazin.de

Newsletter Forum Kontakt
Alternativversion 

Die Alternativversion ist verlustlos druckbar, voll navigierbar und macht das gesamte Dokument auch dann zugänglich, wenn Ihr Browser das Layout nicht darstellen kann.

Dieser Link führt zur Normalversion zurück

Gleich groß muß nicht gleich sein Serifen: Schön und anspruchsvoll Sans-serif: Alle verschieden Eine Empfehlung Problem Zeilenlänge Konkret und flexibel

Michael Charlier:

Wie groß ist 100%?

Immer Ärger mit den Schriftgrößen

Zum Thema "Schriftgrößen" ist eigentlich schon fast alles gesagt - nur leider noch nicht von allen. Deshalb führt die Frage "Wie soll ich meine Schriften auszeichnen?" in Mailinglisten zu Webdesign oder Usability immer wieder zu den heftigsten Debatten - und nie zu einer abschließenden Antwort. Vielleicht helfen aber auch ein paar nicht-abschließende Bemerkungen weiter.

Kürzlich habe ich bei Recherchen zum Thema Accesibility einer Seite von Josiane Rommes und der Universität Halle kurze Besuche abgestattet. Sehr kurze Besuche:

Da die Browserdarstellung je nach System unterschiedlich ausfallen dürfte, hier die Screenshots, die zeigen, wie J. Rommes und die Seite der Uni Halle bei mir ankamem.

Die Seite von Rommes leidet unter einem nur allzu bekannten Problem: Der Text ist nicht nur ziemlich klein ausgezeichnet - wie das wohl auf Mac oder Unix kommt ? - sondern die Auszeichnung erfolgt auch noch in px, womit erreicht wird, daß etwa 90 Prozent der Webnutzer (alle, die MSIE unter Windows benutzen) die Schrifttgröße nicht im Browser verändern können. Außerdem ist die Schrift "Tahoma" bei kleinen (Schrift-)Graden sehr schwer lesbar - das kleine "g" ist wirklich eine Plage. Erschwerend kommt in meinen Augen hinzu, daß der Text über die ganze Breite des Browserfensters läuft. Da fällt es mir schon bei meiner Standardeinstellung 800X 600 schwer, den Zeilen zu folgen.

Gleich groß muß nicht gleich sein

Eher noch schwerer tue ich mich mit der Seite aus Halle. Dabei hat der Webmaster doch alles richtig gemacht - meint er. Ganz im Sinne des W3C hat er darauf verzichtet, überhaupt eine Schriftgröße oder eine Zeilenlänge anzugeben, damit wird der Text automatisch in der Größe dargestellt, die ich für mich eingestellt habe.

Oft übertreiben die Designer es aber auch mit der Verkleinerung der Schriften. Ein schönes Beispiel ist die Eingangsseite der Max-Planck-Gesellschaft, die mit der kleinsten denkbaren "fontsize=1" gestaltet worden ist.

Stimmt aber nicht, wie der Screenshot zeigt. Die Schrift im Browser ist größer als alles, was ich sonst noch so auf meinem Desktop habe. Auch bei dieser Seite erschwert mir die über die ganze Browserbreite laufende Zeile das flüssige Lesen. Und meine Abneigung gegen lange Zeilen ist wirklich nicht nur eine persönliche Marotte: Es wird schon einen Grund haben, daß nahezu alle bedeutenden .de-Websites (lehrreiche Ausnahme: Heise) Schriftgrößen und Zeilenlängen nicht dem Zufall überlassen, sondern anders und meist deutlich kleiner auszeichnen als die reine Lehre es empfiehlt.

Das gute Abschneiden der TNR ist nicht wirklich überraschend - schließlich ist die "Times" von der gleichnamigen Zeitung speziell mit der Zielsetzung entwickelt worden, möglichst viel Text auf kleinem Raum unterbringen zu können

Der Vergleich der Schriften (alle in Größe 100%) anhand eines Screenshots zeigt, wo das Problem liegt: Nur die erste Spalte in Times New Roman macht einen einigermaßen lesbaren Eindruck - die anderen wirken sperrig bis schwer lesbar. Also bauen wir künftig alle Seite in TNR? Diese Schrift ist platzsparend, ihr im Verhältnis zur Schrifthöhe (Oberkante Oberlänge bis Unterkante Unterlänge) großer Zeilenabstand erleichtert das Lesen auch längerer Zeilen, und die Serifen verbinden die Buchstaben und erleichtern es - zusammen mit exakt bemessenen Abständen (Kerning) - Buchstabengruppen oder ganze Wörter auf einen Blick zu erfassen.

Serifen: Schön und anspruchsvoll


So schön können Serifen sein - wenn man sie denn sieht. Georgia in Großaufnahme.

Aus diesem Grund werden übrigens im Zeitungsdruck für Lauftext überwiegend Serifenschriften verwandt. Und wer einen ordentlichen Monitor hat - kleine Pixel, verzerrungsarme Darstellung über die ganze Bildschirmfläche, wenig Konvergenzfehler - ist in der Tat mit der TNR ab dieser Größe nicht schlecht bedient. Leider haben viele User keine so hochwertigen Bildschirme, und dann verkehren sich die Vorteile dieser Schrift in Nachteile: Buchstaben und Wortbilder fransen aus und verschwimmen, das Schriftbild wird undeutlich, das Lesen anstrengend.

Selbst ein guter Bildschirm kann nichts am Grundproblem jeder Serifenschrift für den Bildschirm ändern: Gedacht sind die Serifen als haarfeine Akzente, die den lesenden Blick unaufdringlich unterstützen. Wenn die Modulation zwischen der Stärke der Serife und der des (Buchstaben) Stammes aufgehoben wird, weil für beide nur noch 1 Pixel zur Verfügung steht, lassen sie die Buchstabengestalt unharmonisch erscheinen und können dazu beitragen, daß Zeichen unleserlich werden.

Verdana, Tahoma, Geneva, Monaco, Trebuchet, Georgia, und einige Lucida-Schnitte sind speziell für die Verhältnisse auf dem Bildschirm gezeichnet und ermöglichen - wenn man sie richtig einsetzt - gute Resultate.

Serifen und die eleganten Verläufe der Strichstärken kommen bei den meisten Serifenschriften erst ab 24 oder 36 Pixeln auch auf dem Bildschirm wenigstens halbwegs zur Wirkung. Die Arial hat keine Serifen - deshalb erscheint sie im Kleinformat wesentlich klarer. Im übrigen hinterlassen die drei Sans-Serif-Schriften des Beispiels einen gemischten Eindruck. Die Schrifthöhe ist einige Pixel größer, der Zeilenabstand bei Arial und Verdana deutlich geringer. Die Tahoma hat zwar fast den gleichen Zeilenabstand wie die TNR, aber auch viel höhere (und breitere) Buchstaben. Wegen der gringen Laufweite (so nennt man die Abstände zwischen den Lettern) fließen "eu" "un" "dr" und andere Buchstabenkombinationen nahezu zusammen, das Schriftbild wird fleckig, einzelne Wörter werden schwer erkennbar.

Sans-Serif: Alle verschieden



Ob Arial (oben) oder Tahoma (unten) - bei 8 Pixeln löst sich jede Schrift in dekorative Muster auf.

Die Verdana vermeidet dieses Problem. Die Buchstaben sind schön breit und halten trotzdem einen lesefreundlichen Abstand voneinander. Aber da der Zeilenabstand trotz höherer Buchstaben kleiner ist als bei der TNR, macht es die Verdana, so wie sie ist, dem Leser bei längeren Zeilen schwer, den Text zu scannen, ohne die Zeile zu verlieren. Außerdem wird die nahezu quadratische Grundform, die viele Buchstaben der Verdana aufweisen, bei dieser Schriftgröße nicht immer angenehm empfunden.

Da erscheint die Arial angenehmer: Ihre Buchstaben passen in ein harmonisches rechteckiges Schema, und wenn der Zeilenabstand nicht so gering wäre, könnte man sie auch in längeren Zeilen gut lesen. So, wie sie ist, kann man aber auch sie nur begrenzt verwenden.

Eine Empfehlung:

Das Fazit liegt auf der Hand: Wer die Schriftgröße nicht festlegen will, hat als Schrift für Lauftext praktisch nur die Times zur Verfügung - und ist darüber hinaus auch noch darauf angewiesen, daß die Mehrheit seiner Besucher mit guten Augen und guten Monitoren unterwegs ist. Wer demgegenüber die als einzelne Zeichen sauberer und deutlicher darstellbaren serifenlosen Schriften einsetzen will, muß und kann die Einstellungen zu Schriftgröße und Zeilenabstand modifizieren. Wie der letzte Screenshot zeigt, ist man zumindest für die Arial dabei gut beraten, die Schriftgröße auf 86% zu reduzieren und den Zeilenabstand auf 140% zu vergrößern - dann ergeben sich in etwa die gleichen Verhältnisse wie bei der TNR - bei besserer Lesbarkeit. Die Verdana kann eine noch etwas stärkere Verkleinerung und noch mehr Zeilenabstand vertragen.

Problem Zeilenlänge

Die x-Höhe oder Mittelhöhe bezeichnet die Höhe der kleinen Buchstaben. Ihre Bedeutung für die Lesbarkeit nimmt unter angelsächsischem Einfluss - dort spielen Versalien nicht die Rolle wie im Deutschen - immer mehr zu

Der Zeilenabstand ist jedoch keine absolute Größe, sein optimales Maß hängt von der Zeilenlänge und von der x-Höhe der Schrift ab. Damit man auch beim Überfliegen eines Textes die Zeilen sauber voneinander trennen kann, benötigen lange Zeilen einen deutlich größeren Zeilenabstand, kurze Zeilen dürfen enger zueinander rücken.

Zwar weiß niemand, mit welchen Browserfenstern wieviele Surfer unterwegs sind. Zahlreiche Beobachtungen in der Praxis und Wortmeldungen in einschlägigen Listen lassen vermuten, daß die große Mehrheit der User mit Browserbreiten zwischen 800 und 1024 px unterwegs ist. Des weiteren kann man annehmen, daß die meisten User die Breite ihrer Browser nie oder ungern verstellen - der gute Rat der Befürworter unbegrenzter Zeilen, jeder könne sich die Seite doch nach persönlicher Vorlieb einstellen, bringt nicht viel, wenn das bedeutet, sich auf jeder Webseite neu arrangieren zu müssen.

Bei sovielen Unwägbarkeiten ist die Radikallösung: "Gar nichts angeben" zwar verständlich - ein optimales Ergebnis sichert sie allein keinesfalls. Eine Möglichkeit der Begrenzung von Zeilenlänge wird bei Heise demonstriert: Randspalten mit fixierter Breite sorgen dafür, daß der im übrigen frei bewegliche Text der mittleren Spalte zumindest bei den meisten Usern die zuträgliche Breite nicht überschreitet.

Der Versuch, eine Breite z.B. durch eine fixierte Tabellenspalte oder ein DIV mit fester "width" vorzugeben, ist weniger empfehlenswert: Dann muß jeder, der die Seite mit einem kleineren Browserfenster besucht, horizontal scrollen. CSS2 stellt zwar die Attribute max-width und min-width zur Verfügung - diese werden jedoch vom MSIE auch in Version 6 noch nicht verstanden, so daß sie in der Praxis nicht eingesetzt werden können.

Konkret und flexibel

Zur Zeilenlänge lässt sich also bis auf weiteres wenig Praktikables sagen, außer: Je länger die Zeilen im Normalbrowserfenster des vermuteten Normalusers vermutlich ausfallen, desto wichtiger ist es , Schrifttype, Schrifgröße und Zeilenabstand so zu wählen und aufeinander abzustimmen, daß das Erfassen des Textes erleichtert und nicht erschwert wird. Das Rezept: "Nur wer nichts vorgibt, lässt dem User alle Freiheit, sich die für ihn optimale Einstellung selbst einzustellen", mag theoretisch zutreffen. Für die Praxis taugt es wenig. Hier verlangen die weitaus meisten User vom Seitenbauer das Kunststück, ihm Seiten zu liefern, die sofort lesbar sind und ansprechend aussehen. Ohne weitere clientseitige Anpassung, aber dafür möglichst auf jeder Plattform. Ansonsten: Klick und tschüss. [November 2002]

Herzlichen Dank an Monika Gause von mediawerk.de, die mir dabei geholfen hat, die komplizierte typografische Terminologie wenigstens halbwegs korrekt anzuwenden. Das Copyright für Fehler und unzulässige Vereinfachungen bleibt bei mir.

Einige Links:

Patrick Andrieu: Schriftarten: Größen - Vergleiche
Owen Briggs:Text Sizing
Michael Charlier: Gleiches Schriftbild in (fast) allen Browsern
Todd Fahrner: Toward a standard font size interval system
Ernesto Giménez: Feature - Fonts per CSS richtig einstellen
Rene Grassegger: Das Windows/Mac Font-Size-Problem
Björn Höhrmann: Die "richtige" Schriftgrösse
Michael Kaspar: Schriftvergleich mac/pc
Ralph G. Schulz: Schriftgrößen
Fabrice Pascal: Frage der Größe
Thomas J. Sebestyen: Schriftartenvergleich
Web Style Guide: Characteristics of type on the Web

© Claudia Klinger +
Michael Charlier
Alle Rechte bei den Autoren