Feb, 23

Typografische Gestaltung – Schriftarten und Größen im Netz

Schriftarten sind ein wichtiger Bestandteil des Webdesigns. Sie tragen dazu bei, die Lesbarkeit und die visuelle Hierarchie einer Webseite oder Onlineshops zu verbessern. Es gibt verschiedene Arten von Schriftarten, die im Web verwendet werden können.

Systemschriftarten

Systemschriftarten sind Schriftarten, die auf dem Computer des Benutzers installiert sind. Sie können verwendet werden, um die Schrift auf einer Webseite darzustellen. Der Vorteil von Systemschriftarten ist, dass sie auf jedem Computer und jedem Browser verfügbar sind, ohne dass sie heruntergeladen werden müssen. Der Nachteil ist, dass nicht alle Schriftarten auf allen Computern installiert sind und es zu Inkonsistenzen in der Darstellung kommen kann.

Web-Schriftarten

Web-Schriftarten sind Schriftarten, die von einer Webseite heruntergeladen und verwendet werden, um die Schrift auf der Seite darzustellen. Der Vorteil von Web-Schriftarten ist, dass sie auf jedem Computer und jedem Browser verfügbar sind, solange sie von der Webseite heruntergeladen werden. Der Nachteil ist, dass sie die Ladezeit der Webseite beeinträchtigen können und nicht immer von allen Geräten unterstützt vollständig werden.

Schriftarten aus der Cloud

Eine weitere Möglichkeit Schriftarten zu nutzen, ist es diese aus der Cloud zu laden, wie zum Beispiel bei den Google Fonts. Das bedeutet, dass die Schriftarten auf einem Server gespeichert werden und von dort auf den Browser des Users. Wir raten allerdings vom Einbinden der Google Cloud Fonts ab. Sie entsprechen nicht der europäischen DGSVO und übertragen Benutzerdaten an Google. Mehr Informationen dazu erfährst du hier. Du kannst diese Schriftarten aber dennoch benutzen, indem du sie auf deinen eigenen Server lädst.

Schriftgröße im Netz

Machen wir uns nichts vor, wenn du eine eigene Webseite oder einen Shop betreibst, kennst du das Dilemma. Auf einem Gerät sieht deine Seite großartig aus, auf dem nächsten Gerät ist kaum etwas erkennbar. Geschuldet ist das dem Fakt, dass so gut wie jedes Endgerät eine andere Auflösung und Displaygröße besitzt. Glücklicherweise sind Pixel nicht die einzige Möglichkeit, Schriftgrößen im Web anzupassen. Einige weitere Möglichkeiten in Form von em, und rem möchten wir dir gern vorstellen.

Lass uns hier im Beispiel davon ausgehen, das eine Schriftgröße von 16 Pixel den Ausgangspunkt bildet.

Die Angabe em bezieht sich auf die Schriftgröße des jeweiligen Elternelements. 1.25 em bei 16 Pixel würden 20 Pixel also 125% ergeben. Veranschaulicht dargestellt, bedeutet das folgendes:⠀

Dokument -> 16px

– Kind1 -> 1.25em = 20px
– – Enkel1 -> 1.25em = 25px

– Kind2 -> 1.5em = 24px
– – Enkel2 -> 0.5em = 12px⠀

Im obigen Beispiel ist gut erkennbar, dass die Angabe des jeweiligen Elternelements ausschlaggebend ist. Im Gegensatz dazu steht die Größenangaben rem welche sich auf das erste Schriftgrößengebende Element bezieht, was im obigen Beispiel das Dokument wäre. Das Beispiel wie oben würde mit rem folgendes ergeben.

Dokument -> 16px⠀

– Kind1 -> 1.25rem = 20px⠀
– – Enkel1 -> 1.25rem = 20px⠀

– Kind2 -> 1.5rem = 24px⠀
– – Enkel2 -> 0.5rem = 8px⠀

Beide Angaben sind aus der modernen Webentwicklung nicht mehr wegzudenken und bilden in Kombination mit Pixeln als Größenangaben das Rückgrat von responsive Webdesign.

Funfact: em ist keine Abkürzung sondern entstand schon weit vor den Computern. Genauergesagt bezog es sich auf die Größe eines großgeschriebenem M in der Schriftsetzung.

Grid als Hilfsmittel

Das Baseline-Grid ist ein Raster, das verwendet wird, um die Schriftgrößen und –Abstände auf deiner Webseite besser auszurichten. Es hilft dir dabei, die visuelle Hierarchie zu verbessern und sicherzustellen, dass die Schriften auf der gleichen horizontalen Linie, der Baseline, stehen

Es wird häufig in der Typografie verwendet, um sicherzustellen, dass die Schrift auf der gleichen horizontalen Linie (der Baseline) ausgerichtet ist und eine harmonische visuelle Struktur erzeugt wird. Das Grid besteht aus horizontalen Linien, die die Schriftzeilen auf einer Seite durchziehen. Jede Schriftzeile sollte auf einer dieser Linien beginnen und enden, was dazu beiträgt, dass die Schriftzeilen auf der Seite ausgerichtet und einheitlich aussehen.

Auf diese Weise wird sichergestellt, dass die Schriftzeilen auf der Seite gut lesbar sind und eine konsistente visuelle Hierarchie erzeugt wird. Baseline-Grids können manuell erstellt werden, indem man Linien in ein Layout-Programm zieht und die Schriftzeilen darauf ausrichtet, oder es kann automatisch erstellt werden mit Hilfe von verschiedenen Design-Tools. Viele CSS-Frameworks unterstützen das Baseline-Grid und erleichtern damit die Umsetzung. Ein Online Grid Kalkulator kann dich beim Ausrichten und Erstellen deines Baseline-Grids unterstützen.

Weitere Gestaltungsrichtlinien

Stelle sicher, dass die Schriftart leicht zu lesen ist und eine klare Hierarchie auf deiner Seite zu erkennen ist.
Achte darauf, dass der Kontrast zwischen Schriftfarbe und Hintergrund hoch genug ist, um eine gute Lesbarkeit. Prüfen kannst du es hier: Colourcontrast
Verwende Schriftgrößen, die für den Inhalt der Seite angemessen sind. Überschriften sollten größer als der Grundtext sein.
Kombiniere Schriftarten, die gut zusammenpassen und eine harmonische visuelle Struktur erzeugen. Vermeide es, zu viele unterschiedliche Schriftarten auf deiner Webseite zu verwenden.
Stelle sicher, dass die verwendeten Schriftarten heruntergeladen werden und in den gängigen Browsern dargestellt werden.
Achte auf kompakte Schriftarten, die die Ladezeit deiner Webseite nicht beeinträchtigen.

Als gelernter Typograf liegt mir Schriftsatz im Blut. In der aktuellen Webentwicklung spielen gut gesetzte Typografien, eine immer größere Rolle.

Mehr interessante Beiträge

Gestaltung

Mrz 06, 23

Farbpsychologie – Welche Rolle spielt sie in der Gestaltung?

Einblicke

Mrz 05, 23

Linux Laptop – das Upgrade meines treuen MacBooks

Gestaltung

Mrz 03, 23