Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Flexible Font Size

Die vorgestellte Lösung macht leider die Browserfunktionalität "Zoom" kaputt. Ein Usabiltiy-Supergau! Ich habe die Funktionalität daher natürlich umgehend deaktiviert, d.h. das CSS entfernt.

Symbolbild

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 + 1vh + .5vmin)*.67);} 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

Creative Commons Lizenzvertrag
Artikeltext (nicht Bilder!) Creative Commons CC BY-NC-SA 3.0 DE

Ihr Kommentar zu diesem Artikel:

Über Ihren Kommentar zu diesem Artikel freue ich mich. Ich behalte mir jedoch vor, Spam kommentarlos zu entfernen.