Jump to content
Typografie.info
Graublau Slab – Die Erweiterung zum Bestseller Graublau Sans
Graublau Slab – Die Erweiterung zum Bestseller Graublau Sans
Graublau Slab – Die Erweiterung zum Bestseller Graublau Sans
Graublau Slab – Die Erweiterung zum Bestseller Graublau Sans
Graublau Slab – Die Erweiterung zum Bestseller Graublau Sans
Graublau Slab – Die Erweiterung zum Bestseller Graublau Sans
markus83

Gut lesbare Webschriften

Empfohlene Beiträge

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!

Diesen Beitrag teilen


Link zum Beitrag
Þ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.

  • Gefällt 8

Diesen Beitrag teilen


Link zum Beitrag
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.

  • Gefällt 4

Diesen Beitrag teilen


Link zum Beitrag
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.

  • Gefällt 1

Diesen Beitrag teilen


Link zum Beitrag
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.

Diesen Beitrag teilen


Link zum Beitrag
Þ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.

  • Gefällt 2

Diesen Beitrag teilen


Link zum Beitrag
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 :shock:

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

  • lustig! 1

Diesen Beitrag teilen


Link zum Beitrag
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.

  • Gefällt 1

Diesen Beitrag teilen


Link zum Beitrag
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.

 

 

 

 

Diesen Beitrag teilen


Link zum Beitrag
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. 

Diesen Beitrag teilen


Link zum Beitrag
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 ...

Diesen Beitrag teilen


Link zum Beitrag
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. 

Diesen Beitrag teilen


Link zum Beitrag
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? 

 

  • Gefällt 1

Diesen Beitrag teilen


Link zum Beitrag
Þorsten
vor 6 Stunden schrieb Schnitzel:

iPhone-User sind hier wohl nicht gemeint ...

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

  • traurig 1

Diesen Beitrag teilen


Link zum Beitrag
Þ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.

Diesen Beitrag teilen


Link zum Beitrag
Þorsten

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

font-size-family-hamburger-menu.png

  • Gefällt 2

Diesen Beitrag teilen


Link zum Beitrag
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!

Diesen Beitrag teilen


Link zum Beitrag
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.

Diesen Beitrag teilen


Link zum Beitrag
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.

  • Gefällt 1

Diesen Beitrag teilen


Link zum Beitrag

Erstelle ein Benutzerkonto oder melde dich an, um zu kommentieren

Du musst ein Benutzerkonto haben, um einen Kommentar verfassen zu können

Benutzerkonto erstellen

Neues Benutzerkonto für unsere Community erstellen. Es ist einfach!

Neues Benutzerkonto erstellen

Einloggen

Du hast bereits ein Benutzerkonto? Melde dich hier an.

Jetzt anmelden
Typography.Guru—Lehrreiche Typografie-Videos auf YouTube …
Typography.Guru—Lehrreiche Typografie-Videos auf YouTube …
Typography.Guru—Lehrreiche Typografie-Videos auf YouTube …
Typography.Guru—Lehrreiche Typografie-Videos auf YouTube …
Typography.Guru—Lehrreiche Typografie-Videos auf YouTube …
Typography.Guru—Lehrreiche Typografie-Videos auf YouTube …
×
×
  • Neu erstellen...

Hinweis

Wie die meisten Websites, legt auch Typografie.info Cookies im Browser ab, um die Bedienung der Seite zu verbessern. Sie können die Cookie-Einstellungen des Browsers anpassen. Anderenfalls akzeptieren Sie bitte die Speicherung von Cookies. Weitere Details in der Datenschutzerklärung