Making the Web More Readable With Stylus

Stylus is an open-source browser extension for managing and applying “user styles”—custom snippets of CSS—to websites. It allows you to tweak sites you visit to tailor them to your preferences. In this post I list the ways I use Stylus to make my browsing experience nicer.

Stylus has the ability to share and use shared-styles, but I just use styles I write myself. Styles can by applied to all sites, specific sub-domains, domains, or domains + paths. I note the matching rule of each style at the top of each entry.

You will probably notice that are large number of my rules are just tweaks to fonts. What can I say, I have opinions about fonts and I use Stylus to express them.

Applies to: Everything

Hide the stupid Sign in with Google popup that appears on sites using a Log in with Google button, such as StackOverflow. I never want to Sign in with Google on a third-party site.

#credential_picker_container:has(iframe[src*="accounts.google.com"]) {
    display: none;
}

arstechnica.com

Applies to: URLs on the domain: arstechnica.com

Remove auto-playing videos in the middle of articles.

.ars-interlude-container {
    display: none;
}

d-shoot.net

Applies to: URLs on the domain: d-shoot.net

Set a font and max-width more suited to reading.

body {
    max-width: 640px;
    font-family: sans-serif;
    margin: 0 auto;
}

danluu.com

Applies to: URLs on the domain: danluu.com

Set a max-width more suited to reading.

body {
    max-width: 600px;
    margin: 0 auto;
}

feedbin.com

Applies to: URLs on the domain: feedbin.com

Put my single glyph WMAppleLogo font first in the stack so that when people use the Apple logo in text it appears correctly on non-Apple devices; use Muli as the article font.

On Apple devices you can type an Apple logo, which uses the Private Use Area code point U+F8FF. I created a font with an Apple logo mapped to this code point so that posts that use it appear as intended.

.font-default .content-styles {
    font-family: WMAppleLogo, Muli, sans-serif;
}

github.com

Applies to: URLs on the domain: github.com

Use the default sans-serif font for body text on GitHub. I have my system font set to Cantarell, which unlike many I actually like for system controls like menus, buttons, and titles. I don’t however want to see prose written in it. So I override GitHub’s use of system-ui.

body, .markdown-body {
    font-family: sans-serif; /* Use sans-serif font instead of system UI font */
}

gkeenan.co

Applies to: URLs on the domain: gkeenan.co

This blog uses a typewriter font for body text which I don’t like visually, nor find particularly easy to read. Replace it with Work Sans, which still fits the vibe of the site.

html {
    font-family: Work Sans, sans-serif;
}

goughlui.com

Applies to: URLs on the domain: goughlui.com

Uses a Times New Roman font by default, which is a bit ugly on my system. Replace with a nicer serif font.

body,
input,
textarea,
.page-title span,
.pingback a.url {
 font-family: "TeX Gyre Pagella", serif
}

lwn.net

Applies to: URLs on the domain: lwn.net

LWN allows you to choose from a selection of fonts, but I still chose to override it with the Source Sans 3 variable font. I also adjust the headings to be less bold and also constrain the article text width.

body {
    font-family: SourceSans3VF, sans-serif;
}
h1,h2,h3, b {
    font-weight: 600
}
DIV.PageHeadline,
DIV.ArticleText {
    max-width: 800px;
}

news.ycombinator.com

Applies to: URLs on the domain: news.ycombinator.com

The post text in Hacker News self-posts like “Ask HN” posts is shown in barely legible light grey. Fix this.

/* Make HN post text readable */
.toptext {
    color: #333;
}
.toptext a {
    color: #1973c2;
}

https://okmij.org/ftp/papers/DreamOSPaper.html

Applies to: URLs starting with: https://okmij.org/ftp/papers/DreamOSPaper.html

Readable max-width.

body {
    max-width: 640px;
    margin: 1em auto;
}

Applies to: URLs on the domain: phanpy.social

Custom font.

body {
    font-family: Figtree, sans-serif;
}

thingspool.net

Applies to: URLs on the domain: thingspool.net

Readable max-width.

body {
    max-width: 700px;
}

wikipedia.org

Applies to: URLs on the domain: wikipedia.org

Better font on desktop.

html, body {
    font-family: 'Lato', sans-serif; /* Lato is used by m.wikipedia */
}

www.bleepingcomputer.com

Applies to: URLs on the domain: www.bleepingcomputer.com

Nicer font.

.bc_main_content p,
.bc_main_content li
{
    font-family: Figtree, sans-serif;
    font-weight: normal;
}

yeslogic.element.io

Applies to: URLs on the domain: yeslogic.element.io

This is a hosted Matrix instance using the Element client.

Use the system emoji font (JoyPixels) instead of the heinous Noto Color Emoji.
Use the system monospace font (PragmataPro) instead of a custom one.
Reduce line height of monospace text to match other places monospace text shown on my system.
Stop the aptly named “Spaces” bar from wasting space.

body {
    font-family: Inter, sans-serif;
    /* Make it use system emoji font */
}

.mx_EventTile_content .markdown-body code,
.mx_EventTile_content .markdown-body pre {
    font-family: monospace !important;
}
.mx_EventTile_content .markdown-body pre {
    line-height: 1.3;
}
*[aria-label="Spaces"] {
    display: none;
}

👨‍💻 Wesley Moore