Gut lesbare Webschriften

[markus83]

Hallo, gibt es irgendwo einen guten Artikel über die Lesbarkeit von Webschriften?

Leider hat man ja nicht alle auf dem Markt existierenden Bildschirme und Geräte zum Testen zu Hause.

Ich gestalte gerade die Webseite für eine Organisation für neurologisch Erkrankte (mache sonst nur Print). Open Sans wäre jetzt meine Wahl. Source Sans sah z. B. auf einem niedrig-auflösenden Monitor grauenhaft aus ...

 

Ist dieser kleine Schalter zum benuzerdefinierten Einstellen der Schriftgröße eigentlich noch zu empfehlen (-> A+ | A-), oder ist sowas inzwischen out?

 

Bin dankbar für Eure Tipps!

[Þorsten]

vor 13 Stunden schrieb markus83:

Open Sans wäre jetzt meine Wahl.

Wenn Leserlichkeit das Hauptkriterium ist (statt, sagen wir mal, die möglichst stringente Einhaltung eines CD/CI) würde ich überhaupt davon abraten, dem Leser eine Webschrift (ohne einfache Wechselmöglichkeit) aufzuzwingen. Warum? Weil eine Systemschrift seines Systems mit einiger Wahrscheinlichkeit besser leserlich ist (weil eben auf sein System optimiert) als irgendein Webfont.

 

Was macht ein Smartphonebesitzer denn als erstes? Richtig: eine Schrift aussuchen, die ihm gefällt/die er auf diesem Gerät gut lesen kann.

 

Webschriften sind ein nettes Extra, aber ich würde sie für besonders sensible Gruppen, was Leserlichkeit angeht, immer nur als Option anbieten. Ich habe in letzter Zeit einiges für Grundschüler gestaltet – in enger Abstimmung mit ihren Lehrern – und da auch mehrere Schriftoptionen angeboten. Das kann sinnvoll und hilfreich sein, weil Systemschriften eben nicht immer optimale Leserlichkeit für besonders sensible Gruppen von Lesern (wie eben Leselernanfänger, Dyslexiker,  Einwanderer, die gerade erst Sprache und Alphabet lernen, Menschen mit allerlei Behinderungen und und und) bieten. Serifenschriften können da helfen, wie auch komplexe a- und g-Formen (die weniger leicht mit o und 9 verwechselt werden) oder besonders humanistisch/»organisch« gestaltete Schriften, bei denen sich b, d, p und q besonders klar voneinander unterscheiden (auch wenn sie gedreht und gespiegelt werden).

 

Aber auf manchen Geräten sieht dann auch die sorgfältigst getestete Schrift eben nicht so klar aus wie eine Systemschrift. Deshalb: Wahlmöglichkeit!

 

Schon innerhalb eines Schulbezirks gibt es aber die unterschiedlichsten Geräte, auf denen Schriften ganz unterschiedlich dargestellt werden: ältere PCs, neue PCs, Chromebooks, »richtige« Laptops, Tablets verschiedenerer Generationen, Telefone, Smartboards (auf denen Schriften dann ganz anders wirken als auf dem angeschlossenen PC) . Da ist der Testaufwand schon bei einem Nutzer, den man kennt, enorm. Wenn der Leser irgendjemand sein kann, nun ja …

 

vor 13 Stunden schrieb markus83:

Ist dieser kleine Schalter zum benuzerdefinierten Einstellen der Schriftgröße eigentlich noch zu empfehlen (-> A+ | A-)

Nach meinen Erfahrungen ist er (wenn Erwägungen wie die obigen wichtig sind) wichtiger denn je, da eben immer mehr Inhalte auf nichttraditionellen Geräten konsumiert werden. In einem PC-/Laptop-Browser kann ich selbst als naiver Nutzer die Schriftgröße ziemlich einfach anpassen, ohne das Layout zu zerschießen. Ctrl-+ gedrückt oder auf das + in der Browserleiste geklickt, schon ist die Schrift größer! Aber schon auf einem Smartphone ist das klar schwieriger. Klar, da kann ich pinch-zoomen, aber dann passt eben eine Textzeile nicht mehr in den Viewport. Doof! Da kann eine A+ A- Option sehr helfen.

