Flüssige Typografie

Als der Begriff Responsivität erstmals in den Wortschatz von Vermarktern und Web Designern aufgenommen wurde, nutzten wir ihn, um die Zukunft des E-Mail- und Website-Designs zu beschreiben. Webdesigner standen vor einer großen Herausforderung – Websites zu erstellen, die mobilen, Tablet- und Desktop-Nutzern nicht nur auf ihren Bildschirmen passten, sondern auch ein angenehmes Erlebnis boten.

Responsivität ist kein neuer Trend, aber ein sehr wichtiger. Die Benutzererfahrung ist ein primärer Faktor dafür, wie Google Ihre Seite bewertet und ob sie in den Suchergebnissen erscheint oder nicht. Es ist Google so wichtig, dass sie einen kostenlosen Beratungsservice anbieten.

Selbst für diejenigen, die sich bemüht haben, ihre Websites responsiv zu gestalten, gibt es noch Arbeit zu leisten, um ein besseres Besuchererlebnis zu bieten. Aber was sich wirklich geändert hat, ist die Definition dessen, was der Begriff „alle Geräte“ tatsächlich bedeutet.

Vor ein paar Jahren, als jemand sagte „responsiv auf allen Geräten“, meinte er wahrscheinlich 3 Geräte:

• Desktop
• Tablet
• Smartphone

Während dies die 3 am häufigsten beschriebenen Gerätetypen sind, müssen wir uns bewusst sein, dass unsere Website-Besucher unsere Seite auf einer Vielzahl von Bildschirmgrößen betrachten können, von großen Apple Macs bis hin zu leichten Laptops mit kleineren Bildschirmen. Die Technologie entwickelt sich weiter und wir müssen auf neue und aufregende Gerätetypen wie Wearable Tech und VR vorbereitet sein.

Konzentrieren wir uns auf ein Element des responsiven Designs - Text. Wenn Sie von einem Gerät zum anderen wechseln, muss sich die Schriftgröße auf der Website ändern. Aber wie erreicht man das? Ganz einfach: Beim Codieren der Website definieren Sie unterschiedliche Schriftgrößen in Pixeln (px) für verschiedene Bildschirmgrößen.

Wenn Sie die Website auf Ihrem 9-Zoll-Tablet öffnen, wird die Schriftgröße auf eine kleinere Größe springen.

Aber was ist mit den 7’’ oder 12’’ Tablets? Bleibt die Schriftgröße gleich? Hier nähern wir uns dem Konzept der fluiden Typografie.

Stellen Sie sich die große Vielfalt an Geräten und Bildschirmgrößen vor, nicht nur zwischen den verschiedenen Marken, sondern auch bei den verschiedenen Modellen derselben Marke von Telefonen, Tablets oder Laptops, ganz zu schweigen von den großen Fernsehbildschirmen.

Sie würden mir zustimmen, wenn ich sage, dass die Definition der Schriftgröße für jedes dieser Geräte unmöglich wäre.

Tatsächlich wäre es verrückt, wenn jemand überhaupt versuchen würde, dies zu tun. Deshalb haben einige kluge Köpfe fluide Typografie entwickelt, damit sich Schriftarten von selbst anpassen können. Wie? Indem man relative Schriftgrößen basierend auf der tatsächlichen Bildschirmgröße definiert.

Anstatt die genaue Schriftgröße zu definieren, können Sie REM-Einheiten verwenden, die relativ zur Schriftgröße des Wurzelelements sind (klingt kompliziert, aber bleiben Sie bei uns, wir versuchen, Sie nicht einzuschläfern (kleiner REM-Witz? Nein. Okay, weiter geht's).

Die meisten Browser haben einen Standardwert von 16px für die Schriftgröße, damit wir den Text leicht lesen können. Wenn Sie also REM verwenden und eine Schriftgröße von 16px auf Ihrer Website haben möchten, geben Sie an, dass Ihre Schriftgröße 1rem beträgt. Sie können dies auch verwenden, um Ihre Schriftgröße relativ zu ändern, z.B. 0.75rem (12px) oder eine größere Größe wie 1.25rem (20px) usw.

EM-Einheiten funktionieren ähnlich, Sie definieren Ihre eigene Basis-Schriftgröße für alle anderen Schriftgrößenberechnungen. Hier können Sie mehr über EM-Einheiten lesen.

REM- und EM-Einheiten werden oft in der modernen Typografie verwendet. Mit ihnen können Sie schöne, responsive Websites erstellen, aber der Übergang von einer kleineren Schriftgröße zu einer größeren (und umgekehrt) wird nicht so reibungslos sein, wie es mit noch relativierteren Einheiten wie Vh und Vw möglich wäre.

Vh steht für Viewport-Höhe und Vw für Viewport-Breite. Anstatt also die Stamm-Schriftgröße im Browser zu betrachten, wie Sie es bei REM- und EM-Einheiten tun würden, wird die ideale Schriftgröße basierend auf der Höhe und Breite des Bildschirms berechnet, auf dem Sie Ihre Website anzeigen. Das ist jetzt eine Art von KI-Zauberei auf dem nächsten Level!  

Um Vh und Vw zu verwenden, müssen Sie nur die größte und die kleinste Schriftgröße definieren, um sicherzustellen, dass die Schrift in allen Fällen leicht lesbar ist und Sie eine Website mit einer wirklich flüssigen Typografie erhalten. Ta-da! Glückliche Website-Besucher. Außerdem sehen Sie aus wie ein zukunftssichernder Website-Optimierungsgenie.

Wenn Sie also dabei sind, eine neue Website zu erstellen, schauen Sie sich den Code genauer an und finden Sie heraus, wie die Schriftgröße definiert ist. Springende Typografie wird sicherstellen, dass Ihre Seite responsiv ist.

Aber wenn Sie sich für die Zukunft rüsten wollen, wählen Sie die Vh- und Vw-Schriftgrößeneinheiten. Wenn Ihre Website die flüssige Typografie verwendet, wird sie immer ordentlich aussehen und lesbar sein.

Dies ist ein Gastbeitrag von Jarinka Balcova, erfahrene Marketerin und WordPress-Enthusiastin bei Ait-Themes.club. Ait Themes ist ein Webentwicklungsunternehmen mit über 9 Jahren Erfahrung auf dem Markt und 85.000 zufriedenen Kunden weltweit. Die Hauptnische sind mehrsprachige WordPress-Themes. Sie spezialisieren sich auch auf Verzeichnis- und Listen-WordPress-Themes sowie fortgeschrittene Plugins.