A minimal typographic rehash of Wikipedia, designed for screen readability. Currently very alpha and only tested on English Wikipedia pages.
wikipedia.rehash is a UserCSS / UserScript combo adapted from a bookmarklet I wrote earlier to fix overly wide web pages like this. This issue is very common to websites designed before 2005(-ish), when 4:3 monitors are widely used.
This kind of no-margin layout probably looked okay back then, but overly wide paragraphs and tiny font sizes are unreadable on a HiDPI, 16:9 monitor commonly used today. Wikipedia is, unfortunately, one of the adopters of the no-margin layout.
I'm getting tired of fixing layout issues every time I open a Wikipedia article, so this project was born.
This project is still in the alpha stage. I might add more rules and options in the future when I encounter more problems. Pull requests are welcome.
- fix the line length issues of Wikipedia's default layout (note that the current line length is still probably wider than some recommended values to accommodate math formulas, code, floating boxes, etc.)
- apply a more readable font size
- (opinionated) change the body text font to a screen-readable serif (default is Charter) in order to better match math formulas
- (opinionated) slightly lower the contrast ratio of body text
- keep the vanilla look of Wikipedia, unlike some heavier redesign of Wikipedia. The goal of this project is to fix Wikipedia and be minimal, not to redesign it.
wikipedia.rehash consists of three parts:
1. CSS stylesheet
There are multiple ways to install this stylesheet. Pick any one of them.
Option 1: CSS Injection [Recommended]
I would recommend this approach because you can turn on/off the theme easily if you encounter any layout issues.
- You will have to first install a userstyles manager such as Stylus or Xstyle.
- Click here to install the stylesheet.
Option 2: Custom CSS [Recommended]
If you have a Wikipedia account, you can apply a global custom CSS stylesheet to your account. Go to Preferences > Appearance > Skin > Vector > Custom CSS (> Edit Source, if you already have a custom CSS). Copy-paste everything inside
vector.rehash.css to the editor then click Publish page.
An example can be found here.
This stylesheet is not designed for mobile usage in mind but it works surprisingly well on my tablet. Using a custom CSS is probably the only way you can use the rehash on your mobile devices.
If you do think it's necessary to fix the issue of pop-up windows, pick either one of the following.
Still, you can turn on/off the theme easily if you encounter any layout issues.
- You will have to first install a userscript manager such as Greasemonkey (Firefox only) or Tampermonkey.
- Click here to install the userscript.
vector.rehash.js to the editor then click Publish page.
An example can be found here.
If you are using macOS or iOS, Charter is probably already preinstalled on your system.
I'm using Charter as the default font because it is free and relatively suitable for screen reading. However, the character set of Charter is fairly limited. You can switch to your favorite font by modifying the stylesheet.
Here are some other options:
- FF Scala: I love the design of each character in this font, but it might be too thin for screen reading.
- Freight Text: looks decent
- Source Serif Pro (free)
- Noto Serif (free): I'm using this as my default system serif font, it has a very large character set.
- Linux Libertine (free): the font used in Wikipedia's logo, but still too thin for screen reading
- Palatino: if you don't have other options
- Georgia: still, if you don't have other options
Also, Said Achmiz compiled a list of “Screen serif” fonts. You can find more options in the blog post.
If you are using a different font, you will have to tweak the line spacing and font size yourself. You might find this to be useful.
If you have more suggestions for serif (or sans-serif) fonts suitable for screen reading, please let me know. I really want to explore more options.
Sample article: Riemann sphere
Please compare the images in full-screen mode for better visibility.
After rehash [Desktop]
After rehash [Tablet]
If you want to know more about the design principles, here are some further readings.
- 58 bytes of css to look great nearly everywhere
- Long-Form Websites and Typography
- Butterick’s Practical Typography
- The Elements of Typographic Style
(Maybe) related projects
Some alternatives to try if you want a more elaborated redesign.
Please do not use this project for commercial purposes without my consent.