Making My Site Easier to Read

Written By: Jake Bauer | Posted: 2020-06-12 | Last Updated: 2020-06-24

Kev Quirk recently posted an article about improving his website’s design which sparked me to review my own site’s typography and design. During my previous site redesign, I tried to make sure that things were as readable as possible but it never hurts to review things. There may be something I like more now or something I missed the first time.

There were a few things in his article which caught my eye and made me reconsider if I was doing all I could regarding typography. For one, I had my line height set at 1.4em which I’ve lowered to 1.3em and I also increased the spacing between paragraph headers and the paragraph above so that individual paragraphs or sections feel more like a single unit. This made text- and section-heavy pages like my About This Site page much nicer to read.

I also played around with different fonts and line widths, but nothing other than what I currently have looked good to me. I’ve also considered adding a light theme back to my website via a @media query because it’s supposedly easier to read, but I originally got rid of it because I didn’t like the look of the light theme that I had, despite my best efforts to tweak it. I do also personally prefer dark themes, so I think I’ll just stick with what I have for now.

Update: I decreased the width of the site from 50rem to 40rem so each line of text has roughly 60-80 characters making the site much more pleasant to read.

There was one thing I disagree with Kev about: font sizes. I laid out my thoughts regarding font sizes in a previous blog post, but to summarize: font sizes should not be specified in px, they should be specified using some relative measurement like rems or %s.

Other than that (😉), I think it’s an excellent post and I hope it influences others to make their websites more readable. Thanks Kev!

This is my forty-third post for the #100DaysToOffload challenge. You can learn more about this challenge over at https://100daystooffload.com.