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 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 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.
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.
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
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.
Als gelernter Typograf liegt mir Schriftsatz im Blut. In der aktuellen Webentwicklung spielen gut gesetzte Typografien, eine immer größere Rolle.
© 2024 Pixlmania. Alle Rechte vorbehalten