Variable Textgrößen mit vw oder vh

Responsive Webseiten sind ja seit Jahren in aller Munde und bereits fester Standard. Trotzdem sind nur wenige Webseiten wirklich Responsive, vielmehr sind sehr viele hauptsächlich Adaptiv. Dies zeigt sich vor allem an dem Umgang mit Schriften, vor allem mit Headlines, die ja oft eine größere Darstellung haben.

Nicht selten findet man noch die Maßeinheit der px in der CSS Schriftauszeichnung (font-size: 12px). Zum Glück verwenden aber die meisten Webentwickler bereits em oder rem, was eine Vereinheitlichung der Darstellung vor allem auf den verschiedenen Endgeräte gebracht hat.

Es geht aber noch dynamischer und nur wenige nutzen dies. Beim Einsatz von vw oder vh bieten sich wirklich flexible Möglichkeiten, besonders wenn man größere Headlines darstellen möchte.

Probiert einmal font-size: 15vw und ihr werdet erleben wie sich die Headline schön variabel der Bildschriftgröße anpasst und stufenlos skaliert.

Verbunden z.B. mit einem transition: all 1s ease wird die Sache schön weich. Experimentiert damit.

Zurück