[TobiW]

Sehr guter Text, Thorsten! Was man vielleicht auch noch mit einbeziehen könne ist, das viele Browser inzwischen ja einen „Lese-Modus“ haben in dem dann nur der Text der Seite unabhängig vom Seiten-CSS angezeigt wird. Man sollte die Seite auslösen auch so gestalten, das dieser Modus zuverlässig funktioniert.

Und vielleicht wäre es auch schlau, einen Dark-Mode anzubieten.

[Phoibos]

Schriften würde ich auch nicht fest vorgeben, die Nutzer wissen besser, was ihnen hilft. Ansonsten ist noch eine klare, einfache Gliederung, genügend Weißraum und ein großzügiger Zeilenabstand hilfreich.

[Phoibos]

Oh, und eine einfache, klare Sprache (nicht unbedingt sofort leichte Sprache, aber in die Richtung halt).

Ansonsten hilft noch eine Präzisierung der "neurologischen Erkrankung", denn Neurologie ist ein verdammt weites Feld.

[Þorsten]

vor 2 Stunden schrieb TobiW:

Dark-Mode

Ein moderater Dark-Mode ist bei unseren meisten Projekten mittlerweile Standard. Für Traditionalisten gibt’s dann einen Light-Mode.

[Gast Schnitzel]

vor 3 Stunden schrieb Þorsten:

Was macht ein Smartphonebesitzer denn als erstes?

iPhone-User sind hier wohl nicht gemeint ...

vor einer Stunde schrieb Phoibos:

die Nutzer wissen besser, was ihnen hilft.

[ironie] Das ist wieder die Erfahrung aus dem First Level Support 

Sorry, wollte nicht pöbeln, die Tipps von euch sind alle goldwert 

[Phoibos]

vor 16 Minuten schrieb Schnitzel:

Erfahrung

Wollte eigentlich sagen, das die Nutzer für sich Anzeigemodalitäten entwickelt haben können, mit denen sie einigermaßen klar kommen. Das ersetzt natürlich keine begründete Alternative, doch solange wir nicht wissen, wohin optimiert werden soll, können wir auch nur raten.

[markus83]

Erstmal danke für Eure Ratschläge - speziell Dein ausführlicher, Þorsten!
Es geht um die Erkrankung ME/CFS (Chronisches Fatigue Syndrom), Betroffene haben ein Problem mit der Reizverarbeitung, z. B. Licht oder Geräusche. Daher habe ich an den Darkmode auch gedacht.

Es gibt viele junge Betroffene, aber manche Nutzer sind teilweise auch schon älter und nicht so medienaffin.

 

Das mit der Wahlmöglichkeit verstehe ich nicht ganz, was stellt man dann im CSS ein, "Font-family: ... " und dann diverse Systemschriften? (Es soll eine serifenlose sein). Komme wie gesagt vom Print ...

 

Was haben die Nutzer dann am Ende auf dem Bildschirm, San Francisco, Roboto, Arial und Helvetica (und ggf. die individuell eingestellte)?

Ich wollte Arial & Helvetica eigentlich vermeiden, dachte Open Sans wäre da besser zum Lesen.

 

 

 

 

[Phoibos]

vor 2 Minuten schrieb markus83:

Betroffene haben ein Problem mit der Reizverarbeitung

Da ist fällt mir sofort das Farbschema solarized zu ein: https://ethanschoonover.com/solarized/

 

Zum CSS würde ich da einfach das Generikum »sans-serif« nehmen. 

[markus83]

vor 51 Minuten schrieb Phoibos:

Da ist fällt mir sofort das Farbschema solarized zu ein: https://ethanschoonover.com/solarized/

 

Zum CSS würde ich da einfach das Generikum »sans-serif« nehmen. 

