Improving my web reading with Martin Tournoij's "readable" Firefox bookmarklet
Not that long ago, I set up Martin Tournoij's "fixed" bookmarklet
to deal with CSS
When I did this, I also decided to install Tournoij's "readable"
because it was right there and it felt potentially useful. With it
sitting in my tab bar, I started trying it out on sites that I found
not so readable, or even vaguely marginally non-readable, and to my
surprise it's been a major quality of life improvement on many sites.
I've become quite glad that I made it conveniently available.
What the "readable" bookmarklet does is it goes through every <p>, <li>, and <div> to force the text colour, size, weight, line spacing, and font family to reasonable values. It doesn't try to set the background colour, but it turns out that a lot of sites use a basically white background, so forcing the text colour is sufficient. All of this sounds very basic, but the result can be really marvelous. It's especially impressive on sites that don't feel as if they have obviously terrible text, just text that's a bit annoying. It turns out that what feels 'a bit annoying' to me is often harder to read than I was consciously aware of.
Why such simple restyling works so well in practice is somewhat sad. It turns out that a lot of sites make terrible text styling choices for clear readability. The obvious case is too-small text, but beyond that a lot of sites turn out to set a lower-contrast text colour, such as some shade of grey, unusually thin text through either weight or font choice, or both at once. Undoubtedly they think that the result looks good and is perfectly readable, but increasingly my eyes disagree with them.
n.style.color is simple; #000 is black. The
is a little bit more complex, because it's using the shorthand
in a specific format. This format sets the font-weight to
'500', which is just a little bit bolder than normal ('400' is
normal), the font-size to 16
px (which these days is a device-independent thing), the line-height to
1.7 em for a pretty generous spacing between lines, and the
your general sans-serif font. People who prefer serif fonts may
want to change that to '
serif', and in general now that I look
at it you might want to tinker with the 16px and the line spacing
as well, depending on your preferences.
(My standard Firefox font is set to the default Fedora 'serif' font, currently DejaVu Serif according to Firefox, at size '15'. I could probably reasonably change the '16px/1.7em sans-serif' in the bookmarklet to '15px/1.5em serif' or so, but at the moment I don't feel inclined to do so; if I'm irritated enough to poke the bookmarklet, I might as well make the page really readable.)