Flüssigen Typografie

Als der Begriff Responsivität zum ersten Mal in den Wortschatz von Vermarktern und Webdesignern einging, verwendeten wir ihn, um die Zukunft des E-Mail- und Website-Designs zu beschreiben. Insbesondere Webdesigner standen vor einer großen Herausforderung: Websites zu erstellen, die Mobil-, Tablet- und Desktop-Benutzern eine Website bieten, die nicht nur auf ihre Bildschirme passt, sondern auch ein angenehmes Erlebnis bietet.

Reaktionsfähigkeit ist kein neuer Trend, aber ein sehr wichtiger. Die Benutzererfahrung ist ein Hauptfaktor dafür, wie Google Ihre Website bewertet und ob sie in den Suchergebnissen erscheint oder nicht. Es ist Google so wichtig, dass sie einen kostenlosen Beratungsservice anbieten .

Auch für diejenigen, die sich Mühe gegeben haben, ihre Websites responsiv zu gestalten, gibt es noch viel zu tun, um den Besuchern ein besseres Erlebnis zu bieten. Was sich jedoch wirklich geändert hat, ist die Definition dessen, was der Begriff „alle Geräte“ eigentlich bedeutet.

Wenn jemand vor ein paar Jahren „reagierbar auf allen Geräten“ sagte, meinte er wahrscheinlich drei Geräte:

• Desktop
• Tablette
• Smartphone

Obwohl dies die drei am häufigsten beschriebenen Gerätetypen sind, müssen wir uns darüber im Klaren sein, dass unsere Website-Besucher unsere Website möglicherweise auf einer Vielzahl von Bildschirmgrößen betrachten, von großen Apple Macs bis hin zu leichten Laptops mit kleineren Bildschirmen. Die Technologie schreitet weiter voran und wir müssen auf neue und aufregende Gerätetypen wie tragbare Technologie und VR vorbereitet sein.

Konzentrieren wir uns auf ein Element des responsiven Designs – den 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 Pixel (px) für unterschiedliche Bildschirmgrößen.

Wenn Sie die Website auf Ihrem 9-Zoll-Tablet öffnen, wird die Schriftgröße kleiner.

Aber was ist mit den 7'' oder 12'' Tablets? Bleibt die Schriftgröße gleich? Hier nähern wir uns dem Konzept derflüssigen Typografie .

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

Sie stimmen mir zu, wenn ich sage, dass es unmöglich wäre, die Schriftgröße für jedes dieser Geräte festzulegen.

Tatsächlich wäre es verrückt, wenn jemand es überhaupt versuchen würde. Aus diesem Grund haben sich einige kluge Köpfe die flüssige Typografie ausgedacht, sodass sich Schriftarten selbstständig in der Größe ändern können. Wie? Durch Definieren der relativen Schriftgröße basierend auf der tatsächlichen Bildschirmgröße.

Anstatt die genaue Schriftgröße zu definieren, können Sie REM-Einheiten verwenden, die relativ zur Schriftgröße des Stammelements sind (klingt kompliziert, aber haben Sie Geduld, wir werden versuchen, Sie nicht einzuschläfern (kleines REM-Wortspiel? Nein. Okay lasst uns weitermachen) .

Die meisten Browser haben standardmäßig eine Schriftgröße von 16 Pixel eingestellt, damit wir den Text problemlos lesen können. Wenn Sie also mit REM eine 16-Pixel-Schriftart auf Ihrer Website haben möchten, sagen Sie, dass Ihre Schriftgröße 1rem ist. Sie können dies auch verwenden, um Ihre Schriftgröße relativ zu ändern, z. B. 0,75 rem (12 Pixel) oder größer oder 1,25 rem (20 Pixel) usw.

EM-Einheiten funktionieren ähnlich. Sie definieren Ihre eigene Basisschriftgröße für alle anderen Schriftgrößenberechnungen.Mehr über EM-Geräte können Sie hier lesen.

REM- und EM-Einheiten werden häufig in der Sprungtypografie verwendet. Sie können damit schöne, responsive Websites erstellen, aber der Übergang von einer kleineren Schriftgröße zu einer größeren (und umgekehrt) wird nicht so reibungslos verlaufen, wie er mit noch relativeren Einheiten wie Vh und Vw sein könnte.

Vh steht für Viewport-Höhe und Vw für Viewport-Breite. Anstatt also wie in REM- und EM-Einheiten auf die Stammschriftgröße im Browser zu achten, wird die ideale Schriftgröße anhand der Höhe und Breite des Bildschirms berechnet, auf dem Sie Ihre Website anzeigen. Das ist ein Hokuspokus im KI-Stil der nächsten Stufe!

Um Vh und Vw zu verwenden, müssen Sie lediglich die größte und die kleinste gewünschte Schriftgröße definieren, um sicherzustellen, dass die Schriftart in allen Fällen gut 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 zukunftssicheres Website-Optimierungs-Genie.

Wenn Sie also gerade dabei sind, eine neue Website zu erstellen, schauen Sie sich den Code genauer an und finden Sie heraus, wie die Schriftgröße definiert ist. Eine springende Typografie sorgt dafür, dass Ihre Website responsive ist.

Wenn Sie jedoch für die Zukunft gerüstet sein möchten, entscheiden Sie sich für die Schriftgrößeneinheiten Vh und Vw. Wenn Ihre Website die flüssige Typografie verwendet, sieht sie immer ordentlich aus und ist lesbar.

Dies ist ein Gastbeitrag von JarinkaBalcova, erfahrener Vermarkter und WordPress-Enthusiast bei Ait-Themes.club . Ait Themes ist ein Webentwicklerunternehmen mit mehr als 9 Jahren Erfahrung auf dem Markt und 85.000 zufriedenen Kunden weltweit. Die Hauptnische sind mehrsprachige WordPress-Themes. Spezialisiert auch auf Verzeichnisse und Auflistungen von WordPress-Themes und erweiterten Plugins.