Make GMail more readable with this CSS in the Chrome Extension *Stylus*

stylus-gmail-enhance-readability.css

/* ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ */

/* Use with the Stylus Chrome extension                                        */
/* Paste it into a Stylus style for URLs starting with https://mail.google.com */
/* (Probably won't work forever, but works as of November 2018)                */

/* ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ */


/* =========================================================================== */
/* A bunch of styles to replace Google Sans & Roboto with SF or Segoe ======== */
/* =========================================================================== */
body,
input,
textarea,
select,
*,
.TO .nU>.n0,
.TO.NQ .nU>.n0,
.TO.nZ .nU>.n0,
.ah9>.CJ,
.n3>.CL>.CK,
.ha>.hP,
.hP,
.ha,
h1,
h2,
h3,
h4,
h5,
h6,
.z0>.L3,
.zA>.a4W,
.aKz,
.yW,
.a3s,
.g6,
.amn>.ams {
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol !important;
}

/* =========================================================================== */
/* Constrains center column to keep email readable on large screens ========== */
/* =========================================================================== */

.Tm.aeJ {
    background: rgba(0, 0, 0, 0.04);
}

.aeF {
    max-width: 1000px;
    margin: 0 auto;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    font-size: 1.25em;
}

@media (min-width: 2000px) {
    .aeF {
        position: relative;
        left: -92px;
    }
}

.aXjCH *,
.Am,
.LW-avf.Am {
    /* font-size: 1rem; */
    line-height: 1.65;
}

/* =========================================================================== */
/* Makes email compose pop-up constrained ==================================== */
/* =========================================================================== */

.aSs {
    display:grid;
    justify-content: center;
}
.aSt, .aVN {
    max-width: 1000px;
    position: relative;
    left: auto !important;
}

/* =========================================================================== */
/* The styles below allow text styling to show up in emails ================== */
/* =========================================================================== */

[face='monospace, monospace'] {
    font-family: 'SFMono-Regular', monospace !important;
}

[face='times new roman, serif'] {
    font-family: 'Charter', 'Georgia', 'times new roman', serif !important;
    /* font-size: 1.1em !important; */
}

[face='arial black, sans-serif'] {
    font-family: 'SFProText', 'arial black', sans-serif !important;
    font-weight: 900;
}

[face='arial narrow, sans-serif'] {
    font-family: 'InputSansCompressed-Regular', 'arial narrow', sans-serif !important;
}

[face='comic sans ms, sans-serif'] {
    font-family: 'comic sans ms', fantasy !important;
}

[face='Georgia, serif'] {
    font-family: 'Georgia', serif !important;
    /* font-size: 1.05em !important; */
}

[face='garamond, serif'] {
    font-family: 'garamond', serif !important;
    /* font-size: 1.1em !important; */
}

[face='tahoma, sans-serif'] {
    font-family: 'tahoma', sans-serif !important;
}

[face='trebuchet ms, sans-serif'] {
    font-family: 'trebuchet ms', sans-serif !important;
}

[face='verdana, sans-serif'] {
    font-family: 'verdana', sans-serif !important;
    /* font-size: 0.95em !important; */
}

I love the updated Gmail design, and it's my go-to email client. However, I feel more comfortable reading SF.

Feel the same? Use this CSS with Stylus to make Gmail use SF Pro (on macOS) or Segoe (on Windows).

This also constrains the central column on wide-screen displays for more readable and writable emails. Doesn't make the central column too narrow, in order to keep emails fairly compact (though obviously, you can feel free to change my preference of max-width: 1000px;), and keeps scrolling easy by keeping the entire middle area scrollable (you'd be annoyed if it didn't).

Finally, this avoids overriding your own type styling, so monospace text will still be monospace, Comic Sans will still be Comic Sans, etc:

This may stop working when/if the class naming on Gmail changes, but I'll probably update it when that happens.

Find something that isn't working how you expect it to? Feel free to leave a comment (or suggested code!) here, and I'll make an update when I can.

Enjoy!

U+1F48C

Installed, thanks!

Love the script. Is there a way to restrict the width on images?