HACKER Q&A
📣 OliveMate

How can I make my blog more readable?


Bit of an awkward one. For the last ~6 months I've been running a simple personal blog and while I was certain that it looked fine, whenever I look back at my old posts I find my eyes slipping and eventually load the page in my browser's Reader View.

I can't what -exactly- is wrong, or if there's something wrong to begin with, but I find that my visual focus is easily lost when I read my own work. I was hoping that some folks might give me a few pointers and resources on how to make my site more visually focused.

To be more specific (at the risk of a ban I guess), I set up a quick example page to both display what it looks like and to point out some specific things – https://callmeo.live/blog/how-can-i-make-my-blog-more-readable


  👤 daggersandscars Accepted Answer ✓
> but I find that my visual focus is easily lost when I read my own work

I have the same experience on your linked post.

For me, running Safari on MacOS Sonoma 14.2.1 at 100% on a MacBook Air 15:

The font isn't optimal to my eyes. The strokes are too thick for the size and the space between the letters is too close (kerning). This makes the letters and words run together unless I pay close attention. That's tiring, especially when the window is the width of the full screen, so I lose focus.

To compare this, split your screen vertically with your test post on one side and a site you like on the other.

One thing that leaps out to me is that, at half-screen width, it's easier to read your site. The letters are still too close together and the font strokes too thick, but the shorter line length makes it less tiring to read each individual line.

Hope that helps some. A quick way to play with this is to pull the text into Word / LibreOffice / etc, where it's easier to play with fonts, kerning, line spacing, etc.


👤 houseatrielah
Your text-container width could be a little wider, but your main problem is that your colors are terrible.

Day-mode background could be anything from off-white to financial-times color (ft.com). Text color should be a dark grey.

If you want a nightmode, fire up Visual Studio Code and take notes.

vitalik has a pretty decent day and nightmode. https://vitalik.eth.limo/general/2023/12/28/cypherpunk.html

sam altman demonstrates how nice grey text is. https://blog.samaltman.com/


👤 throwaway167
I changed width to 700px (from a computed 519.x), increased font size to 1.4rem, line height to 2.2rem, background color to #16212f (a bit darker) and text colour to #efefef.

But I do prefer lighter backgrounds, and would reverse it - light text on dark glares at me.

> I can't tell if the site is fine and I'm thinking that the grass is greener

You be you. Stick a bunch of stylesheets on random selection if you're feeling bored!


👤 OliveMate
And it wouldn't be a HN post without an archived link – https://archive.is/mYfaY