Welche Maßangabe sollte man für Schriften verwenden?

Darüber gibt es sehr unterschiedliche Meinungen, und viele Artikel im Internet verdeutlichen die Problematik gut und kontrovers. Ich verwende auf meinen Seiten meist em zur Textauszeichnung (weil dieses überall skalierbar, also gezoomt werden kann) und px zur Positionierung (damit eine Veränderung der Schriftgröße nicht das Layout zerschießt).

Wie unter Schriftarten erwähnt, verwende ich die Verdana als Schrift für den Lauftext, ein speziell für den Bildschirm designter Font. Da die Standardvorgabe der Browser zu groß ist, verkleinere ich sie auf 0.8 bis 0.9em und vergrößere gleichzeitig die Zeilenhöhe auf 1.4 bis 1.5em. Damit kann ich, wie ich denke, die beste Lesbarkeit erreichen. Wer anderer Meinung ist, maile mir seinen Protest.

Für meine eigenen Versuche habe ich eine Testseite zur Schriftformatierung erstellt. Wer verschiedene Browser und/oder Betriebssysteme zur Verfügung hat, sollte sich diese Seite in jedem von ihnen ansehen und kann über die Unterschiede staunen.

Bei der Wahl der Schriftgröße muss aber auch die Zeilenlänge berücksichtigt werden. 60 bis 80 Zeichen gelten als optimale Textbreite in Bezug auf den Lesefluss. Wer es ausprobieren will, kann dieses interaktiv auf meiner Testseite zur Zeilenlänge tun.

Bei der Verwendung von em sollte man berücksichtigen, dass es eine relative Angabe ist: 0.8em bedeuten 80% des Elternelements. Hat man einem Absatz <p> zum Beispiel diese Größe gegeben und einem darin enthaltenen Link <a ...> ebenso, hat dieser nur noch 64% des Standardwertes. Also: sauberes CSS schreiben und Seiteneffekte beachten.

 

Beispiele für saubere zwei- und dreispaltige Layouts

Mehrspaltige Layouts ließen sich früher mit Tabellen relativ einfach gestalten, aber das ist dann eben keine saubere Web-Seite mehr. Dabei ist es auch mit reinem HTML und etwas CSS leicht möglich, mehrere Spalten nebeneinander anzuordnen. In meiner Spielwiese habe ich verschiedene kleine, einfache Beispiele für Webseiten ohne Tabellen erstellt, die als Grundgerüst auch für komplexe Projekte dienen können. Bitte bedient euch.

In meinen Beispielen habe ich zwei unterschiedliche Techniken verwendet, das "Floaten" von Bereichen und die absolute Positionierung. Ich selber bevorzuge die zweite Variante, da erstens das Konzept der Floats sehr komplex und fehleranfällig ist (besonders im Internet Explorer) und zweitens meine Methode es erlaubt, die Navigations-Spalte ans Ende des Quelltextes zu stellen. Dadurch kommen die wichtigen Inhalte ganz oben zu stehen, was sie für die Suchmaschinen relevanter macht.

 

CSS Positionierung und der Fluss der Elemente

Um CSS effektiv für das Layout einzusetzen ist es notwendig zu verstehen, wie die Positionierung von Bereichen geregelt ist. Folgender Artikel hat mir dabei sehr geholfen. Er weist auch auf Dinge hin, die zu beachten sind: CSS Positioning, eine wichtige Quelle von Tipps & Tricks von BrainJar

Big John hat in seiner umfangreichen CSS-Sammlung ebenfalls einen grundlegenden Beitrag gebracht: Flowing and Positioning, wobei der dort anschaulich demonstriert, wie der "Normal Flow" der Elemente auf einer Webseite durch "CSS Positioning" beeinflusst wird.

Wer es noch ausführlicher will, vertiefe sich in die W3C CSS3 Spezifikation: W3C Visual Formatting Model

Die aktuellen Browser kommen mit der Positionierung inzwischen problemlos klar, wie Joe Gillespie in seiner Untersuchung CSS-P in Current Browsers fest stellt.

 

Probleme mit Float

