readable.css

 (readable-css.freedomtowrite.org)
2 Punkte von GN⁺ 8 시간 전 | 1 Kommentare | Auf WhatsApp teilen
  • readable.css ist kein Framework für ein komplettes Designsystem einer Website, sondern ein CSS-Framework, das semantischem HTML sinnvolle und ansprechende Standardstile hinzufügt
  • Das Kernprinzip ist Konsistenz: Farben, Schriftstile, Rahmenstärken und Zeilenhöhen werden auf der gesamten Website einheitlich angewendet
  • Es bietet Light-/Dark-Mode, responsives Design, vertikalen Rhythmus sowie Stile für Header, Footer, Navigation, Tabellen, Buttons und Formulare
  • Enthält keine auffälligen Animationen, keine benutzerdefinierten Schriftarten, keine Utility-Klassen und keine Elemente, die Browser-Einstellungen der Nutzer überschreiben
  • Setzt semantisches HTML voraus, interpretiert die Absicht anhand der Struktur und unterstützt Firefox 84+, Chromium 88+, Edge 88+, Safari 10+; IE wird nicht unterstützt

Hauptfunktionen und Designumfang

  • readable.css ist kein Framework zum Aufbau eines vollständigen Website-Designsystems, sondern ein CSS-Framework, das grundlegendes HTML sinnvoll und ansprechend gestaltet
  • Unterstützt Light-/Dark-Mode manuell oder über prefers-color-scheme und bietet responsives Design sowie vertikalen Rhythmus
  • Stiliert Header, Footer, Navigationsleisten, Bilder, Zitate, Aside-Elemente, Tabellen, Buttons und Formulare
  • Blocksatz ist standardmäßig deaktiviert, und native Schriftarten wie serif, sans-serif und monospace werden unterstützt
  • Auffällige Animationen, benutzerdefinierte Schriftarten, Utility-Klassen und Elemente, die Browser-Einstellungen der Nutzer überschreiben, sind bewusst ausgeschlossen

Verwendung und Unterstützungsumfang

  • Die aktuelle CSS-Datei kann auf der Release-Seite heruntergeladen und in die Website eingebunden werden 
    <link rel="stylesheet" type="text/css" href="/path/to/readable.css">
  • readable.css interpretiert die Absicht einer Website anhand der Verwendung von semantischem HTML; um das Stylesheet richtig zu nutzen, sollte semantisches HTML korrekt eingesetzt werden
  • Einen Nutzungsleitfaden und Hinweise zum Schreiben von HTML passend zu readable.css gibt es im Wiki
  • Unterstützt Firefox 84+, Chromium 88+, Edge 88+ und Safari 10+; IE wird nicht unterstützt
  • Der limitierende Faktor für Chromium, Firefox und Edge ist die Unterstützung von :not() und :is(), bei Safari die Unterstützung von CSS-Variablen
  • Der Quellcode befindet sich auf Codeberg, die Dokumentation ist in den Docs verfügbar
  • readable.css und der Website-Code stehen unter der 0BSD-Lizenz und können ohne erforderliche Namensnennung für beliebige Zwecke verwendet werden
  • Freedom to Write ist eine Bewegung, die freie Open-Source-Softwarelösungen für die Schreibindustrie entwickelt und unterstützt

Verwandte Beiträge

