dyslexia CSS overrides (comic sans etc)

README.md

👩🏼‍💻 dyslexia type adjustments 👓

this gist is to make things readable for myself! happy to share with others and exchange notes.

i don't know much about dyslexia, but few weeks ago i was in an accessibilty tech demo, and found that options for dyslexia helped me so much! so i'm trying things out!

some things i know:

• comic sans makes it a lot easier for me to read and understand technical documentation
• low contrast is good for me! it seems like that may be a common thing with dyslexia too, because i have seen some dyslexia plugins that text/bg contrast

---

How to set your own CSS!

i use an open-source browser plugin called Stylus for chrome

---

Fonts

regular reading

• Comic Sans: a good font to use for this! and seems to be popular. benefits of comic sans for dyslexic reading
• Street Corner: Lately, I have switched from Comic Sans to Street Corner download from dafont. it feels really nice for me to read! for some reach the assymetric hard corner in the top-left of each letter locks my eyes in a good spot. the large x-height is very nice as well.
  • note: the font naming is a little messy if you intall all variants. i'm looking for a cleaner source, but this font doesn't seem to be as available others from the same designer. maybe it's an older one that they don't keep up with as much?
• there are also some open-source dyslexia-specific fonts, though i actually find the contrast makes them more difficult for me.

monospace for coding/etc

• Dank Mono is a pretty good monospace font!! (personally i find it readable due to unique letter shapes)
• Comic Code - i received as a generous gift, and i can confirm that it has similar legibility benefits to the Comic Sans MS sans-serif typeface.

these are both premium/paid fonts, but are my top choices in regards to monospace font choice out of what i have tried so far.

in the past, i have also had a decent experience with Fira Code.

---

misc notes

icon fonts are inaccessible:

• https://twitter.com/sarah_edo/status/1044580394052403200
• https://speakerdeck.com/ninjanails/death-to-icon-fonts
• https://twitter.com/lovemecomputer_/status/1143630997336068098

css-global-type-overrides.css

:not(i) {
    font-family: "Street Corner", "Comic Sans MS" !important;
}


pre, pre *,
code, code *,
.diff-view, .diff-view  *,
.Box .Box-body.blob-wrapper, .Box .Box-body.blob-wrapper *,
.diff-table, .diff-table *,
.blob-code, .blob-code *,
.file-editor-textarea, .js-blob-contents, .js-code-textarea {
    font-family: "Comic Code", "Dank Mono" !important;
}

/* hovering over paragraphs to help focus and lower contrast with BG color is nice, 
 * but it's a bit much to do this globally everywhere */
/*p:hover, ul:hover, ol:hover, li:hover, h3:hover, h4:hover, h5:hover, h6:hover, blockquote:hover {
    background: rgba(50,50,50,.065);
    border-radius: 6px;
}

github-contrast-adjustments.css

html, body, 
.timeline-comment, 
.discussion-timeline-actions,
.gh-header,
.reponav-item.selected,
.tabnav-tab.selected, 
.tabnav-tab[aria-selected=true],
.zhc-dependency,
.thread-subscription-status,
.Box,
.markdown-body table tr,
.pr-toolbar,
.diffbar,
.gh-header .gh-header-sticky.is-stuck+.gh-header-shadow {
    background: #f8f8f8;
    color: #414141;
}

.timeline-comment-wrapper, 
.discussion-timeline-actions,
.discussion-item-icon {
    border-color: #f8f8f8;
}
.timeline-comment-wrapper>.timeline-comment:after, .timeline-new-comment .timeline-comment:after {
    border-right-color: #f8f8f8;
}

.markdown-body .highlight pre, .markdown-body pre {
    background: #efefef;
    border-radius: 5px;
}

.repohead.experiment-repo-nav,
.new-discussion-timeline .previewable-comment-form .comment-form-head.tabnav,
.social-count {
    background: #f1eff2;
}