readable.css

 (readable-css.freedomtowrite.org)
2 pontos por GN⁺ 8 시간 전 | 1 comentários | Compartilhar no WhatsApp
  • readable.css é um framework CSS que não serve como sistema de design completo para o site, mas adiciona estilos básicos sensatos e agradáveis a HTML semântico
  • O princípio central é a consistência; cores, estilos de fonte, espessura de borda e altura de linha são aplicados de forma coerente em todo o site
  • Oferece modo claro/escuro, design responsivo, ritmo vertical e estilos para cabeçalho, rodapé, navegação, tabelas, botões e formulários
  • Não inclui animações chamativas, fontes personalizadas, classes utilitárias nem elementos que sobrescrevam as configurações do navegador do usuário
  • Parte do pressuposto de HTML semântico para interpretar a intenção e oferece suporte a Firefox 84+, Chromium 88+, Edge 88+, Safari 10+, com exclusão do IE

Principais recursos e escopo de design

  • readable.css não é um framework para criar um sistema de design completo para o site, e sim um framework CSS que torna o HTML básico sensato e agradável visualmente
  • Oferece suporte a modo claro/escuro manualmente ou via prefers-color-scheme, além de design responsivo e ritmo vertical
  • Aplica estilos a cabeçalhos, rodapés, barras de navegação, imagens, citações, aside, tabelas, botões e formulários
  • O alinhamento justificado do texto vem desativado por padrão, e há suporte a fontes nativas como serif, sans-serif e monospace
  • Animações chamativas, fontes personalizadas, classes utilitárias e elementos que sobrescrevem as configurações do navegador do usuário são intencionalmente excluídos

Como usar e escopo de suporte

  • O arquivo CSS mais recente pode ser baixado na página de releases e adicionado ao site 
    <link rel="stylesheet" type="text/css" href="/path/to/readable.css">
  • readable.css interpreta a intenção do site de acordo com a forma como HTML semântico é usado, então é preciso usar HTML semântico corretamente para aproveitar bem a folha de estilos
  • O guia de uso e a forma de escrever HTML compatível com readable.css podem ser consultados na wiki
  • Há suporte para Firefox 84+, Chromium 88+, Edge 88+ e Safari 10+, e o IE não é suportado
  • Os fatores limitantes em Chromium, Firefox e Edge são o suporte a :not() e :is(), e em Safari o fator limitante é o suporte a variáveis CSS
  • O código-fonte está no Codeberg, e a documentação é fornecida em Docs
  • readable.css e o código do site usam a licença 0BSD, podendo ser usados para qualquer finalidade sem atribuição obrigatória
  • Freedom to Write é um movimento que cria e apoia soluções de software livre e de código aberto para a indústria da escrita

Leituras relacionadas

