Web und Schrift, die einfachen Grundlagen

Dieser Artikel liegt mir sehr am Herzen, weil ich immer die gleichen „Fehler“ online sehe. Für die Gestaltung kann natürlich viel als Stilmittel genutzt werden, ich spreche hier aber darüber, dass der Userin ein optimales Leseerlebnis ermöglicht wird. Im Idealfall schaust du dir diese Seite auf einem breiten Bildschirm statt auf dem Handy an, ich werde aber im Text auch beschreiben was in dem jeweiligen Absatz falsch läuft.

Eine meiner Lieblingswebsites ist übrigens die von Jeff Bridges. Die ist natürlich weder barrierefrei, noch einfach zu lesen. Ich möchte lediglich darauf hinweisen, dass man noch Kunst machen darf im Netz! Und selbst Jeff Bridges hat für jedes Bild einen Alternativ-Text hinterlegt, wenn auch nicht immer ganz richtig.

Buchstaben in  schwer lesbarer Frakturschrift links. Lorem ipsum in ut lesbarer sans serif Schrift rechts.

Beliebte Fehler

Viele, meist weniger gestaltungsaffin, aber um so mehr perfektionistisch veranlagte Menschen (die, die jetzt umso zusammen geschrieben wollen wissen) denken, dass es gut wäre Text im Blocksatz zu setzen, weil das dann so schön links und rechts abschließt. Das ist aber leider nicht so schön, weil es zu großen Lücken im Text selbst führt. Diese werden verstärkt, wenn die Silbentrennung gerade mal in einem Browser nicht funktioniert, der Absatz sehr schmal, oder auf einem schmalen Handy dargestellt wird. Lustigerweise verwenden viele den Blocksatz auf dem schmalen Handy. Dem Lesefluss tut das eher weh und die unterschiedlich großen Lücken sind doch auch nicht wirklich schön oder? Deshalb lieber schön linksbündig, und wenn es geht mit Silbentrennung.

Ausgezeichnet

Für manche mag das toll sein, oder den Eindruck erwecken, dass DER Teil des Textes jetzt interessanter wird, in Wahrheit wird der Text aber einfach nur sehr sehr unleserlich, wenn er mit fett, Farbe und vielen Links versehen ist. Guter Text wird auch so gelesen!

Weites Feld & Serifen

Das hier kann man sich am Besten auf dem Desktop anschauen. Der Text läuft über die komplette Breite des Bildschirms. Für die Userinnen ist es so sehr schwer den nächsten Umbruch bzw. die nächste Zeile zu finden, weil sie am anderen Ende des 42-Zoll-Bildschirmes ist. Eine schöne Maximalbreite empfinde ich bei ca. 700 Pixeln (bei Schriftgröße ca. 18px). Für diese Darstellung brauche ich viel Text, deshalb schreibe ich noch etwas über Serifen. Diese helfen tatsächlich durch ihren horizontalen Charakter die nächste Zeile einfacher zu finden. Für viele Dyslexikerinnen ist eine Serifenschrift aber schwerer zu lesen, die mögen dann lieber serifenlose Schriften zum Lesen. Bisher habe ich leider noch keine wissenschaftlich belegte Studie gesehen, die sagt: „Das ist die barriereärmste Schriftart!“ Schriften gehen immer ein wenig mit der Mode, was man aber auf keinen Fall tun sollte:

Raleway als Copy/Fließtext

Mein Lieblingsbeispiel für einen falsch genutzten sogenannten Display-Font ist die Schriftart Raleway. Dieser Absatz ist mit dieser Schrift formatiert. Ursprünglich für Überschriften bzw. große Buchstaben konzipiert und gestaltet, benutzen sie selbst große Onlinemagazine wie zett als Fließtext! Dafür wurde sie nie gemacht und ist deshalb einfach auch sehr schwer lesbar. Informiert euch ein wenig, wofür eine Schrift gut ist! Das merkt man doch auch beim Lesen oder?

Zu kleine Schrift

Als mittlerweile 40-jähriger, der endlich mal zum Optiker muss (ich) ist es schwer, als Oma ist es schwer, als Schüler mit Brille ist es schwer, als draußen stehender mit Sonne auf dem Display ist es schwer, als Brillenträger mit verlegter Brille ist es schwer. Macht es den Leuten doch einfach einfach. Aber schau mal, immernoch besser lesbar als Raleway 😉 Und schau auch immer, dass die Schriften skalierbar bleiben! (Windows Strg & +, OSX Command & +)

Kontrast

Am häufigsten sehe ich es beim Zuckerbäcker. Weiße Schrift auf pinkem Hintergrund. Das ist so schon sehr schwer lesbar, beim Lesen mit Sonneneinfall auf deinem Handy wirst du es erst recht merken. Nutzte den Contrastchecker und erziehle ein Ergebnis von AA. Dann bist du auf der sicheren Seite 🙂

Fazit

Es gibt natürlich noch viel mehr Sünden und auch gute Beispiele, die man aufführen könnte, aber wenn das oben alles schonmal behoben wäre, wäre ich schon sehr sehr glücklich.

Eine Antwort zu “Web und Schrift, die einfachen Grundlagen”

  1. Hehe, da musste ich echt erstmal laut lachen! Super gemacht, der Artikel. Und dass die ze.tt tatsächlich die Raleway im Fließtext einsetzt, konnte ich erst gar nicht glauben. Tatsächlich.

    Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.