Vor ein paar Tagen haben wir an einem Webinar über Regeln zur Typografie im Webdesign teilgenommen. Hier prallen oftmals zwei Welten aufeinander. Schließlich können klassische Ansätze aus dem Grafikdesign bzw. Printeinsatz nicht einfach im Webdesign Anwendung finden.
Auch wenn wir viele Inhalte schon kannten, gab es auch nochmal interessante Ausblicke. In welche Richtung wird sich das Gestalten mit Schrift im Hinblick auf Barrierefreiheit und SEO bei Webseiten entwickeln, zum Beispiel.
Einen großen Dank vorweg an Anne-Milke Bovelett und Humberto Gregorio vom Elementor Meetup Düsseldorf, die das Webinar abgehalten haben!
Die 11 goldenen Typoregeln
- Keinen Blocksatz im Web benutzen – Linksbündiger Flattersatz ist im Webdesign die Wahl für Fließtexte
Gut, diese Regel war schon bekannt. Wir lesen von oben nach unten und von links nach rechts. Somit wird unser natürlicher Lesefluss durch linksbündigen Flattersatz gefördert.
Das empfinden Leser einfach als angenehm. (Blocksatz im Print kann natürlich trotzdem schön sein, wenn er gut gemacht ist.)
In Deutschland ist der Browsersupport für Silbentrennung sehr schlecht. Das ist aber eine Grundvoraussetzung für Blocksatz. - Das Mischen von Schriften
Mit einer Schriftfamilie kann man schon viel gestalten, besonders wenn man eine Schrift aussucht, die mehrere verschiedene Schriftschnitte hat. Gerade für Anfänger ist dieser Tipp sicher Gold wert.
Wenn man etwas mehr Erfahrung hat oder üben möchte, sollte man drauf achten, keine Schriften mit der gleichen Klassifikation zu mischen.
Also eine serifenlose Schrift und eine Handschrift oder eine Schrift mit Serifen wären gute Partner.
Diese Gegensätze sorgen für einen Kontrast, den wir als Betrachter als sehr ästhetisch wahrnehmen.
Wer sich unsicher ist, sollte lieber auf eine Schrift zurückgreifen, z.B. Helvetica. - Bei Kombinationen von Schriftstärken mindestens eine Stärke überspringen
Wenn das font weight 400 beträgt, sollte die kombinierte Schrift einen Wert von mindestens 600 oder mehr haben.
Das entspicht einer Kombination von light und bold oder medium und extra bold. Der oben erwähnte Kontrast sorgt auch hier für eine ästhetische Wirkung.
Wenn es besonders dramatisch oder cool aussehen, kann man hier auch noch größere Sprünge machen. - Die Schriftgröße sorgt für Hierarchie
Die Schriftgröße zu verdoppeln sorgt für schöne Kontraste. Bei einer Ausgangsschrift von 14 px wäre eine Größe von 28 px für die Überschrift gut.
Je größer der Sprung, umso dramatischer ist die Wirkung. So kann man auch das Dreifache oder Vierfache nutzen. Als Fautformel gilt: 1x, 2x, 4x für die jeweils größere Schrift. - Der Zeilenabstand
Als wichtiges Stilmittel dient der Zeilenabstand für eine gute Lesbarkeit. Je größer die Schrift ist, desto kleiner sollte der Zeilenabstand sein, zum Beispiel bei Überschriften. Je kleiner die Schrift ist desto größer sollte der Zeilenabstand sein. Man sollte es jedoch nicht übertreiben, damit der Leser nicht so große Lücken überwinden muss und auf den ersten Blick sieht, was zusammengehört. - Der Zeichenabstand
Mit dem Zeichenabstand kann man spielerisch Akzente setzen. Wie das Wort Akzente schon sagt, sollte man es aber nicht übertreiben.
Denn es ist immer eine Hervorhebung. Und wie schön Kontraste auch sind, so sollte man es nicht übertereiben. Die Schriftdesigner haben sich bei der Laufweite schon etwas gedacht. - Weißraum oder auch: Platz zum Atmen
Buchstaben sollten immer einen gewissen Abstand zum Rand haben. Auch die einzelnen Zeilen sollten genug Luft zum Atmen bekommen. Es sei denn, man möchte bewusst eine Grenze überschreiten. - Gruppierung von Texten und Zahlen
Inhaltliche Absätze sollten auch optisch als Absatz erkennbar sein. Dies hilft dem Leser, einen Text besser aufzunehmen, da durch die äußere Optik die Hierarchie des Textaufbaus unterstützt wird.
Zahlen sollten ebenfalls als kleine Gruppen notiert werden wie etwa Telefonnumern, Bankleitzahlen oder Umsatzsteuer-IDs: achtstellig Zahlen in den Gruppierungen: 3 3 2, elfstellige Zahlen in den Gruppierungen: 3 3 3 2, und siebenstellige Zahlen in den Gruppierungen: 3 2 2 - Hierarchie und Raster
Das klingt vielleicht langweilig, aber ein geordnetes Raster mit wiederkehrenden Elementen oder Reihenfolgen hilft dem Nutzer, sich auf einer Website zurecht zu finden.
Ein Raster zu brechen und Schrift außerhalb der Rasterlinien zu nutzen sorgt für Aufmerksamkeit. - Zeilenlänge
Eine optimale Zeilenlänge erhöht die Lesbarkeit eines Textes und hat auch noch weitere Vorteile.
So empfiehlt Google maximal 70 bis 80 Zeichen pro Zeile. Achte auch in allen Ansichten des Webdesigns darauf, dass die Zeilenlänge zum Beispiel mobil auch eine angemessene Länge hat. - Farbgestaltung bei Überschriften
Farbige Überschriften sind ein tolles Gestaltungselement. Mehr als zwei bis drei Farben sorgen jedoch für zuviel Unruhe in der Gesamtgestaltung.
Zusatzregel für gute Typografie im Webdesign
Um ein hervorragendes Design zu erschaffen sollte mindestens ein Punkt aus dem Rahmen fallen. Denn die Regeln sind dafür da, dass sie gebrochen werden.
Ein heißer Tipp aus dem Webinar war die Schrift Roboto, da sie nicht nur gut lesbar ist, sondern auch in vielen Caches drin ist. Aufgrund der DSGVO sollten Google fonts Schriften lokal eingebunden werden.
Noch mehr Inspiration für Schriften findet man auf Typewolf.com. Oder auch Pinterest ist eine gute Quelle für Inspiration zum Thema Schriften.
Schriftgröße in Pixel (px) oder rem angeben?
Ein weiterer Punkt im Webinar war das Thema px (Pixel) oder rem. Damit sind zwei verschiedene Einheiten gemeint, in denen man die Schriften einstellen kann.
Wenn man seine Schriften in Pixel einstellt, dann haben die Überschriften (H1, H2, H3, p, etc.) immer auf den Pixel genau diese Größe. Das ist zwar sehr zuverlässig, schließlich haben wir uns beim Design genau überlegt, wie die Schrift mit den anderen Designelementen harmoniert.
Allerdings kann es auch Nachteile haben. Im Browser kann man als Nutzer nämlich angeben, in welcher Schriftgröße man einen Text lesen möchte. Für Menschen mit Sehbehinderung ist dies sehr wichtig. Standardisiert ist beim Firefox zum Beispiel unter Einstellungen die Schriftgröße mit 16 px eingestellt.
Hat der Nutzer hier aber 40 px angegeben, um den Text überhaupt lesen zu können und öffnet eine Seite, die mit festen Pixelgrößen für Schrift arbeitet kann der Text nicht in den vom Nutzer gewünschten Format ausgegeben werden.
Rem bezieht sich immer auf die im Browser eingestellte Größe. 1 rem = 16 (wenn die Standardeinstellung von Firefox genutzt wird). Ansonsten ist 1 rem = x – ein uns unbekannter Wert, den jeder Nutzer individuell in seinem Browser festlegen kann.
Richtige Schriftgrößen mit rem in WordPress definieren
Ausgehend von der Annahme, dass der Nutzer den Standardwert von 16 px für 1 rem eingestellt hat, können wir dementsprechend unsere Größen für unseren Fließtext, Überschriften und Links einstellen.
Dabei ist die Zahl, die vor dem rem steht der Faktor, mit dem die tatsächliche Schriftgröße errechnet wird. Also 1 rem bedeutet 1 x den Wert, der im Browser festgelegt ist z.B. 16 px.
Sagen wir unsere H1 sollte 4x so groß sein wie der Fließtext und die H2 immer noch doppelt so groß, so legen wir für H1 4 rem fest und für H2 2 rem. Daraus ergibt sich folgendes:
Wenn 16 px als Standard im Broweser hinterlegt ist. Und man setzt die eben genannten rem, dann ergeben sich daraus automatisch diese Schriftgrößen:
p = 1 rem (16 px)
H1 = 4 rem (64 px)
H2 = 2 rem (32 px)
Wenn unserer Nutzer mit der Seheinschränkung 40 px als Standrad gesetzt hat, dann ergibt sich in seiner Browseransicht:
p = 1 rem (40 px)
H1 = 4 rem (160 px)
H2 = 2 rem (80 px)
Dabei geht es nicht in erster Linie um das Design und was besonders gut aussieht, sondern dass die Inhalte der Website von möglichst vielen Nutzern erfasst werden können.
Dank rem können auch Menschen mit Seheinschränkungen inkludiert werden. Die Inhalte sind somit barrierefreier darstellbar.
Es kann sein, dass Google in Zukunft Websites, die Inhalte möglichst barrierefrei darstellen bei den Rankings stärker berücksichtigen wird.
Achtung: Alte Browser z.B. Internet Explorer kennen kein rem und für diese muss eine Fallbackmöglichkeit in px im Stylesheet angegeben werden (vor den rem Angaben).
Und was ist eigentlich em?
Rem heißt eigentlich „root em“ und ist neuer als em. Die Einheit em kommt ursprünglich aus dem Druck. Dabei bezeichnet sie die Breite des Buchstabens „M“.
Die Einheit em funktioniert ähnlich wie rem. Der Unterschied ist, dass nicht alle Schriftgrößen in em relativ zum Root-Wert (aus dem Browser) errechnet werden. Ein em errechnet die Schriftgröße stattdessen aus dem font-size des Elternelements im Dokument.
Wie rechne ich Pixel in rem um?
Wer keine Lust auf Taschenrechner hat wird sich über den rem-Rechner freuen. Hier gibt es auch eine Konvertierungstabelle von em zu px und von px zu em: rem-px-Rechner.