1 comentários

 
GN⁺ 8 시간 전
Comentários no Lobste.rs

  • Gosto do fato de não mexer no font-size padrão. O usuário pode, e deve, definir seu tamanho preferido no agente de usuário, como o navegador, e os sites devem respeitar isso
    Odeio quando fica fixo em 12px porque é pequeno demais, e também não quero que o texto aumente de repente em viewports largas quando eu já ajustei para um tamanho confortável. Isso é comum demais e prejudica muito a acessibilidade

    • Mesmo em projetos de trabalho, quando tento defender o cumprimento de padrões como Accept-Language, isso muitas vezes é rejeitado com a lógica de que os usuários não sabem configurar o app direito, então precisamos fazer isso por eles
      Imagino que surja um argumento parecido em relação ao tamanho da fonte

  • Sempre fico de olho em frameworks como PicoCSS e MVP, e este chamou atenção por parecer feito para ser usado como ponto de partida
    Parece uma boa base para construir em cima, mas queria ouvir também a opinião de pessoas que entendem mais de design

  • O jeito de trocar variáveis CSS com html[data-font-family="serif"] não parece muito útil. Seria quase tão fácil, tanto em templates quanto em scripts no cliente, simplesmente usar <html style="font-family:serif">, e isso seria mais curto e menos complexo
    Do jeito atual, pode dar a impressão de que algo como <html data-font-family="some-webfont, serif"> funcionaria, mas na prática não funciona. Usar monospace como fonte do documento inteiro também é uma escolha de estilo que não combina com legibilidade, nem com o nome “readable.css”. Ainda assim, gosto da disciplina de limitar a uma única família genérica
    --line-width e --line-height também têm nomes confusos. Uma “line” é uma linha entre elementos; a outra é uma linha de texto
    A parte de temas de cor está embolada entre (prefers-color-scheme) e (prefers-contrast), [data-theme] e [data-high-contrast], e alguns valores e interações não estão documentados. A combinação @media (prefers-contrast: more) and (prefers-color-scheme: dark) quebra claramente quando não há override via <html data-*>, porque define #000 sobre fundo #fff. Também faltam as declarações color-scheme: dark e color-scheme: light
    Em a { color: inherit; }, eu já perco a vontade de continuar olhando. Nem precisa chegar à discussão sobre ritmo vertical: se a cor do link é herdada e ainda se remove o sublinhado na navegação, muitos usuários nem percebem que existem links ali. Links devem ser azuis ou pelo menos ter uma cor de destaque saturada, e o sublinhado também deve ser mantido. É ainda mais decepcionante por se chamar readable.css

    • Legibilidade é uma área estudada há décadas e razoavelmente bem compreendida, mas surpreendentemente muita gente não conhece isso. O que mais se vê sendo tratado de forma errada é comprimento de linha e escolha de fonte, além de fatores como tamanho da letra, espaçamento entre linhas e contraste
      O comprimento de linha tem uma faixa mínima e máxima em que a maioria das pessoas consegue ler com conforto, algo em torno de 50 a 70 caracteres por linha. Esta thread no Stack Exchange tem boas respostas, e isso também é próximo de acessibilidade, a ponto de a W3C WCAG falar na seção de apresentação visual em “largura de até 80 caracteres ou glifos (40 ou menos para CJK)”
      Quanto às fontes, em geral sans-serif é a mais fácil de ler na maior variedade de telas, e em telas modernas de alta resolução as serifadas costumam ter avaliação parecida. Fontes monoespaçadas reduzem a legibilidade para a maioria das pessoas, então raramente são uma boa escolha para texto corrido. As exceções podem ser pessoas acostumadas com terminais e editores de código ou, às vezes, usuários com dislexia que leem melhor com fonte monoespaçada. Em caso de dúvida, por mais sem graça que seja, Arial é a escolha mais segura, e há material sobre isso nesta thread do Stack Exchange sobre fontes monoespaçadas
      Além disso, vale consultar a página de tipografia do governo dos EUA, a seção de tipografia do BBC GEL, a seção de tipografia do Google Material Design, o ótimo Butterick's Practical Typography para se aprofundar, e The Elements of Typographic Style Applied to the Web

  • Sinceramente, o tamanho padrão do texto está pequeno demais e difícil de ler. Não entendo por que escolheram esse tamanho e, para mim, isso não é bom nem para acessibilidade nem para legibilidade

    • Isso vem de dois problemas da plataforma web. Seguir a fonte e o tamanho fornecidos pelo navegador é bom porque respeita preferências explicitamente definidas pelo usuário, mas na prática pouquíssimos usuários definem isso de forma explícita, e em muitas configurações padrão os fabricantes de navegadores historicamente não mudam os defaults antigos, então o resultado acaba ficando próximo do limite inferior de legibilidade
      Pior ainda: font-size não tem um significado absoluto estável entre fontes. font-size: 16px pode parecer bem diferente dependendo da fonte escolhida. No Safari, o padrão sans e sans-serif ficam assim, com aparência bem diferente: https://github.com/user-attachments/assets/…. Até neste comentário dá para ver que o tamanho da fonte monospace não bate com o resto
      No fim, é difícil corrigir isso direito, alguma coisa sempre vai quebrar, e vira uma questão de qual compromisso o webmaster prefere. Pessoalmente, se posso usar o modo de leitura, acabo não ligando muito para o design do site. Mas hoje existe uma solução razoável para a ambiguidade de font-size: https://matklad.github.io/2025/07/16/font-size-adjust.html
    • Uso um monitor 140ppi esquisito e, em 125% de escala, que seria o ideal, a imagem fica ruim, então deixo em 100% e ajusto o zoom padrão para conseguir ler
      O texto deste site estava tão pequeno que pareceu até que ele tinha burlado esse zoom. Acabei aumentando mais um nível na configuração de tamanho mínimo de fonte do Firefox