1 Kommentare

 
GN⁺ 8 시간 전
Lobste.rs-Meinungen

  • Mir gefällt, dass die grundlegende font-size nicht angetastet wird. Nutzer können und sollten in User Agents wie dem Browser ihre bevorzugte Größe festlegen, und Websites sollten diese Einstellung respektieren
    Eine fest auf 12px gesetzte Schrift ist mir zu klein, und ich will auch nicht, dass der Text in breiten Viewports plötzlich größer wird, wenn ich bereits eine angenehme Größe eingestellt habe. Das passiert viel zu oft und schadet der Barrierefreiheit erheblich

    • Selbst wenn man in Arbeitsprojekten dafür plädiert, Standards wie Accept-Language einzuhalten, wird das oft mit der Logik abgelehnt, dass Nutzer die App-Einstellungen ohnehin nicht richtig setzen können und wir das deshalb für sie übernehmen müssten
      Bei der Schriftgröße wird wahrscheinlich ein ähnliches Argument kommen

  • Ich schaue mir ständig Frameworks wie PicoCSS oder MVP an, und das hier fällt auf, weil es offenbar als Ausgangspunkt gedacht ist
    Es wirkt wie eine gute Basis, auf der man etwas aufbauen kann, aber mich würde auch interessieren, was Leute mit besserem Designverständnis dazu denken

  • Die Methode, CSS-Variablen über html[data-font-family="serif"] umzuschalten, ist nicht besonders nützlich. Es wäre für Templates wie auch für Client-Skripte fast genauso einfach, einfach <html style="font-family:serif"> zu verwenden, und das wäre kürzer und weniger komplex
    Die aktuelle Lösung kann den Eindruck erwecken, dass man Dinge wie <html data-font-family="some-webfont, serif"> verwenden kann, aber das funktioniert in Wirklichkeit nicht. Für das gesamte Dokument monospace zu verwenden, ist außerdem eine Stilentscheidung, die nicht gut zur Lesbarkeit passt, und auch nicht zum Namen „readable.css“. Dass es auf eine einzelne generische Schriftfamilie beschränkt bleibt, finde ich allerdings gut
    Auch --line-width und --line-height sind missverständlich benannt. Das eine „line“ ist eine Linie zwischen Elementen, das andere eine Textzeile
    Beim Farbthema sind (prefers-color-scheme) und (prefers-contrast) zusammen mit [data-theme] und [data-high-contrast] verworren, und einige Werte und Wechselwirkungen sind nicht dokumentiert. Die Kombination @media (prefers-contrast: more) and (prefers-color-scheme: dark) ist offensichtlich kaputt, wenn es kein <html data-*>-Override gibt, weil dann #fff als Hintergrund und #000 gesetzt wird. Außerdem braucht es Deklarationen für color-scheme: dark und color-scheme: light
    Bei a { color: inherit; } hatte ich schon keine Lust mehr weiterzulesen. Ganz ohne auf Behauptungen zum vertikalen Rhythmus einzugehen: Wenn Linkfarbe vererbt wird und in der Navigation sogar die Unterstreichung entfernt wird, merken viele Nutzer gar nicht, dass es dort Links gibt. Links sollten blau sein oder zumindest eine gesättigte Akzentfarbe haben, und die Unterstreichung sollte ebenfalls erhalten bleiben. Gerade weil es readable.css heißt, ist das besonders enttäuschend

    • Lesbarkeit ist seit Jahrzehnten erforscht und eigentlich ziemlich gut verstanden, trotzdem kennen sich erstaunlich viele Leute damit nicht aus. Besonders oft falsch behandelt werden Zeilenlänge und Schriftwahl, daneben gibt es noch Dinge wie Schriftgröße, Zeilenabstand und Kontrast
      Für die Zeilenlänge gibt es einen Mindest- und Höchstbereich, in dem die meisten Menschen bequem lesen können, grob 50 bis 70 Zeichen pro Zeile. In diesem Stack-Exchange-Thread gibt es gute Antworten, und weil das eng mit Barrierefreiheit zusammenhängt, sagt auch die W3C WCAG im Abschnitt zur visuellen Darstellung, die Breite solle 80 Zeichen oder Glyphen nicht überschreiten, bei CJK 40
      Bei Schriften sind Sans-Serif-Schriften im Allgemeinen auf der größten Bandbreite von Bildschirmen am leichtesten lesbar, und auf modernen hochauflösenden Displays werden Serifenschriften meist ähnlich bewertet. Nichtproportionale Schriften verringern für die meisten Menschen die Lesbarkeit und sind daher für Fließtext nur selten eine gute Wahl. Ausnahmen können Menschen sein, die an Terminals oder Code-Editoren gewöhnt sind, oder Legastheniker, die manchmal Monospace-Schriften leichter lesen. Im Zweifel ist Arial zwar langweilig, aber die sicherste Wahl; zum Thema Monospace siehe auch diesen Stack-Exchange-Thread über monospaced fonts
      Zusätzlich empfehlenswert sind die typography page der US-Regierung, der typography section von BBC GEL, der typography section von Google Material Design, das tiefgehende Butterick's Practical Typography sowie The Elements of Typographic Style Applied to the Web

  • Ehrlich gesagt ist die Standardschriftgröße viel zu klein und schwer lesbar. Ich verstehe nicht, warum man diese Größe gewählt hat; für mich ist das weder barrierefrei noch gut lesbar

    • Das ergibt sich aus zwei Problemen der Webplattform. Einerseits ist es gut, den vom Browser bereitgestellten Font und die Größe zu übernehmen, weil man damit ausdrücklich gesetzte Nutzerpräferenzen respektiert. Andererseits legen nur sehr wenige Nutzer ihre Präferenzen tatsächlich explizit fest, und in vielen Standardkonfigurationen haben Browserhersteller historisch gewachsene Defaults nicht geändert, sodass die resultierende Schriftgröße nahe an der unteren Grenze der Lesbarkeit bleibt
      Noch schlimmer ist, dass font-size nicht für alle Schriften eine stabile absolute Bedeutung hat. Selbst font-size: 16px kann je nach Schrift ziemlich unterschiedlich aussehen. In Safari sehen die Standardwerte für sans und sans-serif so unterschiedlich aus: https://github.com/user-attachments/assets/…. Sogar in diesem Kommentar sieht man, dass die Größe der monospace-Schrift nicht zum Rest passt
      Letztlich ist das schwer richtig zu lösen, irgendwo geht immer etwas kaputt, und es bleibt eine Frage, welchen Kompromiss der Webmaster bevorzugt. Ich persönlich kümmere mich meist wenig um das Design einer Website, wenn ich einen Lesemodus verwenden kann. Für die Unschärfe von font-size gibt es inzwischen aber eine brauchbare moderne Lösung: https://matklad.github.io/2025/07/16/font-size-adjust.html
    • Ich benutze einen merkwürdigen 140-ppi-Monitor, bei dem die eigentlich naheliegende Skalierung von 125% nicht gut aussieht, daher lasse ich ihn auf 100% und passe die Standardvergrößerung so an, dass ich lesen kann
      Auf dieser Seite war der Text so klein, dass ich fast dachte, sie hätte diese Vergrößerung umgangen. Ich habe die Mindestschriftgröße in Firefox wieder um eine Stufe erhöht