nicht angemeldet
RWD - Schriftgröße Denkfehler?
Matthias Apsel
Matthias Scharwies
AugeHallo werte Selfgemeinde!
Gerne hätte ich eure Ansicht/ Meinung, bzw. Vorgehensweise zu folgendem Thema gehört:
Angenommen es handelt sich um eine Website, die ein responsives Layout haben soll.
Dann basiert das Layout auf Media Queries, und diese wiederum auf 'em' als Einheit.
Dies hat den Sinn, dass zum einen die vom User, bzw. in seinem Browser als Default eingestellte Schriftgröße respektiert wird, ohne dass bei einem von den 16px abweichenden Wert unser Layout "auseinanderfällt".
Ferner nehmen wir einmal an, dass es u.a. die folgenden Breakpoints gibt:
60em
80em
100em
120em
Nun bin ich persönlich der Auffassung, dass es nicht "hilfreich" ist, bei all diesen Viewportbreiten stur dieselbe Basis-Schriftgröße (die bei den allermeisten Usern ~ 16px betragen dürfte) zu verwenden.
Nehmen wir daher weiter an:
Viewport / Schriftgr.
60em / 1em
80em / 1.125em
100em / 1.25em
120em / 1.375em
Das hat aber jetzt aus Sicht der Accessibility einen gravierenden Haken ...!
Denn wenn einem User die "voreingestellte" Schriftgröße (für <body>) zu klein ist, und er die Zoom-Funktion des Browsers verwendet (Annahme: anfängliche Viewportbreite >= 120em), um die Seite größer darzustellen, dann springt er quasi bei jedem (jedem zweiten) Zoomschritt in den nächsten MQ-Bereich, wodurch die jeweils kleinere Schriftgröße jedes Mal den Zoomeffekt aufhebt, bis er die Seite soweit gezoomt hat, bis keine Änderung der Schriftgröße mehr stattfindet.
Ich hoffe, die "Problematik" ist halbwegs verständlich geworden und nachvollziehbar?
Eine mögliche Alternative die Schriftgrößenänderung (für <body>) auf der Seite +/- Buttons (und JS) anzubieten ist auch nicht wirklich "praktikabel", da dann wiederum das Problem besteht, dass das Layout "auseinanderfällt" ...!
Das "Problem" ist also, dass die Browser Zoomfunktion (bei Desktop Browsern) den Viewport verändert und man per CSS nicht auf den Zoomfaktor zugreifen kann.
Oder hab' ich etwas "übersehen", bzw. falsch verstanden?
Gruß Gunther
-
Hallo
Oder hab' ich etwas "übersehen", bzw. falsch verstanden?
Ja, einiges.
So hängt das Design vom Inhalt und nicht von der Fenster-/Bildschirmgröße ab.
Und aus Benutzersicht ist es sinnvoller, die Schrift größer zu machen je kleiner das Fenster/der Bildschirm ist. Oder halt gleich so groß, das sie von den meisten Besuchern problemlos gelesen werden kann.
Gruss
MrMurphy
-
Hallo!
Oder hab' ich etwas "übersehen", bzw. falsch verstanden?
Ja, einiges.
So hängt das Design vom Inhalt und nicht von der Fenster-/Bildschirmgröße ab.
Ja, und?
Habe ich etwas anderes behauptet?Und trotzdem hast du dann irgendwelche Breakpoints ...,
und die rechnet jeder Browser in Pixel um (aber darum geht es ja gar nicht)!Und aus Benutzersicht ist es sinnvoller, die Schrift größer zu machen je kleiner das Fenster/der Bildschirm ist.
Häh?
Beispiel:
Auf meinem Smartphone (Viewport: 320px * 600px) finde ich für Fließtext die Standard-Schriftgröße (16px) ganz gut lesbar.
Auf meinem 24" Monitor (Viewport: 1920px * 1080px) ist sie mir hingegen zu klein. Da darf sie ruhig um den Faktor 1.375 bis 1.5 größer sein.Nach deiner Aussage, sollte man es genau andersherum machen!?
Oder halt gleich so groß, das sie von den meisten Besuchern problemlos gelesen werden kann.
Ja, das ist genau das, was ich erreichen möchte, und was die beschriebene Problematik hat.
Gruß Gunther
-
Hallo
finde ich
Da haben wir doch gleich wieder das Hauptproblem, das sinnvolle Lösungen verhindert. Erfahrungsgemäß ist dann auch jede Hilfe sinnlos.
Gruss
MrMurphy
-
Hallo!
finde ich
Da haben wir doch gleich wieder das Hauptproblem, das sinnvolle Lösungen verhindert. Erfahrungsgemäß ist dann auch jede Hilfe sinnlos.
Von welcher "Hilfe" sprichst du ...!?
Und wenn ich meine Ansicht für die einzig Richtige halten würde, dann hätte ich wohl kaum geschrieben:"Gerne hätte ich eure Ansicht/ Meinung, bzw. Vorgehensweise zu folgendem Thema gehört:".
Ferner bin ich hier im Forum nicht zum ersten Mal unterwegs ...!
Also falls du mir noch deine Ansicht/ Vorgehensweise zum Thema erläutern magst, würde ich mich freuen.
Gruß Gunther
-
-
-
-
Om nah hoo pez nyeetz, Gunther!
Oder hab' ich etwas "übersehen", bzw. falsch verstanden?
»em« ist halt eine Einheit mit Risiken und Nebenwirkungen.
Andere Einheiten sind vielleicht die bessere Wahl. Zumindest die Unterstützung von »rem« ist inzwischen flächendeckend.
Matthias
-
Hier ist ein guter Artikel (leider auf Englisch) über RWD und die Schriftgrößen mit Tabellen und anschaulichen Beispielgrafiken:
http://typecast.com/blog/a-more-modern-scale-for-web-typography
LG Matthias
-
Hallo werte Selfgemeinde!
@Matthias & @Matthias:
Danke für eure Antworten, aber sie gehen beide an "meinem Problem" vorbei. ;-)
Deshalb versuche ich es nochmal mit anderen Worten zu beschreiben:
Ausgangsbasis:
Ein responsives Layout basierend auf Media Queries (mit 'em' - ist für das Problem aber auch irrelevant).Problem:
Wenn ich für größere Viewportbreiten (welche ist im Prinzip egal) auch jeweils eine größere Schriftgröße vorgeben möchte (ich finde bspw. dass 16px bei 1920px Viewportbreite definitiv zu klein ist), dann konterkariere ich dadurch quasi die Zoomfunktion (STRG + +/-) im Browser.Denn wenn einem User die "voreingestellte" Schriftgröße zu klein ist, und er die Zoom-Funktion des Browsers verwendet, um die Seite größer darzustellen, dann springt er quasi bei jedem (jedem zweiten) Zoomschritt in den nächsten MQ-Bereich, wodurch die jeweils kleinere Schriftgröße jedes Mal den Zoomeffekt aufhebt, bis er die Seite soweit gezoomt hat, bis keine Änderung der Schriftgröße mehr stattfindet.
Das "Problem" ist also, dass die Browser Zoomfunktion (bei Desktop Browsern) den Viewport verändert und man per CSS nicht auf den Zoomfaktor zugreifen kann.
Diese Problematik ließe sich AFAIS eben nur dadurch verhindern, dass ich egal für welche Viewportbreite immer die (im Browser eingestellte) Basis-Schriftgröße verwenden würde.
Damit würde ich dann aber wiederum vermutlich eine Vielzahl der Besucher mit breiteren Viewports dazu "nötigen", die Zoomfunktion zu benutzen, sofern der jeweilige User diese überhaupt kennt. Andernfalls düfte er sich ansonsten über die "kleine" Schriftgröße ärgern ..., und das würde ich mind. genauso gerne vermeiden.
Ich hoffe, es ist jetzt deutlicher geworden, worin mein Problem/ Dilemma besteht?
Gruß Gunther
-
Deshalb versuche ich es nochmal mit anderen Worten zu beschreiben:
Ausgangsbasis:
ich finde bspw. dass 16px bei 1920px Viewportbreite definitiv zu klein istIch habe mir so einen großen Bildschirm gekauft, damit ich 2 Din-A4-Seiten Word-Dokumente nebeneinander lesen kann, und nicht, damit die Schriftgröße größer wird.
<Menschelei>So alt bin ich noch nicht, auch wenn ich so aussehe!</Menschelei>
Ich hoffe, es ist jetzt deutlicher geworden, worin mein Problem/ Dilemma besteht?
Ich glaube schon zu verstehen, was Du meinst, dass bei großen Monitoren der Text unglaublich lang ist (da er z.B. bei der Wikipedia und unserem Wiki über die ganze Breite der Seite geht) und dadurch nicht mehr gut aussieht.
Dies kann man m.E. aber nicht über die Schriftgröße, sondern eher über die max-width des Inhaltsbereichs regeln.
Wie dann der Rand aussehen sollte, weiß ich auch nicht. Die Rechner in unserer Schule sind im 16:9 Format, wo man vertikal nach der Ask-Toolbar fast schon wieder die Taskleiste hat und dafür dann horizontal die Ränder außerhalb des Tunnelblick-Sichtfeldes liegen. :-(
LG Matthias
-
Hallo
Deshalb versuche ich es nochmal mit anderen Worten zu beschreiben:
Ausgangsbasis:
ich finde bspw. dass 16px bei 1920px Viewportbreite definitiv zu klein istIch habe mir so einen großen Bildschirm gekauft, damit ich 2 Din-A4-Seiten Word-Dokumente nebeneinander lesen kann, und nicht, damit die Schriftgröße größer wird.
Website != Word-Dokument
Wenn ich in *einem* Browserfenster oder -tab zwei Seiten ohne irgendwelche Handstände mit Frames nebeneinander anzeigen lassen könnte, wären die beiden Szenarien vergleichbar. So jedoch nicht.
<Menschelei>So alt bin ich noch nicht, auch wenn ich so aussehe!</Menschelei>
Ich persönlich habe festgelegt, nicht alt zu sein (auch wenn mein Körper das anders sieht). Dennoch schätze ich es sehr, dass mittlerweile viele Websites mit recht großer Schrift daherkommen.
Ich glaube schon zu verstehen, was Du meinst, dass bei großen Monitoren der Text unglaublich lang ist … und dadurch nicht mehr gut aussieht.
Dies kann man m.E. aber nicht über die Schriftgröße, sondern eher über die max-width des Inhaltsbereichs regeln.
Wie dann der Rand aussehen sollte, weiß ich auch nicht.
Typischerweise ist der dann leer, was bei kleiner Schriftgröße und kurzer Zeilenlänge zu viiiiiieeel verschwendetem Platz führt. Gern wird der auch mit reichlich Werbung vollgeknallt (zum Glück gibt es AdBlocker).
Da ist mir eine (zeichenseitig) kurze Zeile mit angemessen wenig, jedoch vorhandenem Platz an den Seiten lieber, gerade, wenn die Schrift etwas größer ist. Dass man es mit der Schriftgröße auch übertreiben kann, steht auf einem anderen Blatt. Das mit dem anderen Blatt gilt auch für die Frage, wie groß das Fenster des Browsers auf einem Full-HD-Desktop ist. Der eine hat Breite x, weil er daneben noch y andere Fenster anzeigen lässt, der andere betreibt den Browser stets im Vollbildmodus.
Tschö, Auge
--
Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
Terry Pratchett, "Wachen! Wachen!"
ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
Veranstaltungsdatenbank Vdb 0.3 -
Hallo Matthias!
Deshalb versuche ich es nochmal mit anderen Worten zu beschreiben:
Ausgangsbasis:
ich finde bspw. dass 16px bei 1920px Viewportbreite definitiv zu klein istIch habe mir so einen großen Bildschirm gekauft, damit ich 2 Din-A4-Seiten Word-Dokumente nebeneinander lesen kann, und nicht, damit die Schriftgröße größer wird.
Neben der reinen Display Auflösung, spielen natürlich auch noch andere Dinge eine Rolle, wie z.B. die Bildschirmdiagonale und der sich daraus ergebende Abstand zum Display (Beispiel: 24" Zoll Monitor und 40" TV, beide Full HD Auflösung).
<Menschelei>So alt bin ich noch nicht, auch wenn ich so aussehe!</Menschelei>
Siehste! Ich komme langsam in das Alter, wo es anfängt eine Rolle zu spielen ...! ;-)
Ich hoffe, es ist jetzt deutlicher geworden, worin mein Problem/ Dilemma besteht?
Ich glaube schon zu verstehen, was Du meinst, dass bei großen Monitoren der Text unglaublich lang ist (da er z.B. bei der Wikipedia und unserem Wiki über die ganze Breite der Seite geht) und dadurch nicht mehr gut aussieht.
Dies kann man m.E. aber nicht über die Schriftgröße, sondern eher über die max-width des Inhaltsbereichs regeln.
Ja, das mache ich sowieso.
Eine Zeile sollte nicht breiter sein, als dass man zum Lesen nur die Augen, aber nicht den Kopf bewegen muss.
Andere postulieren die maximale Zeilenbreite indem sie sagen, eine Zeile sollte max. ~ 70 - 80 Zeichen lang sein.
Wieder andere sagen ~ 10 - 12 Wörter pro Zeile.
Natürlich ist das u.a. auch von der Schriftart und dem System abhängig.Das Wiki ist doch ein gutes Beispiel.
Wenn ich mir den Abschnitt "Was ist das SELFHTML-Wiki?" betrachte, dann hat der Fließtext eine Schriftgröße von 15.5px und eine Zeile ("Die alte SELFHTML-Dokumentation wurde bisher durch einen kleineren Autorenkreis gepflegt. Mit dem SELFHTML-Wiki wird die Erstellung und Pflege der Inhalte für das allgemeine Publikum geöffnet. Sie selbst können das SELFHTML-Wiki nutzen, um sich über") ist um die 250 Zeichen breit.Ersteres ist deutlich zu klein, während Letzteres viel zu groß ist.
Stell' in deinem Browser mal eine Zoom-Ansicht von 133% oder 150% ein und ergänze im CSS
p { max-width: 36em; ... }Ist im ersten Augenblick vielleicht etwas "ungewohnt", weil wir im Prinzip schon an diese "Mikro-Schriftgrößen" überall gewöhnt sind. Aber zumindest für mich deutlich komfortabler zu lesen.
Wie dann der Rand aussehen sollte, weiß ich auch nicht.
Dafür gibt es bei entsprechender Viewportbreite so CSS Module wie das Multi-column Layout Module!
Ich glaube, ich werde mich auch für die Variante mit größerer Schriftgröße für breitere Viewports entscheiden, und dann mit dem Nachteil leben müssen, dass User dann halt ggf. etwas mehr zoomen müssen ...!
Gruß Gunther
-
-
