CSS: Schriftgröße mit vw anpassen

Tabelle: Umrechnen von vw auf em / px

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.

vw und vh (View Units) sind 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;
    }
 }

	1vw	2vw	3vw	4vw	5vw
300px	3px	6px	9px	12px	15px
400px	4px	8px	12px	16px	20px
500px	5px	10px	15px	20px	25px
600px	6px	12px	18px	24px	30px
800px	8px	16px	24px	32px	40px
1200px	12px	24px	36px	48px	60px
2400px	24px	48px	72px	96px	120px

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.

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.

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. 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 sind die Grenzen, seitdem sich min(), max() und clamp() zu calc() gesellen. Jetzt haben wir fließende Schriftgrößen ohne Sprung von einem Breakpoint zum nächsten:

                         + bevorzugter Wert
                         |
font-size: clamp(1rem, 3vw, 1.4rem);
                    |           |
                    +           +
            Untergrenze       Obergrenze

CSS clamp() ist eine neue Technik, die zwischen einem minimalen und einem maximalen Wert wählt und wird jetzt von allen immergrünen Browsern unterstützt.

Externe Quellen

• Vimeo Video Smashing Conf Freiburg 2017 on Media Queries
• Schriftgrößen in vw (viewport width) – die Netzialisten
• Schriftgrößen in vw – Bilder mit Texten proportional skalieren – beim Kulturbanausen
• Linearly Scale font-size with CSS clamp() Based on the Viewport