readable.css

readable.css is a CSS framework, but not like the others you've seen. Rather than helping you build a sitewide design, readable.css provides a base default that is both sensible and beautiful. Out of the box features include:

Light and dark mode (manually or via prefers-color-scheme)

Responsive design

Vertical rhythm

Headers and footers

Navbar styles

Beautiful images, blockquotes, asides, tables, buttons, and forms

Text justification (off by default)

Native font support (serif, sans-serif, or monospace)

Features you will intentionally not find:

Flashy animations

Custom fonts

Utility classes

Anything that overrides your users' browser settings

The key design principle of readable.css is consistency . Colors, font-style, border widths, line heights, and everything else are consistent through the entire site.

Using readable.css

Adding readable.css to your site is remarkably easy. Just download latest version of the CSS file from the releases page and add it to your code:

However, every framework has a learning curve, and readable.css is no exception. readable.css tries to interpret what you want your site to do based on your usage of semantic HTML, but you'll likely need to learn how to use that semantic HTML properly to take full advantage of this stylesheet.

For a guide to using readable.css and writing HTML that works well with it, visit the wiki.

Browser Support

Firefox<br>Chromium<br>Edge<br>Safari<br>IE

84+<br>88+<br>88+<br>10+<br>Not supported

The limiting factor for Chromium, Firefox, and Edge is :not() and :is() support. The limiting factor for Safari is CSS Variable support. IE is not supported, but is also end-of-life as of June 15, 2022.

About Freedom to Write

Freedom to Write is a movement dedicated toward creating and supporting Free and Open Source software solutions for the writing industry. We dream of a world where all writers can share their opinions easily and without having to rely on proprietary software.