CSS: Schriftgröße anpassen mit vw

CSS min font-size und max font-size mit vh

Am Anfang war der Pixel … das war einfach (vergessen wir mal, dass es auch pt gab). Heute haben wir einen ganzen Keller voller Maßeinheiten für Schriftgrößen, Abstände, Breite und Höhe von Elementen.

Die Anpassung von Schriftgrößen in ein responsives Layout der Webseite stellt trotz der einfachen Installation von CSS Breakpoints hohe Ansprüche an das Webdesign und den Pragmatismus.

Tabelle: Umrechnen von vw auf em / px

vw ist ein kleiner Schritt zur fluiden Typografie – zu Textabsätzen, die nicht beim Verkleinern und Vergrößern des Browserfensters umbrechen, sondern einfach mit einer kleineren oder größeren Schrift ihren Platz ausfüllen.

Reprehenderit, enim eiusmod high life mainus goethe ad squid. 3 sachsendomus high noon officia, non vegan maiscolbus dolor. Flooter boot quinoa rasant eiusmod.

Überschriften, die bei verschiedenen Viewports nicht in eine zweite oder dritte Zeile umbrechen, ohne dass hier und da ein weiterer Breakpoint eingebaut werden muss? Das geht mit vw und ein oder zwei Breakpoints anstellen von zahllosen Flickwerken im CSS.

blockquote {
   font-size: 3vw;
   max-width: 620px;
   padding: 3vw; 
}

@media (min-width:630px) {
   blockquote {
      font-size: 18px;	
   }
}
1vw2vw 3vw 4vw 5vw
300px3px6px 9px12px15px
400px4px8px 12px16px20px
500px5px10px15px20px25px
600px6px12px18px24px30px
800px8px16px24px32px40px
1200px12px24px36px48px60px
2400px24px48px72px96px120px

Die Spalte 3vw zeigt, wo das Wachstum aufhört, weil das Layout den Platz für das Blockquote-Element begrenzt: Bei etwa 600px Breite entspricht eine Schriftgröße von 3vw ungefähr 18px.

Home Impressum Kontakt Datenschutz CSS, HTML und Javascript mit {stil} Reprehenderit, enim eiusmod high life mainus goethe ad squid. 3 sachsendomus high noon officia, non vegan maiscolbus dolor. Flooter boot quinoa rasant eiusmod.

Schriftgröße vw

Soweit wäre das schon nett, aber die Sache hat einen Haken: Auf kleinen Monitoren – Handy hochkant – sind 9px einfach zu klein. Dummerweise hat CSS eine ganze Flut von Eigenschaften, aber eine Eigenschaft min-font-size gibt es nicht. So ist Schriftgröße 18px oder 1.125em auf dem Handy hochkant angemessen, aber schon bei einem Viewport von 480px Breite ist die Überschrift kleinlich, auf dem Notebook oder Desktop dann definitiv zu nebensächlich.

CSS min Schriftgröße max Schriftgröße

Mainus goethe ad squid

Sachsendomus noon aute, vegan maiscolbus flood boot laborum rasanti.



	

font-size: 18px setzt im Grunde genommen eine Mindestgröße für die Schrift, die uns CSS bislang noch nicht mitbringt. Auf größeren Monitoren wächst die Schriftgröße mit: Die Tabelle zeigt, dass font-size:3vw bei einem Viewport von 600px bei 18px liegt, bei einem 800px-Viewport schon bei 24px und 72px bei einem Viewport von 2400px.

Schon klar: Wo min-font-size gebraucht wird, wird früher oder später auch max-font-size unentbehrlich, damit die Überschrift keine zweite Zeile aufschlägt und der Overlay das Bild zudeckt.

Der vorherige Absatz hat zwar mit Hilfe des Breakpoints ein max-font-size ins Leben gerufen, aber die Vereinigung von min-font-size und max-font-size wird von calc vollbracht.

              min-font-size               min-screen-size
                    |                            |
h4 {                |                            |
   font-size: calc(18px + (24 - 18) * (100vw - 400px) / (800 - 400));
}                             |                               |
                              |                               |
                 max-font-size - min-font-size       max-screen-size - min-screen-size

Sieht komplizierter aus als es ist, sondern der Umgang mit vw ist einfach nur gewöhnungsbedürftig und die Ausdrücke (24-18) und (800-400) sollten gekürzt werden. Dafür spart die Konstruktion zusätzliche Breakpoints und lässt sich mit CSS-Variablen oder Custom Properties auch allgemeiner fassen.

Besser lesbar würden die Grenzen, wenn sich min(), max() und clamp() zu calc() gesellen. Bislang stecken min() und max() nur in Safari.

font-size: max(10 * (1vw + 1vh) / 2, 12px)
SITEMAP BLOG