Ask HN: How can I make my blog more readable? | Hacker News Reader

Ask HN: How can I make my blog more readable?

1 pointOliveMate5 comments

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

View on HN

> 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.

>The font isn't optimal to my eyes.

I wouldn't be surprised if the default font looks as bleh as it does on Mac as it does everything else. If I stick with the system default font (which I'm now doubting) I could try and make it thinner with CSS.

>One thing that leaps out to me is that, at half-screen width, it's easier to read your site.

This is what really clued me on while checking it myself. When I'm on a single screen setup I usually squash my browser to be 2/3 of the screen, which made looking at it much better. That, and I found reading things back on mobile to be much more concise.

Thank you for the fresh perspective on all of this, cheers!

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/

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!

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

Reply on news.ycombinator.com