readable.css

Lobsters Hottest Tools

Summary

readable.css is a CSS framework that provides a sensible and beautiful base default for websites, with features like light/dark mode, responsive design, and vertical rhythm, emphasizing consistency and semantic HTML.

<p><a href="https://lobste.rs/s/noahb3/readable_css">Comments</a></p>
Original Article
View Cached Full Text

Cached at: 05/26/26, 03:21 PM

# readable.css Source: [https://readable-css.freedomtowrite.org/](https://readable-css.freedomtowrite.org/) 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](https://readable-css.freedomtowrite.org/#browser-support), 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](https://codeberg.org/Freedom-to-Write/readable.css/releases)and add it to your code: ``` <link rel="stylesheet" type="text/css" href="/path/to/readable.css"> ``` 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](https://codeberg.org/benjaminhollon/readable.css/wiki)\. ## Browser Support FirefoxChromiumEdgeSafariIE84\+88\+88\+10\+Not supportedThe 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](https://freedomtowrite.org/)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\.

Similar Articles

CSS & vertical rhythm for text, images, and tables

Lobsters Hottest

The article discusses implementing vertical rhythm in web design using CSS, specifically leveraging the `rlh` unit for text alignment and providing a JavaScript workaround for responsive images to maintain consistent spacing.

98.css

Hacker News Top

98.css is a CSS library for building interfaces that look like Windows 98, offering semantic HTML components and zero JavaScript.

CSS: Unavoidable Bad Parts

Lobsters Hottest

A personal blog post by a non-web developer discusses the unavoidable bad parts of CSS, including layout challenges, browser defaults, and wrapper overuse, while highlighting a learnable subset for simple tasks.

CSS is Still Awesome

Lobsters Hottest

The article celebrates the evolution, features, and backward compatibility of CSS, highlighting its continued relevance and improvement in web development.