Ein Nachtrag zu CSS Positionierung und der Fluss der Elemente: Wie in der lesenswerten Einfürhrung zu lesen, können floatende Bereiche einen sie umschließenden <div>-Container überlappen. Zum Beispiel wird in folgender Konstruktion der gelbe Hintergrund hinter den floatenden Boxen gar nicht angezeigt, denn die Container-Box ist leer, genau 0 Pixel hoch. Die floatenden Boxen ragen aus ihrem Bereich heraus.

 <div id="container" style="background-color: yellow">
   <div style="float: left; background-color: red">
      Die erste floatende Box
   </div>
   <div style="float: left; background-color: blue">
      Die zweite floatende Box
   </div>
 </div>

Will man den übergeordneten Bereich, also das gelbe div, seine floatenden Kinder umfassen lassen, muss; man ein weiteres Kind-Element hinzufügen. Dieses kann auch leer sein, muss auf jeden Fall aber das Floaten mit clear beenden:

 <div id="container" style="background-color: yellow">
   <div style="float: left; background-color: red">
      Die erste floatende Box
   </div>
   <div style="float: left; background-color: blue">
      Die zweite floatende Box
   </div>
   <div style="clear: both">Das war's</div>
 </div>

Alternativ zum div wäre auch ein br möglich:

   <br style="clear: both">

Das ist kein Bug, das ist ein Feature floatender Elemente. Richtig eingesetzt sind Containing Floats "a very powerful layout tool", wie Eric Meyer an Beispielen demonstriert. Man muss sie nur verstehen.

Doch leider stellen die Browser dieses komplexe Layout-Element recht unterschiedlich dar und kommen unter speziellen Bedingungen zu sehr verschiedenen Ergebnissen.

 

Probleme mit Liquid Design

Beim Design von Webseiten unterscheidet man zwischen:

  • Ice Design: Alle Bereiche der Seite sind in ihrer Breite pixelgenau festgelegt. Damit bleibt das Layout des Designers bei jeder Fenstergröße erhalten.
    Nachteil: Ist mein Browserfenster kleiner als die Vorgabe des Designers, liegt ein Teil des Dokuments außerhalb des Bildschirms und es erscheinen hässliche horizontale Scrollbalken. Oder alle Seitensind "optimiert für eine Bildschirmauflösung von 1024 * 768". oder das Design ist schmaler als das Browserfenster, dann bleibt rechts ein leerer (weiser) Raum.
  • Liquid Design, die hohe Kunst des Webdesigns: Die Breite der Bereiche passt sich dynamisch dem Browserfenster und der Schriftformatierung an, die zur Verfügung stehende Fenstergröße wird optimal ausgenutzt.
    Nachteil: Bei hoher Bildschirmauslösung und ein Browserfenster im Vollbild-Modus werden Textzeilen sehr lang und damit schwer lesbar.

Kein Designer kann wissen, wie sein Werk auf dem Bildschirm eines Besuchers aussehen wird. Statistiken wie die von WebHits sagen zwar, dass die Mehrzahl der User einen Bildschirm mit 1024*768 Pixeln besitzen, zunehmend mehr haben eine noch größere Auflösung und nur eine Minderheit benutzt noch einen 800*600er-Bildschirm. Also kann man die Breite von 1024 Pixeln doch ausnutzen, die etwa 90% der Besucher zur Verfügung haben, oder? Falsch, denn die meisten von ihnen werden ihren Browser nicht im Vollbild einsetzen, schon um jederzeit Zugriff auf den Desktop zu haben. Und niemand verändert sein Browserfenster gerne nur wegen einem rücksichtslosen Webdesigner.

Die Zeilenbreite von Fließtext muss ein richtiges Verhältnis von Schriftgröße und Zeilenabstand aufweisen. Nur wenn alle drei Faktoren optimal aufeinander abgestimmt sind, ist eine gute Lesbarkeit gegeben. Als Faustregel hat sich eine Textbreite von 60 - 80 Buchstaben pro Zeile bewährt. Breitere oder schmalere Textzeilen behindern die Lesefreundlichkeit. Wer dieses selber ausprobieren möchte, unter Berücksichtigung von Schriftart und Schriftgröße, kann dieses interaktiv auf meiner Testseite zur Zeilenbreite machen.

Wie kann man eine optimale Zeilenlänge mit Liquid Design erreichen? Hier beginnt die hohe Kunst des Webdesigns. Mehrspaltige Seiten sind dabei flexibler als einspaltige Layouts. Während mir bei Glish die prozentuale Aufteilung der Bereiche bei kleinerer Fensterbreite noch nicht optimal erscheint, haben beispielsweise A List Apart das Problem besser gelöst.

Um das grundlegende Problem der Zeilenlänge beim Liquid Design zu lösen, wurden in CSS3 die Attribute max-width und min-width eingeführt. Während Firefox und Opera diese seit langem unterstützen, verweigerte sich der Marktführer Internet Explorer hier bis zur letzten Version 6. Da der IE 7 sich langsam aber sicher durchsetzt, sollte man diese Methoden zur besseren Lesbarkeit von Texten ruhig öfters benutzen als es bis jetzt der Fall ist. Die Leser im Web werden es danken.

weitere Informationen: Wie groß ist 100%? mit Überlegungen zum Problem der Zeilenlänge

 

Ursache vieler CSS-Probleme im IE - hasLayout

Entwickelt man moderne Webseiten und vergleicht sie in allen gängigen Browsern, stößt man des öfteren auf scheinbar merkwürdige Besonderheiten im Internet Explorer (alle Versionen). In den meisten Fällen handelt es sich Auswirkungen eines Konzeptes, das nur der IE kennt und das nicht einfach zu verstehen ist: die Eigenschaft hasLayout.

Anders als andere Eigenschaften in CSS wird es im IE den Objekten nicht extra zugewiesen, sondern bestimmte Elemente haben automatisch "Layout", anderen wird es stillschweigend mit bestimmten CSS-Angaben hinzugefügt. Ob ein Element "Layout" hat oder auch nicht, kann u.a. folgendes nach sich ziehen:

  • Viele bekannte IE-Fehler im Zusammenhang mit float
  • Die betroffenen Boxen selbst behandeln grundlegende Eigenschaften unterschiedlich
  • Zusammenfallende Ränder zwischen einem Container und seinen Nachfahren
  • Verschiedene Probleme bei der Erstellung von Listen
  • Unterschiede beim Positionieren von Hintergrundbildern
  • Unterschiede zwischen Browsern beim Einsatz von Scripts

Wenn man auf Merkwürdigkeiten des IE in diesen (oder anderen) Fällen stößt, sollte man zunächst einmal versuchen, die Layout-Eigenschaft des betreffenden Elements zu erzwingen durch Hinzufügen von zoom: 1. Diese Eigenschaft bewirkt (außer dem Layout-Modus im IE) nichts: sie gilt nur für Microsofts Browser und bewirkt eine Größenveränderung um den Faktor 1, also gar nicht. Allerdings ist die Seite dann nicht mehr valide, aber zum Testen reicht es allemal. Eine andere und valide Möglichkeit wäre, der betreffenden Box ein position: relative zu geben, falls es im Seitenkonzept problemlos ist.

Wer genaueres über das noch immer nicht ganz erforschte Konzept des IE wissen will oder muß, sollte sich durch den Artikel On having layout - The concept of haslayout in IE/Win oder seine deutsche Übersetzung Über hasLayout - das Konzept im IE/Win quälen. Es ist kein leichter Stoff und auch nicht immer logisch, eher ein tragischer Fall von "IE Voodoo".

 

CSS Hacks - Browser austricksen, pro & kontra

Leider ist die Unterstützung modernen CSS noch nicht in allen Browsern gleichmäßig verwirklicht, vor allem die älteren Versionen (Netscape 4, IE 5, teilweise auch IE 6) neigen dazu, ein valides Stylesheet nur fehlerhaft anzuzeigen. Hier kommen jetzt die Trickser zum Zuge, die mit ausgeklügelten Hacks spezielle Anweisungen vor speziellen Browser zu verstecken suchen. CSS-Hacks sind nicht anderes, als eine Unzulänglichkeit eines Browser durch eine andere Unzulänglichkeit zu umgehen.

Ich stehe diesen Tricksereien jedoch eher skeptisch gegenüber. Sie machen die an und für sich einfache und logische Struktur von CSS zunichte und erschweren die Weiterentwicklung von Webseiten. Fängt man erst einmal mit Hacks an, ist das Konzept für Änderungen und Erweiterungen nahezu verbaut. Und wenn eine neue Browserversion einen Teil eines Hacks beherrscht, muss die ganze Seitenstruktur neu angelegt werden. Der Artikel von Peter-Paul Koch Keep It Simple, the Lure of CSS Hacks, deckt sich deshalb weitgehend mit meiner Auffassung. Lediglich Tricks gegen alte Browser, die nicht mehr weiter entwickelt werden, lässt er gelten. Ich ergänze: Gegen Microsofts Oldies helfen problemlos Conditional Comments, alles andere ist von Übel.

 

Darum ist der richtige DOCTYPE wichtig

Zuerst einmal: Bisherige Seiten, die kein modernes CSS verwenden, brauchen diese Angabe nicht. Wer allerdings neuere Techniken nutzen will und dabei erwartet, dass eine Webseite in allen Browsern (annähernd) gleich dargestellt wird, muß die richtige Document Type Deklaration (DTD) an den Anfang seines Dokuments stellen. Nur dann rendern moderne Browser ein Dokument so wie es in diesen Spezifikationen festgelegt ist. Warum das so ist und wie der DOCTYPE richtig angegeben wird, beschreiben die unten verlinkten Artikel.

Wer überprüfen will, ob eine Webseite den (X)HTML- und CSS-Standards entspricht oder nicht, tippe oder kopiere
javascript:alert(document.compatMode)
in die Adresszeile seines Browsers auf entsprechenden Seiten. "CSS1Compat" als Ergebnis bedeutet moderner Standard-Modus, "BackCompat" ist eine im alten Stil erstellte Webseite im Quirk-Modus mit allen Unzulänglichkeiten und browserspezifischen Eigenheitenen, zum Beispiel beim Box Model; diese Seiten haben dann eine Macke (engl.: quirk).

Den Codeschnipsel zur Ermittlung des Kompatibilitäts-Modus gibt es hier auch als Bookmarklet: compatMode.

Einige Webseiten wollen eine XML-Konformität dadurch erreichen, dass sie dem Dokument zusätzlich die XML-Deklaration <?xml version="1.0" encoding="ISO-8859-1"?> voranstellen. Das bewirkt unter den heutigen Gegebenheiten aber genau das Gegenteil: es ist für XHTML nicht nötig, schaltet dafür aber den IE 6 in den nicht Standard gemäßen Quirk-Modus. XML ist nur dann sinnvoll, wenn die Seite auch als application/xml ausgeliefert wird, doch das kann der IE bisher nicht darstellen. Also unbedingt weg lassen!

 

Der W3C-Validator bemängelt color-Definition

Da hat man seine Webseite zufriedenstellend fertig gestellt, sie funktioniert auch auf allen Browsern und nun prüft man sie noch mit dem W3C-Validator auf syntaktische Richtigkeit. Doch der fängt an sich zu beschweren und stößt jedesmal, wenn man für ein Element eine Farbe festgelegt hat, eine Warnung aus: "Sie haben keine Hintergrundfarbe zu der Vordergrundfarbe angegeben". Das war doch so gewollt, die Hintergrundfarbe ist global festgelegt und braucht doch eigentlich nicht ständig wiederholt zu werden.

Hier sind die Standards meiner Meinung nach überpenibel. Man wollte wohl verhindern, daß durch die Vererbung auf untergeordnete Elemente sich ungewollte Hintergrundfarben einschleichen. Als ob man sich seine Webseiten nicht gelegentlich selbst einmal im Browser ansieht.... Ich halte diesen Zwang zur ständigen Wiederholung der Hintergrundfarbe sogar für kontraproduktiv: Will man die Farbe einmal wechseln, muß man sie nicht nur einmal im übergeodneten Element ändern, sondern vielfach.

Doch auch hier gibt es einen Trick: wählt man background-color: transparent, bleibt die Hintergrundfarbe wie sie ist und der Validator ist zufrieden gestellt. Tja, er ist eben auch nur ein Computer-Programm. Aber das sind die Browser ja auch.

Weitere interessante Tipps & Tricks zu den Themen Windows, Suchmaschinen, Internet und Benutzer-Freundlichkeit gibt auf dieser Seite www.connexin.net/de/ die auch von uns betreut wird.