I want to like this page, I really do. But please don't use Computer Modern on the web... It's a pretty ancient typeface that's made for paper first, and looks bad on a raster display, even a pixel-dense one.
> I want to like this page, I really do. But please don't use Computer Modern on the web... It's a pretty ancient typeface that's made for paper first, and looks bad on a raster display, even a pixel-dense one.
Looks okay to me (on desktop and mobile).
My take on readability wrt to blog posts is that the font doesn't matter as much as you think it does. Sure, don't use Comic Sans or some handwriting-equivalent, but any mainstream font should work (sans for headlines, serifs for content, maybe?)
The larger factors affecting readability:
1. The paragraph width. It's tiring to read a paragraph that's 250+ characters wide. Stick to 64-78 characters wide. I find setting max-width to 38em-42em best.
2. Line spacing - bump it up a little - 1.25em-1.6em is great at normal font sizes. You need to adjust as the font size increases.
3. Background color - muted colors are nice. Bright colors are not.
4. Foreground color - start with low contrast and increase it until the devtools in the browser tells you it passes the accessibility test.
Only after you have done all that, start playing with the font.
Looks okay to me (on desktop and mobile).
My take on readability wrt to blog posts is that the font doesn't matter as much as you think it does. Sure, don't use Comic Sans or some handwriting-equivalent, but any mainstream font should work (sans for headlines, serifs for content, maybe?)
The larger factors affecting readability:
1. The paragraph width. It's tiring to read a paragraph that's 250+ characters wide. Stick to 64-78 characters wide. I find setting max-width to 38em-42em best.
2. Line spacing - bump it up a little - 1.25em-1.6em is great at normal font sizes. You need to adjust as the font size increases.
3. Background color - muted colors are nice. Bright colors are not.
4. Foreground color - start with low contrast and increase it until the devtools in the browser tells you it passes the accessibility test.
Only after you have done all that, start playing with the font.