Solarized ist interessant!!! Die Beige-Töne hinterlassen leider einen etwas angestaubten Eindruck, ein bisschen muss die HP auch modern aussehen und das CD wiederspiegeln. Aber die dunklen Töne kann ich mir für den Darkmode gut vorstellen!

 

Aber wenn ich "sans-serif" nehme, spuckt er doch z. B. bei den ganzen Windows-PC Usern Arial aus. Das ist doch a) nicht so gut lesbar und b) nicht besonders schick.

Fändet ihr die Systemschriften wirklich die beste Möglichkeit um gute Lesbarkeit zu schaffen?

Vielleicht muss ich das einfach mal testen ...

[Phoibos]

vor 17 Minuten schrieb markus83:

Windows-PC Usern Arial

Kommt auf den Browser (unabhängig vom Desktop-OS, MobilOSe sind da eingeschränkter)  an, welche Schriften der als Standard vorsieht. 
Beige hat den Vorteil, dass es arm an blauem Licht ist, das sehr anregend wirkt. 

[Phoibos]

Lesbarkeit ist ein weites Feld, wenn ich mich recht erinnere, sind Vorteile in Studien zu der besseren Lesbarkeit von Legastheniker-Schriften und den üblichen Verdächtigen im Rahmen der Messungenauigkeit zu vernachlässigen. Und bei Schnelllesetests zählt das gewohnte Aussehen mehr als irgendeine Spezialisierung der Schrift.  
Was verwendet das Unternehmen denn bei Gedrucktem? 

 

[Þorsten]

vor 6 Stunden schrieb Schnitzel:

iPhone-User sind hier wohl nicht gemeint ...

Ach herrje, ihr Armen könnt immer noch keine Schriften einstellen?

[Þorsten]

vor 1 Stunde schrieb markus83:

Das mit der Wahlmöglichkeit verstehe ich nicht ganz, was stellt man dann im CSS ein, "Font-family: ... " und dann diverse Systemschriften?

Nein. Da musst du schon ein eigenes UI anbieten, mit denen die Nutzer dann die Schrift auswählen können.

 

Aber das hast du mit A+/A- ja auch vor. Machs halt genau so, nur dass du statt der Schriftgröße eben die Schriftart wechselst. Ob per Javascript oder serverseitig kommt immer auf die Anwendung an.

[Þorsten]

Nur mal so als Beispiel, das ist das aufgeklappte Hamburger-Menü einer solchen Grundschulwebapp:

[markus83]

vor 12 Stunden schrieb Þorsten:

Nein. Da musst du schon ein eigenes UI anbieten, mit denen die Nutzer dann die Schrift auswählen können.

Puh, eigentlich ist das Ziel auch die Seite für die Erkrankten so reduziert und leicht konsumierbar wie möglich zu machen (wenige Menüs, gut strukturiert, übersichtlich). Da möchte ich auch nicht zu viele Wahlfelder anbieten, das macht die Nutzung wieder komplex.

 

Dennoch finde ich Euren Tipp sehr interessant, an die Möglichkeit der individuellen Schriftwahl hatte ich garnicht gedacht!

[markus83]

vor 12 Stunden schrieb Phoibos:

Was verwendet das Unternehmen denn bei Gedrucktem?

Hier verwenden wir Myriad. Wie würdet ihr die (oder alternativ Frutiger) für Webseiten-Texte einschätzen? Habe ich im Web noch nicht oft gesehen.

 

Aber da ist mir das Branding auch nicht so wichtig wie eine gute Konsumierbarkeit. Ich fände es nicht schlimm, wenn wir für Print und Web unterschiedliche Mengentext-Schriften haben, Logo und Farben reichen für die CI.

[Phoibos]

vor 1 Stunde schrieb markus83:

Habe ich im Web noch nicht oft gesehen.

Weil die Geld kosten 😉 Schau mal bei Typekit vorbei, ob die eine Webfont-Version anbieten.