Halp! My blog is not super readable but not sure what to change.
I’m not super pleased with the readability on my blog, but honestly don’t know what to change. Is it the font? The spacing? Size of
Paragraphs?
I’d appreciate any insights/suggestions on what to change.
Here’s a link from a recent post with a fair bit of text: https://spencerjones.blog/why-not-mongo/
Trending on Indie Hackers
Why do you think that it's not readable?
I think the main thing bugging me about that post you referenced, is that most of your headings are not headings, so they don't get the proper top margin they should get. Instead you are using an ordered list for headings. Plus they don't feel like they fit your type scale properly.
Here is an example where I changed one ordered list heading into a h3:
I agree with this.
Thanks @gilli!
I've changed that so they should now be headings. Thanks for pointing out.
You're welcome. It looks better now!
Agreed, @gilli! Thanks for your input!
There are some main principles to make content easier to read like visual hierarchy, contrast, spacing, container width, font-family etc
My best advice to make your life easier is to open this page https://teehanlax.com/story/medium/ and just observe what they do and copy it to your blog.
Or you can check medium.com articles since Medium design team is already trying to nail the readability aspect of content you can learn by observing and copying their design practices.
It's same approach as coding, you observe how others structure and build their apps, learn from the and adopt these practices in your codebase :)
1- Maybe because you're using Helvetica as a body font.
Helevetica on Windows looks bad because it's not properly "hinted".
Look below how Arial (Left) is better rendered than Helvetica :
Source :
https://medium.com/@msilvertant/why-is-helvetica-bad-e6b281672ee3
https://www.quora.com/Why-doesn’t-the-Helvetica-font-render-properly-in-Windows#:~:text=There are au-,Helvetica doesn't render well in the Windows environment because,the expense of image clarity.
Also, for body, serif fonts tend to be a lil more readable than the sans serif ones.
2- this does not necessarily harm readability but you're using 3 typefaces :
Georgia
Helvetica
Lucida sans unicode
You can maybe reduce it to 2.
Thanks, @aekiro! I've cut out Helvetica. The body is now serif (with a bit tighter line-spacing).
Didn't know that about helvetica on Windows. Will tuck that away for the future.
I think your line height is too large. It's at 1.6 currently. Maybe try 1.4 or so and see if it's more readable. Your font is fine and your line widths are good.
Good call. Adjusted it down to 1.45 (and now a serif font). That feels nicer.
Hey Spencer 👋
Not an expert at all, but maybe you could change the spacing between H and P yeah.
Also create longer paragraph.
I mean, all your paragraphs are 3/4 lines max, it's strange when you read it.