Skip to content

Instantly share code, notes, and snippets.

@splch
Last active November 29, 2022 23:04
Show Gist options
  • Save splch/cc419f65d0bedd84ff29f2aa1db9273a to your computer and use it in GitHub Desktop.
Save splch/cc419f65d0bedd84ff29f2aa1db9273a to your computer and use it in GitHub Desktop.
CSS rules optimized for site readability
:root {
--bg-color: #ffffff;
--font-color: #000000;
/* highest contrast colors
for light and dark themes */
--red: #ec0000;
--green: #008900;
--blue: #5f5fff;
--gray: #757575;
}
@media (prefers-color-scheme: dark) {
:root {
/* change to dark theme */
--bg-color: #000000;
--font-color: #ffffff;
}
}
*:not(li, progress, span) {
border-radius: 5px;
/* no overflowing body */
max-width: 100%;
overflow: auto;
}
*:disabled {
cursor: not-allowed !important;
}
[href],
dfn {
/* no visited color */
color: var(--blue);
}
[href]:hover {
text-decoration: none;
}
[href^="mailto:"]::before {
content: "📧 ";
}
abbr {
cursor: help;
}
abbr,
var {
color: var(--red);
}
blockquote {
/* add bar before quote */
border-left: 0.3em solid var(--gray);
padding-left: 1em;
}
body {
/* high contrast */
background: var(--bg-color);
color: var(--font-color);
/* most readable wed-safe font */
font-family: Helvetica;
/* 12pt is minimum */
font-size: 14pt;
/* required with justified text */
hyphens: auto;
/* experimental:
highest quality images */
image-rendering: high-quality;
/* 1.5 is minimum */
line-height: 1.6;
/* center body in page */
margin: auto;
/* space inside body */
padding: 0 1em;
/* each line is similar length */
text-align: justify;
/* browser focuses on readability */
text-rendering: optimizeLegibility;
/* line length of 60 characters
(between recommended 45-80)
& subtract the padding */
width: min(60ch, calc(100% - 2em));
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
border: 1px solid var(--gray);
/* appear clickable */
cursor: pointer;
}
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
/* make border blend into background */
border: 1px solid var(--bg-color);
}
code {
/* classic green code */
color: var(--green);
}
figure {
/* center caption under image */
text-align: center;
}
footer,
header {
margin-top: 1em;
text-align: center;
}
html {
/* better for jump scrolling */
scroll-behavior: smooth;
}
iframe {
/* common screen ratio */
aspect-ratio: 3/2;
/* keep from overflowing */
width: 99%;
}
kbd {
/* appear like a key */
box-shadow: 1px 1px 2px 1px;
}
nav {
display: flex;
/* space links apart */
justify-content: space-around;
}
small {
/* decrease visibility */
color: var(--gray);
}
summary {
/* indicate interaction */
cursor: pointer;
font-weight: bold;
}
table {
/* multiple borders merge */
border-collapse: collapse;
display: block;
}
tbody>tr:nth-child(odd) {
/* set background of odd cells */
background: var(--gray);
}
td,
th {
border: 1px solid;
border-collapse: collapse;
}
@splch
Copy link
Author

splch commented Apr 26, 2022

This style sheet is designed to make any HTML appear very readable using the fewest CSS rules.

I used the HTML5 Test Page to verify readability in every situation and backed each rule with relevant research. Specifically, the body tag increases readability / WPM with:

  1. the fastest web-safe font,
  2. size 14pt font,
  3. nearly double line spacing,
  4. legibility-optimized rendering,
  5. and a maximum of 60 characters per line.

Here is a before and after comparison of the stylesheet.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment