SELFHTML Weblog - Ergänzung zur Dokumentation Übersicht

Vielleicht könnte auch eine Änderung des CSS Standarts etwas in der Richtung bewirken. Ich stell mir das so vor, wie etwa unter C++.

#ifdef 800x600 {font-size: 12px;}

#ifdef 1024x768 {font-size: 14px;}

#ifdef 1280x1024 {font-size:16px;}

Natürlich kann man nicht für jede Bildschirmauflösung ein eigenes Layout erstellen, schlislich bleibt den Webdesignern nicht ewig Zeit. Aber CSS und auch HTML kann die Bildschirmauflösung nicht erkennen und deshalb auch nicht darauf reagieren.

Bye Dirk

@Dirk: Welchen Sinn macht eine Anpassung der Schriftgrösse mit festen Schriftgrössen in Bezug auf die Bildschirmauflösung, wenn das Erreichen der Lesbarkeit für viele User unterschiedlich ist? Außerdem würde dies die Nutzung des "Fullscreenmode" voraussetzen und nicht alle User tun dies.

Anpassungsfähige, flexible Layouts sind eine gute Idee, denn wenn Textinhalte variieren oder gar Mehrsprachigkeit angeboten wird, ist eine "festgezurrtes" anspruchsvolles Layout kaum mit geringem oder normalen Aufwand zu realisieren. Womit der Anspruch an den Entwurf eines Layouts um ein vielfaches grösser ist, wenn man dies berücksichtigt. Eine gute Lesbarkeit ist somit nicht nur eine Sache von CSS.

Über die häufig anzutreffenden font-size: 75%; (allgemein: Prozentwert kleiner 100) für Content-Text ärgere ich mich auch häufig und nutze Strg++ ebenfalls oft. Ab zwei Spalten - eine für den Text, eine für die Navigation - wird ein ergonomisches Design problematisch, soll der Text deutlich vergrößert werden können, ab drei erst recht und ich glaube, eine "Patentlösung" gibt hierfür nicht, denn unterschiedliche Benutzer erwarten verschiedenes.

Was soll an der Skalierung des Firefox so schlecht sein?

also ich habe mir angewöhnt immer mit relativen angaben zu arbeiten, konkret:

font-size:small und width:400px (für entsprechende Textbereiche)

ist meiner Meinung nach ein guter Mittelweg, je nach einstellung im brower ist small mal größer mal kleiner, doch in der regel ok.

@Dirk: Standard, nicht Standart.

@Elmar: Die FF-Skalierung ist im Vergleich zum Opera der auch die Images skaliert nicht viel wert.

In den Stylesheets von Mediawiki gibt's einen Trick bei dem erst auf ein Minimum runter skaliert wird und dann wieder rauf. Damit sind die Schriftgröße sowohl auf Mac als auch auf Win gleich groß.

Von Layouts die zu flexibel sind, also bei kaum größerer Schrift auf eine 1200er Breite gehen halt ich nicht viel. Der Content hat dann einfach zu lange Zeilen und das schadet der Lesbarkeit.

@Elmar: Firefox vergrößert nur den Text, nicht die Spaltenbreiten der Container. Damit tritt der besagte Effekt ein, dass Texte aus ihren Containern fließen oder Container unverhältnismäßig in ihrer Größe geändert werden, wodurch das Layout zerfleddert und z.B. Boxen zueinander verschoben werden.

@Thomas: Flexibles Layout kann nicht heißen, dass Zeilen unlesbar zu lang werden. Dann ist es einfach ein schlechtes, aber meinem Verständnis nach kein flexibles Layout. Dieses Missverständnis wurde schon geklärt.

Ich glaube nicht, dass das Problem die fixen Bildschirmbreiten sind (obwohl das auch ein Problem ist, aber ein anderes). Ich würde mir davon auch nicht zu viel erwarten, denn keiner will eine Zeile lesen, die auf einem großen Monitor einen halben Meter breit ist.

Es scheint unter Designer und Layoutern eine Konvention zu geben, dass große Schriften irgendwie bäh sind. Ich kenne das aus dem Zeitschriftenbereich - schon bei 10pt gucken die meisten Layouter angewidert, und was Größeres würden sie höchstens für Sehbehinderte machen. Ich kann das nicht verstehen.

Noch ein technischer Hinweis: UserCSS (auch in Opera) hilft auch. Entsprechend drastisch eingestellt, macht das garantiert jede verkorkste Webseite lesbar. Bei leichteren fällen empfehle ich aber auch Strg++.

Es gibt doch, seit der Version 7 auch endlich im IE, max-width, was sich sehr schön für Absätze und andere Textelemente, aber auch für ganze Bereiche („div#inhalt {max-width: 40em;}“) einsetzen lässt. Das müsste einfach eine weitere Verbreitung finden, dann sind die Zeilen nirgends zu lang.

Ok es ist nicht die Aufgabe von CSS die Seite Lesbar zu machen. Ich bin noch sehr neu im Webdesign, und habe noch nicht viel Erfahrung, aber z.B. ein Table Layout ist nicht an der Bildschirmauflösung gebunden, ohne Table ist es, zumindist für mich, ohne feste Pixelbreiten, sehr schwer ein gutes Layout zu erstellen. Was die Schriftgröße angeht, wie soll man das Lösen, wenn auf einen 800x600 Bildschirm die die schrift 1 cm groß ist, wärend auf einen 1280x1024 Bildschirm die Schrift dann nur 4 mm groß erscheint. Von den unterschieden auf Linux und Windows (Mac hab ich nicht) ganz zu schweigen. Eine Webseite die unter Windows im Firefox, Opera und IE etwa gleich aussehen, kann unter Linux im Firefox, Opera und Konquerer völlig anderst aussehen, gerade bei der Schrift. Es gibst halt keinen Standard für Schrift.

bye Dirk

Nur ein Hinweis zu Dirks Vorschlag wegen verschiedener Pixelbreite des Bildschirms. In CSS3 gibt es ja schon länger Media Queries

Ich sehe das Problem bei auflösungsunabhängigen Webseiten darin, dass sehr viel mit Grafiken gearbeitet wird. Und Grafiken haben nunmal eine feste Breite, sie sich nicht nach der Auflösung und den Vorlieben der Nutzer richtet. Deshalb setzen viele Webdesigner wohl auf feste Schriften und fixe Layouts in der Hoffnung, dass so das Zusammenspiel mit den Grafiken gut funktioniert und ein stimmiges Gesamtbild herauskommt.

Eine Lösung sehe ich nur insofern, dass Grafiken intelligent mitskaliert werden können. Und das geht gescheit nur mit Vektor-Formaten. Und die - sind wie mal eherlich - spielen nur am Rande im Web mit.

Bei Betriebssystemen setzt sich eine Auflösungsunabhängigkeit der Bedienoberflächen (Vista, Mac OS Leopard) langsam durch, so dass zu hoffen bleibt, dass diese Entwicklung auch bald das Web erreicht.

Die einfachste Lösung für das Problem wäre ja, wenn man schon beim Design konsequent auf relative Angaben, sowohl für die Schriftgröße als ach für die Größe von Grafiken und des Layouts überhaupt, setzen würde. Leider scheint das nur so. Für große Bildschirme mir hohen Auflösungen klappt das ganz gut, aber wenn man dann kleine Ausgabegeräte an schaut klappt das schon wieder überhaupt nicht. Hier darf das Layout auf keinen Fall mit skaliert werden. Nur um einmal ein Beispiel zu nennen. Mir fällt auch keine Lösung ein, wie man es allen recht machen könnte.

Ich persönlich habe auch oft mit den Schriftgrößen zu kämpfen. Ich habe meinen Monitor zwar auf die ominösen 800x600 Pixel eingestellt, aber da ich sehbehindert bin, reichen mir die Schriftgrößen der meisten Webseiten auch nicht aus. Das Textscrollen (wie es z.B. der FF macht) zerhaut zwar oft genug das Layout, aber es verhindert, dass ich horizontal scrollen muss. Besonders längere Texte werden dann durch die gezoomten Bilder o.ä. in die Breite gezogen, was ihre Lesbarkeit für mich stark ein schränkt.

Gibt wohl doch zu viele Köpfe, um sie unter einen Hut zu bekommen. (Leider)

Wären Browser in der Lage, Bilder sauber (runter) zu skalieren, hätten wir vermutlich eine nennenswerte Hürde weniger auf dem Weg zum konsequent flexiblen Layout.

Ein Thema, dass auch mich zu einem Kommentar nötigt.

Was soll das schönste Design, wenn die Funktionalität nicht gegeben ist! Es kommt immer zuerst die Funktionalität, dann das Design. Ein Design ist immer nur dann gut, wenn es die Funktionalität unterstützt.

Folglich, lieber immer die Schrift zu gross als zu klein. Text kann man lesen und verstehen, Design nie.

Wer das nicht versteht, dem empfehle ich zum persönlichen Gebrauch ein Bett von maximal 1.50 m Länge und 60 cm Breite, man kann dann einen so schönen Umbau gestalten. Nach einer Woche wird er mich verstehen!

Schöner Artikel mit drastischen Beispielen.

Nicht nur, dass Designer winzige Schrift lieben, sie setzen immer noch zu oft auf Verdana, welche leider riesigwüchsig daherkommt, so man sie nicht verwinzigweichlicht. Verdana mit 1em Größe wirkt übermäßig aufgeblasen und diesbezügliche Beschwerden sind Legion.

Doch mit Vista ist Abhilfe in Sicht. Ein Vergleich von Verdana und Arial mit den neuen Vista-Schriftarten zeigt, dass letztere allesamt ein gutes Stück kleiner dargestellt werden:

Das Beispiel zeigt alle Schriftarten mit einer Größe von 1em, im Screenshot absteigend sortiert nach tatsächlicher Darstellung. Einige der neuen sind mit Antialiasing gerade noch lesbar. Größen < 1em gehören damit hoffentlich der Vergangenheit an – sie verwaschen zu einem Pixelbrei.

Wem kein Vista zur Verfügung steht, der kann die Schriftarten auch unter Windows 2000 und XP ergattern, indem er den Powerpoint Viewer 2007 installiert, denn dort werden sie mitgeliefert (via Gerrit van Aaken).

@Roland Und wie sehen diese Schriftarten unter Linux und Mac aus. Linux hat nur Open Source Fonts und Linux kann mit Windows Fonts nix anfangen.

bye Dirk

@Elmar: Firefox vergrößert nur den Text, nicht die Spaltenbreiten der Container. Damit tritt der besagte Effekt ein, dass Texte aus ihren Containern fließen oder Container unverhältnismäßig in ihrer Größe geändert werden, wodurch das Layout zerfleddert und z. B. Boxen zueinander verschoben werden.

Das muss nicht sein. Die Breite lässt sich auch prima in em angeben. Ein gutes Beispiel ist meiner Meinung nach 456 Berea Street.

Ok es ist nicht die Aufgabe von CSS die Seite Lesbar zu machen.

Bis auf eine fehlende Zeilenlängenbeschränkung sind die Seiten eigentlich komplett ohne CSS gut lesbar. Anders gesagt: CSS sollte die Seite nicht unlesbar machen.

Dirk, hier die Screenshots anderer Betriebssysteme:

Mac OS X:

Linux (Kubuntu):

Auch dort nehmen die Vista-Schriftarten also wesentlich weniger Raum ein.

Das ist ein sehr komplexes Thema, denn es spielen eine ganze Reihe von Faktoren mit hinein.

Der von Roland angesprochene Punkt der Schriftarten ist einer davon. Solange ich als Webseitenersteller nicht sichergehen kann, mit welcher Schriftart mein Text beim User angezeigt wird, habe ich doch schon das erste Problem. Denn selbst bei den Schriften aus einer Schriftarten-Familie (bspw. sans-serif) habe ich doch gewaltige Unterschiede bspw. zwischen Verdana und Tahoma. Ich kann aber mein übriges Design nicht daran anpassen, da ich ja nicht weiß, in welcher Schriftart mein Text nun angezeigt wird. In Anbetracht heutiger Übertragungsgeschwindigkeiten und der Größe von Schriftartendateien, würde hier die Möglichkeit Abhilfe schaffen, wenn es dem Browser möglich wäre, bei systemseitigen Fehlen der entsprechenden Schriftart, diese vom Server zu laden und für die Anzeige zu nutzen (ohne eine notwendige Installation im Betriebssystem).

Ein weiterer Umstand, der zur heutigen Misere beigetragen hat, ist sicherlich der Umstand, dass man die Standardschriftgröße in nahezu allen Browsern mit 16px festgelegt hat. Denn diese Schriftgröße erschien/ erscheint vielen Leuten zu groß (mir übrigens auch). Dies hat wiederum dazu geführt, dass sich viele angewöhnt haben, die Schriftgröße für ihre Webseite zu verkleinern - leider nicht immer mit dem besten Mittel der Wahl.

Da ich mich aber durchaus an eine Schriftgröße von ca. 12-13px gewöhnt habe, und diese auch (noch) auf der überwiegenden Mehrheit aller Seiten im Web anzutreffen ist, ergeht es mir persönlich auf dieser Seite genau andersherum - mir ist die Schrift hier zu groß und die Zeilen zu breit. Ich muss hier also jedesmal per STRG + Mausrad die Schrift verkleinern und auf der nächsten besuchten Seite wieder den "Normalzustand" herstellen.

Sicherlich sollte jedem Besucher einer Webseite die Möglichkeit gegeben werden, die Schriftgröße seinen Wünschen anzupassen. Ich favorisiere dabei nach Möglichkeit folgende Variante(n): - standard ist 12-13px - ein Layout, dass bis etwa 16px Schriftgröße "mitskaliert" - wer noch größere Schrift braucht, der sollte die Stylesheets ganz abschalten und sich die "nur Text" Variante der Seite angucken (dabei sind der Schriftgröße dann keine (kaum) Grenzen gesetzt)

Im übrigen bringen die verschiedenen Windows-Versionen auch alle standardmäßig eine Bildschirmlupe mit (ich vermute mal, dass es so etwas auch in anderen OS gibt).

Und man darf m.E.n. auch nicht den Punkt außer Acht lassen, dass es mit den heutigen Möglichkeiten, die CSS (bis einschl. Vers. 2.1) bietet, sehr aufwendig ist, grafisch komplexe und flexible Layouts zu gestalten. Weshalb ich glaube, dass viele Autoren ein fixes Layout, mit allen bereits beschriebenen Problemen, die das mit sich bringt, erstellen. Und in dem Wunsch, dass dieses nicht "zerschossen" wird, dann die Schriftgrößen festzurren, bzw. Teile des Inhalts unzugänglich werden, sobald man die Schriftgröße vergrößert.

Aber noch halte ich es getreu dem Motto aus der Redaktion der BBC:"Think about the 80%!". Und solange die Mehrheit der Seiten mit einer Standardschriftgröße von 12-13px daherkommt, solange werde ich die Schriftgröße auch weiterhin runterfahren (natürlich so, dass der User sie auch wieder größer machen kann).

Gruß Gunther

Hallo,

Sehr interessanter Artikel. Auch ich kämpfe auf unserer Website immer wieder mit dem Schriftgrößenproblem. Das Problem was ich anfangs hatte: Die Seite ist ein Gemeinschaftswerk und ich bin eigentlich eher ein Techniker denn Layouter. Da kam mir eigentlich die Hilfe meines Kollegen aus dem Druckerei-Sektor ganz gelegen. Designmäßig hat er zumindest Erfahrung was gut aussieht. Allerdings ging er auch davon aus, dass man eine Anzeige für den Bildschirm wie eine Zeitung oder Zeitschrift layouten kann, also inklusive aller Ränder, Breiten etc.... Es hat ein wenig gedauert, bis er das richtig akzeptieren konnte, das Text auf diversen Monitoren und diversen Browsern verschieden aussieht. Aber der Mann ist lernfähig!

Als Abhilfe testen wir mittlerweile alles auf der Seite auf diversen Monitoren und Browsern, auch immer mal wieder meldet sich ein User und gibt uns konstruktive Kritik: "Das und das sieht nicht gut aus / da ist was verrutscht" Es mag zwar durchaus Darstellungen geben, da sieht die Seite nicht so gut aus, weil es den Text zum Teil etwas arg zusammenstaucht oder auseiander zieht. Mit CSS habe ich bisher wenige und nicht alzu gute Erfahrungen gemacht was das Layout betrifft, von daher arbeite ich (auch wenn jetzt sicherlich einige anfangen zu mäkeln!) mit einem Tabellengerüst. Allerdings habe ich das soweit wie möglich flexibel gehalten: Ich habe Vorgaben für die Breite des Menüs und der Kopfzeile (damit die anständig aussehen). Der Raum für den Inhalt kann so genutzt werden wie er zur Verfügung steht. Ich optimiere nicht für eine gewisse Auflösung, allerdings hat es sich bei mir einfach durchgesetzt, dass eine Breite des Fensters von mindestens rund 1000 Pixeln durchaus gängig ist (sicher nicht für jeden!) - danach richte ich mich ganz grob. Da wir in vielen Bereichen auf Bilder (sie sagen einfach immer noch mehr als 1000 Worte und ergänzen einen Bericht sinnvoll) angewiesen sind, und ich keine reine Thumbnail-Sammlung haben möchte sondern auch was von den Bildern sehen möchte sind die in einigen Stellen vielleicht etwas zu groß, aber für die meisten Benutzer doch durchaus vertretbar. Bei der Schriftgröße habe ich am Anfang auch gedacht: Viel zu groß! Muss aber sagen: Eine Schrift sollte lesbar sein, die Größe ist da für mich eher zweitrangig und noch viel wichtiger ist der Inhalt!

Das Problem der verschiedenen Schriften kann der Autor nur sehr schwer in den Griff bekommen (es gibt einfach zu viele Kombinationen) - ich gebe daher immer eine Reihe von Schriften und eine Familie an: Aus meiner Erfahrung heraus ließt sich Text mit Serifen of dem Bildschirm oftmals schwerer und das Layout hat mir nicht gefallen. Viel mehr möchte ich dem Benutzer auch nicht mit auf den Weg geben.

Wollen wir hoffen, dass es demnächst ein Umdenken gegenüber den Winzig-Schriften gibt. Insbesondere rein kommerzielle Seiten gehen da oftmals mit sehr schlechtem Beispiel voran - noch ein Grund mehr OpenSource-Produkte zu wählen.

Cu Kai Schlachter

Größe in Winkel, Minuten und Sekunden. Über einen zu definierenden Betrachtungsabstand (dem Browser bekannt) kommt man dann auf die anzuzeigende Größe auf dem Display in z.b. mm. Das kann dann mit der Pixelgröße des Displays auch in pixel umgerechnet werden. Und sieht immer gleich groß aus.

Für zurzeit am sinnigsten halte ich eine Kombination aus flexiblem und elastischem Seiten-Layout, wie sie beispielsweise bei http://www.thinkvitamin.com/ praktiziert wird. Es gibt zwar eine Default-Größe aller Elemente, aber beim Vergrößern (nach klassischer Textzoom-Methode), wächst das gesamte Layout mit, allerdings nur (und das ist der Kniff), bis die Breite des aktuellen Viewports erreicht ist. Dann bleibt die Breite der Elemente konstant und es verändert sich nur noch die Höhe. Klassische (Ex-Print-)Designer mögen solche Layouts nicht, weil sich beim Skalieren alles ein wenig unkontrolliert verschiebt. Moderne Webdesigner stehe auf genau solche flexiblen Lösungen, die sowohl kleine als auch große Viewports zufriedenstellend füllen.

ich habe eigentlich auch Probleme mit Schriftgrößen. ist die Standard Schriftgröße 12px ? wie kann man die Schriftgröße nach der Bildschirmauflösung anpassen?

Gute Frage. ich würde es auch wissen.

ich glaube die Standard Schriftgröße ist 12px. Aber ich arbeite immer mit font-size:small