Fluid typografie ist eine schicke Art, „Schrifteigenschaften wie Größe oder Zeilenhöhe zu beschreiben, die sich fließend an die Größe des Viewports anpassen“. Sie ist auch unter anderen Namen bekannt, wie z. B. Responsive Typografie, Flexible Typografie, Fluid Typografie usw.
Als Chris mir diesen Vorschlag zum ersten Mal schickte, dachte ich darüber nach, über Progressive Enhancement zu schreiben, aber das Thema ist so weitreichend, um nur eine Sache zu sein, und allzu vorhersehbar, besonders für diejenigen, die bereits mit meinen Texten vertraut sind. Abgesehen davon, was …
Sara taucht in einen Bug ein, auf den ich im Jahr 2012 gestoßen bin, bei dem sich die Fluid-Typografie nicht änderte, wenn das Browserfenster seine Größe änderte. Damals betraf es Chrome 20 und Safari 6, aber der Bug besteht heute in Safari immer noch ...
Responsive Typografie wurde in der Vergangenheit mit einer Vielzahl von Methoden wie Media Queries und CSS calc() versucht.
Hier werden wir einen anderen Weg erkunden, um Text linear zwischen einem Satz von minimalen und maximalen ... zu skalieren.
Fun Fact: Es ist möglich, responsive Komponenten ganz ohne Media Queries zu erstellen. Sicherlich wären Container Queries sehr nützlich für responsives Design auf Komponentenebene. Aber wir haben keine. Trotzdem, mit oder ohne ...
Schönes Video von Kevin Powell. Hier sind einige Notizen, Gedanken und Dinge, die ich beim Ansehen gelernt habe. Sobald sie herauskamen, war ich meist von der Verwendung von font-size besessen, aber es sind nur Funktionen, also können sie überall verwendet werden ...
CSS hat keine max-font-size, daher müssen wir trickreich vorgehen, wenn wir etwas Ähnliches brauchen.
Warum sollte man es überhaupt brauchen? Nun, font-size selbst kann dynamisch gesetzt werden. Zum Beispiel font-size: ...
Fluid typografie ist die Idee, dass sich font-size (und vielleicht andere Attribute von Schriftarten wie line-height) je nach Bildschirmgröße (oder vielleicht Container Queries, wenn wir welche hätten) ändern.
Der Kern des Tricks liegt in Viewport-Einheiten. Man kann Schriftarten buchstäblich in Viewport-Einheiten einstellen (z. B. font-size: 4vw), aber die Schwankungen der Größe sind so extrem, dass dies normalerweise unerwünscht ist. Schauen wir uns eine Technik an, um die Extreme zu dämpfen, aber es ist im Grunde eine Einzeiler, da sich CSS weiterentwickelt!
