readable.css
(readable-css.freedomtowrite.org)- readable.cssは、サイト全体のデザインシステムではなく、セマンティックHTMLに合理的で見やすい基本スタイルを加えるCSSフレームワークです
- 中核となる原則は一貫性であり、色、フォントスタイル、境界線の太さ、行の高さがサイト全体にわたって適用されます
- ライト/ダークモード、レスポンシブデザイン、縦方向のリズム、ヘッダー・フッター・ナビゲーション・テーブル・ボタン・フォームのスタイルを提供します
- 派手なアニメーション、カスタムフォント、ユーティリティクラス、ユーザーのブラウザー設定を上書きする要素は含みません
- セマンティックHTMLを前提に意図を解釈し、Firefox 84+、Chromium 88+、Edge 88+、Safari 10+をサポートし、IEは対象外です
主な機能と設計範囲
- readable.cssは、サイト全体のデザインシステムを作るためのフレームワークではなく、基本的なHTMLを合理的で見やすくするCSSフレームワークです
- ライト/ダークモードを手動または
prefers-color-schemeでサポートし、レスポンシブデザインと縦方向のリズムを提供します - ヘッダー、フッター、ナビゲーションバー、画像、引用、aside、テーブル、ボタン、フォームをスタイリングします
- テキストの両端揃えはデフォルトで無効になっており、serif、sans-serif、monospaceなどのネイティブフォントをサポートします
- 派手なアニメーション、カスタムフォント、ユーティリティクラス、ユーザーのブラウザー設定を上書きする要素は意図的に除外されています
使い方とサポート範囲
- 最新のCSSファイルはリリースページからダウンロードしてサイトに追加します
<link rel="stylesheet" type="text/css" href="/path/to/readable.css"> - readable.cssはセマンティックHTMLの使い方に応じてサイトの意図を解釈するため、スタイルシートを適切に活用するにはセマンティックHTMLを正しく使う必要があります
- 利用ガイドとreadable.cssに適したHTMLの書き方はWikiで確認できます
- Firefox 84+、Chromium 88+、Edge 88+、Safari 10+をサポートし、IEはサポートしていません
- Chromium、Firefox、Edgeの制限要因は
:not()と:is()のサポートであり、Safariの制限要因はCSS変数のサポートです - ソースコードはCodebergにあり、ドキュメントはDocsで提供されています
- readable.cssとサイトのコードは0BSDライセンスで、必須の著作権表示なしに任意の用途で利用できます
- Freedom to Writeは、ライティング業界向けの自由・オープンソースソフトウェアソリューションを作り、支援する運動です
1件のコメント
Lobste.rs の意見
既定の font-size に手を加えていない点が気に入った。ユーザーはブラウザのようなユーザーエージェントで好みのサイズを設定できるし、そうあるべきで、Webサイトはその設定を 尊重すべき
12px固定は小さすぎて嫌だし、広いビューポートで文字が突然大きくなるのも、すでに快適なサイズに合わせてあるので望まない。こういうことはあまりにも多く、アクセシビリティを大きく損なう
Accept-Languageのような標準を守ろうと言っても、ユーザーはアプリ設定をきちんとできないからこちらが代わりにやるべきだ、という理屈でよく却下されるフォントサイズでも同じような話になりそう
PicoCSS や MVP のようなフレームワークをいつも探しているが、これは 出発点 として使うために作られているようで目を引いた
何かを積み上げるのに良い土台のように見えるが、デザインをもっとよく知っている人の意見も聞いてみたい
html[data-font-family="serif"]で CSS 変数を切り替える方式はあまり有用ではない。単に<html style="font-family:serif">を使えるようにした方が、テンプレートでもクライアントスクリプトでもほぼ同じくらい簡単で、より短く複雑さも少ない今の方式だと
<html data-font-family="some-webfont, serif">のように書けると勘違いさせかねないが、実際には動作しない。文書全体のフォントに monospace を使うのも可読性に合わないスタイル選択で、「readable.css」という名前にも合っていない。ただ、単一の一般フォントファミリーに制限した節度はよい--line-widthと--line-heightも名前が紛らわしい。片方の “line” は要素間の線で、もう片方はテキスト行を意味している色テーマ周りは
(prefers-color-scheme)と(prefers-contrast)、[data-theme]、[data-high-contrast]の組み合わせが入り組んでおり、一部の値や相互作用が 文書化 されていない。@media (prefers-contrast: more) and (prefers-color-scheme: dark)の組み合わせは、<html data-*>オーバーライドがない場合に #fff 背景へ #000 を当ててしまい、明らかに壊れている。color-scheme: darkとcolor-scheme: lightの宣言も必要だa { color: inherit; }を見たところでもう読む気が失せた。垂直リズムの主張まで行かなくても、リンク色を継承させてナビゲーションで下線まで消せば、多くのユーザーはリンクの存在に気づけない。リンクは青か、少なくとも彩度のある強調色にし、下線 も維持すべきだ。readable.css という名前だけに余計にがっかりする行長には、ほとんどの人が快適に読める最小・最大の範囲があり、おおよそ1行 50〜70字だ。この Stack Exchange スレッド には良い回答があり、アクセシビリティとも近いため、W3C WCAG も視覚表現の項目 で「幅は80文字またはグリフ以下（CJK は40以下）」と述べている
フォントは一般にサンセリフが最も広い範囲の画面で読みやすく、最近の高解像度画面ではセリフもおおむね同等に評価される。等幅フォントは大半の人にとって判読性を下げるため、本文では良い選択になることはまれだ。例外はターミナルやコードエディタに慣れた人、あるいはときに等幅フォントの方が読みやすい失読症のユーザーかもしれない。迷うなら面白みはないが Arial が最も安全な選択で、等幅フォントに関する資料として Stack Exchange thread on monospaced fonts がある
追加で、米国政府の typography page、BBC GEL の typography section、Google Material Design の typography section、深く掘り下げるのに良い Butterick's Practical Typography、The Elements of Typographic Style Applied to the Web も参考になる
正直、既定の文字サイズが小さすぎて読みにくい。なぜこのサイズを選ぶのかわからないし、自分には アクセシビリティ も可読性もよくない
さらに悪いのは、
font-sizeがフォントごとに安定した絶対的意味を持たないことだ。font-size: 16pxでも特定のフォントによってかなり違って見える。Safari では既定のsansとsans-serifがこのように異なって見える: https://github.com/user-attachments/assets/…monospaceフォントサイズがほかと揃っていないのが見て取れる結局のところ、きちんと直すのは難しく、どこかは壊れることになり、Webマスターがどんな折衷を好むかの問題として残る。個人的には、リーダーモードが使えるなら Web サイトのデザインはあまり気にならなくなる。ただし
font-sizeの曖昧さには、最近では実用的な解決策がある: https://matklad.github.io/2025/07/16/font-size-adjust.htmlこのサイトはそのズーム率を回避したのかと思うほど文字が小さかった。Firefox の最小フォントサイズ設定をまた一段上げることになった