readable.css

 (readable-css.freedomtowrite.org)
2 puntos por GN⁺ 8 시간 전 | 1 comentarios | Compartir por WhatsApp
  • readable.css no es un sistema de diseño completo para todo un sitio, sino un framework CSS que añade estilos base razonables y agradables al HTML semántico
  • Su principio central es la consistencia: colores, estilos tipográficos, grosor de bordes y altura de línea se aplican de forma coherente en todo el sitio
  • Ofrece modo claro/oscuro, diseño responsivo, ritmo vertical y estilos para encabezados, pie de página, navegación, tablas, botones y formularios
  • No incluye animaciones llamativas, tipografías personalizadas, clases utilitarias ni elementos que sobrescriban la configuración del navegador del usuario
  • Parte de la premisa de usar HTML semántico para interpretar la intención, y es compatible con Firefox 84+, Chromium 88+, Edge 88+ y Safari 10+, excluyendo IE

Funciones principales y alcance del diseño

  • readable.css no es un framework para crear un sistema de diseño completo del sitio, sino un framework CSS que hace que el HTML básico se vea razonable y agradable
  • Soporta modo claro/oscuro de forma manual o mediante prefers-color-scheme, y ofrece diseño responsivo y ritmo vertical
  • Aplica estilos a encabezados, pie de página, barra de navegación, imágenes, citas, aside, tablas, botones y formularios
  • La justificación del texto está desactivada por defecto, y soporta fuentes nativas como serif, sans-serif y monospace
  • Excluye intencionalmente animaciones llamativas, tipografías personalizadas, clases utilitarias y elementos que sobrescriban la configuración del navegador del usuario

Uso y alcance del soporte

  • El archivo CSS más reciente puede descargarse desde la página de lanzamientos y agregarse al sitio 
    <link rel="stylesheet" type="text/css" href="/path/to/readable.css">
  • readable.css interpreta la intención del sitio según cómo se use el HTML semántico, por lo que para aprovechar correctamente la hoja de estilos es necesario usar bien el HTML semántico
  • La guía de uso y la forma de escribir HTML adecuado para readable.css pueden consultarse en la wiki
  • Es compatible con Firefox 84+, Chromium 88+, Edge 88+ y Safari 10+, y no es compatible con IE
  • El factor limitante en Chromium, Firefox y Edge es el soporte de :not() y :is(), y en Safari es el soporte de variables CSS
  • El código fuente está en Codeberg, y la documentación se ofrece en Docs
  • readable.css y el código del sitio están bajo licencia 0BSD, por lo que pueden usarse para cualquier propósito sin atribución obligatoria
  • Freedom to Write es un movimiento que crea y apoya soluciones de software libre y de código abierto para la industria de la escritura

Lecturas relacionadas

