Hi Forum,

Trifft es zu, dass man Schriftgrößen (auch für Content-Fließtext) mittels CSS flüssig an die Breite des Viewport anpassen kann?

Falls ja: kann man dabei auch minimale und maximale Schriftgrößen definieren?

Dankbar wäre ich für einen Link auf eine Beispielseite -- oder auf eine Seite, wo erklärt wird, wie man eine solche flüssige (also nicht adaptiv stufenweise) Schriftgrößenanpassung programmiert.

Grüße
Silber

Hallo!

Schau mal hier: CSS3: Viewport Units - Neue Einheiten für responsive Designs - Dr. Web

Ob du damit allerdings (gerade bei Schriften) wirklich glücklich wirst, musst du selber wissen. Klitzekleine Schrift bei klitzekleinem Viewport kann ja schließlich auch nicht die Lösung sein.

__________________
Gruß schatzi

OK danke für den Link.
Deswegen auch meine Frage, ob man bei der Verwendung von Viewport Units trotzdem noch minimale/maximale Schriftgrößen festlegen kann?

Werden die Viewport Units von den Browsern auch schon verbreitet unterstützt?

Bei diesem Beispiel aus dem Link zu drweb:
... wird die Schrift ja je nach Viewportbreite beliebig klein und beliebig groß, was natürlich oft unerwünscht ist.

Kann ich für die Schriftgröße auch eine Formel angeben wie z.B. folgende
... so dass sich die Größe des Viewport zwar auf die Schriftgröße auswirkt, aber nicht so stark und außerdem mit der unteren Grenze bei 8px?

Hallo!
Schau hier: Can I use... Support tables for HTML5, CSS3, etc

Du kannst es mal mit "calc" versuchen, aber das habe ich jetzt nicht getestet.

Ich persönlich halte es nach wie vor für schlauer, bei Schriftgrößen den adaptiven Weg über MediaQueries zu gehen.

__________________
Gruß schatzi

Vielleicht liest Du erst mal den verlinkten Artikel zu ende.
Die „Media Queries“ gibt es auch noch.

__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/

Vielleicht gibst du mal an, wo in dem verlinkten Artikel etwas zu dieser Frage stehen soll. Tipp: in dem Abschnitt "Größe abhängig vom Seitenverhältnis definieren" steht es schon mal nicht.

OK danke.

Habe die Viewport Units gerade mal schnell auf einer Seite ausprobiert, sowohl im Fließtext als auch beispielsweise bei textbasierten Menüs, funktioniert super und praktisch stufenlos.

Nur schade, dass man die Textgröße nicht auch basierend beispielsweise auf der Breite des Parent Div angeben kann, sondern auf die Breitenrelation des Viewport beschränkt ist (außer man verwendet SVG, wie in dieser Diskussion angesprochen). Hier mal ein JSFiddle gebaut.

Yeah! hab es gerade mit
...probiert, und funktioniert einwandfrei! Man kann also die Schriftgröße beliebig "gemäßigt" an den Viewport anpassen, insbesondere ohne dass sie nach unten hin zu klein werden kann.

Vollständigkeitshalber auch hierzu noch nen JSFiddle:

https://jsfiddle.net/srpekaLL/3/

Hallo

Das Beispiel zeigt auch gleich die Nachteile des Vorgehens.

Nicht jeder hat solche Adleraugen wie du. Einer der größten Kritikpunkte von Webseiten sind zu kleine Schriften, die dann von vielen Usern kaum noch gelesen werden können. Häufig wird bereits die Standardschrift der Browser als zu klein empfunden.

Bei kleinen Viewports sollte die Schrift eher noch vergrößert werden, da diese häufig auf Smartphones / Tabletes zum Tragen kommt, die mobil genutzt werden. Heißt: Das Gerät hat keinen gleichmäßigen Abstand zu den Augen und zittert auch noch, zum Beispiel bei Bahnfahrten, Busfahrten und ähnlichem.

Grade mit aktuellem, responsive, Design ist das heutzutage problemlos möglich.

Deinen Besuchern tust du mit deinem Vorgehen jedenfalls keinen Gefallen.

Gruss

MrMurphy

Das stimmt natürlich. Es geht hier aber auch nicht um den Fließtext, sondern um ein Hauptmenu, welches im Header oben quer verläuft. Dieses macht Schwierigkeiten, da es je nach Browserbreite teilweise nicht mehr passt und dann unerwünscht zweizeilig wird, was wiederum die Navigation im Content-Bereich verhaut.

Die unterschiedlichen Endgeräte werden sowieso mit gänzlich verschiedenen Layouts responsiv versorgt.

Edit: Haha, oder man nimmt einfach so was wie Dann wird die Schrift umso größer, je schmaler der Browser