In letzter Zeit gab es ein paar Artikel zum Thema fluide Typografie.
Matt Smith (nennt es „flexible Typografie“)
Mein bevorzugter Ansatz für flexiblere Typografie ist die Berechnung der Schriftgröße basierend auf der Viewporthöhe und -breite unter Verwendung des
:root-Selectors.
Richard Rutter (nennt es „Responsive Display Text“)
Mit einem Schlag können Sie die Größe einer Überschrift festlegen, die proportional zur Bildschirm- oder Browserbreite ist, anstatt aus einer Skala in einer Reihe von Media Queries zu wählen.
Beides zielt darauf ab, Viewport-Einheiten zu nutzen, um Schriftarten zu skalieren, die nicht sprunghaft zwischen Größen an Breakpoints wechseln, sondern sich anmutig skalieren.
Ich kann Mike Riethmullers Fluid type wärmstens empfehlen, was fast genauso einfach ist, aber das Festlegen von Minimal- und Maximalgrößen ermöglicht, was für mich der richtige Weg zu sein scheint.
Ich habe kürzlich auf Fluid Type auf den CodePen-Blogs umgestellt und ich liebe es. Beachten Sie, dass wir auch Mikes flüssige modulare Skala gestohlen haben. Das heißt, auf großen Bildschirmen ist der Größenunterschied zwischen h1-h6 drastischer, während er auf kleinen Bildschirmen fließend skaliert wird.
„Fluid Type“ i̶n̶s̶p̶i̶r̶i̶e̶r̶t̶ gestohlen von @MikeRiethmuller jetzt live auf den @CodePen Blogs. Inklusive „Fluid Modular Scale!“ pic.twitter.com/0yJk8Iq8fR
— Chris Coyier (@chriscoyier) 27. Oktober 2016
Ein „CSS-Lock“ ist, wie Tim Brown diese Minima und Maxima nennt, und er zeigt, dass es sowohl für line-height als auch für font-size nützlich sein kann.
Es lohnt sich, unseren neueren Beitrag Simplified Fluid Typography für praktische, geklemmte, viewportbasierte Typengrößen zu lesen.
Ich bin wirklich begeistert von dieser Technik, aber ich denke (wie bei vielen Dingen im Web), dass man damit vorsichtig sein muss. Ich habe einige Beispiele gesehen, bei denen Leute flüssige Typografie ohne Größenbeschränkung implementieren, was die Dinge waaaay zu groß machen kann. Das Endergebnis ist eine gute Zeilenlänge in Bezug auf die Zeichenanzahl, aber schlechte Lesbarkeit aufgrund des Betrachtungsabstands (persönlich finde ich alles über 30 Pixel für Fließtext seltsam und schwer lesbar aus etwa einem Fuß Entfernung).
Für Großbildschirme wie digitale Kioske und Wohnzimmerfernseher könnte eine großzügige Skalierung des Maximums die Lösung sein, um überdimensionierten Text in diesen Kontexten angemessen zu unterstützen.
Aber selbst für 4K-Monitore, die auf Systemen mit geringer oder keiner UI-Skalierung verwendet werden, finde ich Text auf bestimmten Websites schwer zu lesen, da die Typografie zu klein ist.
Ich bin neugierig, wie flüssige Typografie neben der Viewport-Größe auch die Pixeldichte adressieren kann.
@chriscoyier, das könnte eine Gelegenheit sein, die UX-Daten aus deinem Beitrag über Bildschirmgrößen zu erweitern :) https://css-tricks.de/google-analytics-can-show-screen-resolution-%E2%89%A0-browser-window/
Ich benutze einfach VW-Einheiten (Viewport-Breite) und eine Media Query für kleine Bildschirme.
Man kann auch das Zoomen verabschieden. Bitte lesen Sie das.
Vielleicht, weil ich ein Neuling in der Programmierung bin, aber für mich funktioniert 'em' überhaupt nicht, da ich versuche, semantischen Code mit Sektionen zu erstellen und manchmal verschachtele ich darin drei / vier Aria-Hidden-H1, nur. Außerdem sind 'vh' und 'vw' nicht perfekt, da sie nicht auf Zoom reagieren. Derzeit suche ich immer noch nach den besten adaptiven Lösungen für meine ersten Webseiten und versuche, mit der Installation von vmin, vmax basierend auf Media Queries für die Schriftgröße im Body-Tag und 'rem' für Überschriften zu experimentieren. Danke, Chris, für diesen Beitrag. Ich hoffe, auch weitere Kommentare basierend auf unterschiedlichen Erfahrungen und Ideen Ihrer erfahrenen Leser zu lesen.