1 comentarios

 
GN⁺ 8 시간 전
Opiniones en Lobste.rs

  • Me gusta que no toque el font-size predeterminado. El usuario puede y debería poder configurar su tamaño preferido en el agente de usuario, como el navegador, y los sitios web deberían respetarlo
    No me gusta fijarlo en 12px porque es demasiado pequeño, y tampoco quiero que el texto se agrande de golpe en viewports anchos cuando ya lo tengo ajustado a un tamaño cómodo. Esto pasa demasiado seguido y perjudica mucho la accesibilidad

    • Incluso cuando intento hacer que en proyectos del trabajo se respeten estándares como Accept-Language, muchas veces me lo rechazan con la lógica de que, como los usuarios no saben configurar bien la app, nosotros deberíamos hacerlo por ellos
      Creo que con el tamaño de fuente saldrá una discusión parecida

  • Siempre ando buscando frameworks como PicoCSS o MVP, y este me llamó la atención porque parece hecho para usarse como punto de partida
    Se ve como una buena base sobre la que construir cosas, aunque me interesa saber qué opinan personas que entienden más de diseño

  • La forma de cambiar variables CSS con html[data-font-family="serif"] no me parece muy útil. Sería casi igual de fácil, tanto en plantillas como en scripts del cliente, usar simplemente <html style="font-family:serif">, y además sería más corto y menos complejo
    El enfoque actual puede hacer que alguien crea que puede usar algo como <html data-font-family="some-webfont, serif">, pero en realidad no funciona. Usar monospace como fuente para todo el documento tampoco es una decisión de estilo que favorezca la legibilidad, y no encaja con el nombre “readable.css”. Aun así, me gusta la moderación de limitarlo a una sola familia genérica de fuente
    --line-width y --line-height también son nombres confusos. Un “line” es la línea entre elementos y el otro es la línea de texto
    En el tema de colores, la combinación de (prefers-color-scheme) y (prefers-contrast), junto con [data-theme] y [data-high-contrast], está enredada, y algunos valores e interacciones no están documentados. La combinación @media (prefers-contrast: more) and (prefers-color-scheme: dark) se rompe de forma evidente cuando no hay override de <html data-*>, porque pone #000 sobre fondo #fff. También hacen falta las declaraciones color-scheme: dark y color-scheme: light
    En a { color: inherit; } ya perdí las ganas de seguir viendo. Sin siquiera entrar en la discusión del ritmo vertical: si haces que el color del enlace se herede y además quitas el subrayado en la navegación, muchos usuarios ni siquiera notarán que hay enlaces. Los enlaces deberían seguir siendo azules o al menos tener un color de acento con saturación, y también deberían conservar el subrayado. Que se llame readable.css lo hace todavía más decepcionante

    • La legibilidad es un tema que se ha investigado durante décadas y se entiende bastante bien, pero sorprendentemente mucha gente no lo conoce. En particular, lo que más se maneja mal suele ser la longitud de línea y la elección de fuente, además de factores como tamaño de letra, interlineado y contraste
      La longitud de línea tiene un rango mínimo y máximo en el que la mayoría puede leer cómodamente, más o menos entre 50 y 70 caracteres por línea. En este hilo de Stack Exchange hay buenas respuestas, y además está muy relacionado con accesibilidad: W3C WCAG también dice en visual presentation que el “ancho no debe superar 80 caracteres o glifos (40 o menos para CJK)”
      En general, las fuentes sans serif son las más fáciles de leer en la mayor variedad de pantallas, y en pantallas modernas de alta resolución las serif suelen evaluarse de forma bastante similar. Las fuentes monoespaciadas reducen la legibilidad para la mayoría, así que rara vez son una buena elección para texto corrido. Las excepciones podrían ser personas acostumbradas a terminales o editores de código, o usuarios con dislexia que a veces leen mejor con monoespaciadas. Si tienes dudas, Arial no tiene nada de emocionante pero sigue siendo la opción más segura; y sobre fuentes monoespaciadas, está este hilo de Stack Exchange
      Además, también vale la pena revisar la página de tipografía del gobierno de EE. UU., la sección de tipografía de BBC GEL, la sección de tipografía de Google Material Design, Butterick's Practical Typography, que sirve para profundizar, y The Elements of Typographic Style Applied to the Web

  • Sinceramente, el tamaño de letra predeterminado es demasiado pequeño y difícil de leer. No entiendo por qué eligieron ese tamaño, y para mí no favorece ni la accesibilidad ni la legibilidad

    • Viene de dos problemas de la plataforma web. Seguir las fuentes y tamaños que ofrece el navegador es bueno porque respeta preferencias explícitas del usuario, pero en la práctica muy pocos usuarios configuran esas preferencias de forma explícita, y en muchas configuraciones predeterminadas los fabricantes de navegadores históricamente no han cambiado valores por defecto ya arraigados, así que el tamaño resultante queda cerca del límite inferior de legibilidad
      Peor todavía: font-size no tiene un significado absoluto estable entre distintas fuentes. Incluso font-size: 16px puede verse bastante diferente según la fuente elegida. En Safari, sans y sans-serif por defecto se ven así de distintos: https://github.com/user-attachments/assets/…. Incluso en este mismo comentario se puede ver que el tamaño de la fuente monospace no coincide con el resto
      Al final, es difícil arreglarlo bien, algo siempre se va a romper en algún lado, y termina siendo una cuestión de qué compromiso prefiere el webmaster. Personalmente, cuando puedo usar modo lectura, dejo de preocuparme mucho por el diseño del sitio. Aun así, hoy sí existe una solución bastante útil para la ambigüedad de font-size: https://matklad.github.io/2025/07/16/font-size-adjust.html
    • Uso un monitor extraño de 140ppi, y con el escalado de 125% que en teoría debería usar se ve mal, así que lo dejo en 100% y ajusto el zoom predeterminado para poder leer cómodamente
      El texto de este sitio era tan pequeño que casi parecía que estuviera saltándose ese zoom. Terminé subiendo otro nivel la configuración de tamaño mínimo de fuente en Firefox