Sie sind hier: Startseite · Artikel · Flexible Font

Flexible Font Size

Hinweis: Dieser Artikel wurde seit längerer Zeit nicht aktualisiert.
Die beschriebenen Techniken funktionieren weiterhin, sollten aber ggf. an aktuelle Anforderungen angepasst werden.

Die vorgestellte Lösung macht leider die Browserfunktionalität "Zoom" kaputt. Ein Usabiltiy-Supergau! Und auf Smartphones, wo "Zoom" kein Thema ist, macht die Verwendung von vh Probleme. Ich habe die Funktionalität daher natürlich umgehend deaktiviert, d.h. das CSS entfernt.

Die "richtige" Schriftgröße ist eines der wichtigsten Elemente bei der Gestaltung einer Website. Leichter gesagt als getan. Weil die "richtige" Größe immer subjektiv ist, stelle ich seit jeher sicher, dass der Besucher die für ihn passende Schriftgröße selbst wählen kann.

Das Responsive Web Design (RWD) stellt diesbezüglich noch einmal erweiterte / höhere Anforderungen. RWD erhebt den Anspruch, Webseiten auf jeder Monitorgröße optimal darzustellen. Dazu gehört ganz bestimmt auch eine von der Größe des Monitors abhängige Schriftgröße.

Der "klassische" Ansatz, um für unterschiedliche Monitorgrößen unterschiedliche, jeweils passende Schriftgrößen anzubieten, besteht in der Verwendung von Media Queries.

Ich habe einen anderen, flexibleren Ansatz gewählt: Schriftgröße in Abhängigkeit des Viewports (= Größe des Browserfensters). Zum Einsatz kommen die CSS-Viewport-units vh, vw und vmin.

Viewport units:
Längeneinheiten, die einen Prozentsatz der aktuellen Viewport-Abmessungen darstellen: Breite (vw), Höhe (vh), der kleinere der beiden (vmin) oder der größere der beiden (vmax).

Quelle caniuse.com

:root { font-size: calc((1vw + .5vh + .5vmin)*1.9);} body{font-size:1em;}

Das Ergebnis kann jeder auf meinen Seiten selbst testen. Einfach das Browserfenster mit der Maus vergrößern / verkleinern.

Danke an Matt Smith

Copyright-Hinweis

Artikeltexte und Code-Snippets: Creative Commons  CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.

1. Roland Hentschel schrieb am Donnerstag, 01.08.19 08:58 Uhr:

   Hallo, hier meine eigene Lösung (die beiden Werte in $ratio sind variabel) :

   <style type="text/css">
   * { margin:0; padding:0; box-sizing:border-box; }
   body { font-size:16px; }
   div div { margin-left:16px; }
   #wrapper { min-width:400px; max-width:800px; }
   </style>
   <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
   <script type="text/javascript">
   <!--//
   $(document).ready( function() {
   $("#wrapper div").addClass("flex");
   $(window).resize( function() {
   var $w_max = parseFloat($("#wrapper").css("max-width"));
   var $w_act = parseFloat($("#wrapper").css("width"));
   var $ratio = 0.02 + $w_max / $w_act / 50;
   $(".flex").each( function() {
   $(this).css("font-size", $w_act * $ratio + "px");
   });
   $(".no-flex").css("font-size", $("body").css("font-size"));
   }).resize();
   });
   //!-->
   </script>[/c]