responsive design, font-size, zoom

[michaah]

In aller Kürze:

Welchen Grundgedanken oder besser welche logischen Abhängigkeiten muss ich berücksichtigen damit Schriften nicht den eigentlich gedachten Rahmen und dann das Design sprengen wenn der User die Seite zoomt.

Ausführlicher:

Gestern beim Testen mit nicht so ganz verschiedenen Browsern (chromium und Vivaldi, selbe rendering engine) bin ich fast ausgeflippt, weil ich zunächst gar nicht verstanden habe was passiert. Insbesondere waren Schriften um Größenordungen unterschiedlich, was dann zu overflow oder Zeilenumbrüchen oder gedehneten umgebenden boxen führte wo dies nicht gewünscht war. Ein (scheinbar) stimmiges Design sah im anderen Browser zerrissen aus.

Ich habe das erst erkannt als ich meine voreingestellte Zoomstufe (in Vivaldi 160%! Ich finde nahezu alle Webseiten augenarzt-, nicht patientenfreundlich, um mich hier mal bildlich auszudrücken. Nein ich sehe nicht sonderlich schlecht) auf "0" zurückgenommen hatte.

Mal von der Tatsache abgesehen, dass auch die beiden verwandten Browser selbst bei neutraler Grundeinstellung Schriften unterschiedlich groß rendern (auch wenn dann der Unterschied nicht so gravierend ausfällt, geschätzt beträgt der Unterschied ca. 10-20%) fand ich die erschreckenste Feststellung, dass von mir besuchte Webseites sowohl in Neutralstellung als auch mit der von mir bevorzugten Zoomeinstellung inkl. erhöhtem Faktor in der Schriftauswahl ihr Grunddesign nicht zerrissen UND die Schriften sich meist nur mäßig vergrößern. In meiner eigenen Website (nein, die will ich hier jetzt nicht zeigen, auch weil es mir erstmal um das Verstehen des Grundgedankens der sinnvollen Definition von Schriftgrößen geht) führt zoomen jedoch sehr schnell zum Zerlegen des Designs.

Ganz verschwommen argwöhne ich dass der Kern des Problem irgendwo dort liegt, worauf sich eine bestimmte Größenangabe bezieht: % von was? em bezogen auf was? Natürlich verwende ich weder px noch pt.

Zurück zur Grundfrage: Welches Grundprinzip veranschaulicht augenfällig die Abhängigkeit von Schrift und übergeordnetem, sie maßgeblich beeinflussendem Element.

Weiter verkompliziert wird das für mich dadurch, dass mir nicht klar ist wann (Text-) Inhalt über eine Box hinausfließt, oder umgebrochen wird oder die Box dehnt. Ist dies ohne weitere Angaben für alle Boxen gleich?

Irgendwie ist das gerade wie: Gehen sie zurück auf Los.