Legibility

A WebExtension that enables you to add custom CSS styles to websites. Unlike a global user stylesheet, this extension loads a separate stylesheet for each site, giving you control over the appearance of any site. For example, sites with poorly legible typography can be easily corrected for better a reading experience.

Usage

Let’s say we want to modify the font of an article on www.example.com. Add an www.example.com.css file in the extension’s css/ directory:

/* legibility/css/www.example.com.css */
article {
	font: 18px/1.7em Georgia !important;
}

Upon reloading the page, the custom stylesheet should now be applied.

Stylesheets must use a filename matching the website’s domain (including subdomains), and terminated by a .css extension.

Domain wildcards

Styles can be applied to multiple domains or subdomains using domain-level wildcards. For the host www.example.com, the following CSS files will apply:

%.css: Applies styles to all hosts
%.com.css: Applies styles to all .com domains
%.example.com.css: Applies styles to all subdomains under example.com
www.example.com.css: Applies styles to the www.example.com host

Install

This extension should be installed unpacked to allow you to freely add and modify stylesheets in the css/ directory.

Firefox

This extension is unsigned. Refer to “What are my options if I want to install unsigned extensions in Firefox?” in https://wiki.mozilla.org/Add-ons/Extension_Signing#FAQ before attempting to install it.

$ cd '~/Library/Application Support/Firefox/Profiles/PROFILE_DIRECTORY/extensions'
$ git clone https://github.com/teddywing/Legibility.git 'com.teddywing@legibility'

Relaunch Firefox and open the Add-ons page (about:addons). Click the “Enable” button on Legibility’s row.

Chrome

$ git clone https://github.com/teddywing/Legibility.git
$ cd Legibility
$ make chrome