Improve code readability

Created by: swashcap

Problem

Readability of of inline and block code on <a11yproject.com> isn’t great primarily because it’s set in the body type, a san-serif face. This is especially noticeable on “Getting started with ARIA”. Code is traditionally set in a monospaced face.

Solution

• Address the issues by changing code elements’ font-family to a cross-OS-friendly monospace font stack.
• Decrease code’s font-size to make reading inline elements less jarring.
• Decrease pre’s line-height to make reading code blocks easier.
• Bonus: remove redundant background color on codes nested inside pres.

These are broken into (excessively?) granular commits. I’d be happy to rebase, change the font stack, drop a commit, etc.

Testing

git clone git@github.com:swashcap/a11yproject.com.git wat-is-code
cd wat-is-code
bundle install
jekyll serve

Then, go to http://localhost4000:/posts/getting-started-aria/ and check out the inline and block code.

Screenshots

Before:

After: