Reply—How can I improve the typography on my site?

The basics

As a starting point I would check out the presentation Richard Rutter & Mark Bolton did at SXSW 2007, Web Typography Sucks. I was lucky enough to be in the, very packed, room when they gave the talk. The big idea I took from it was Vertical Rhythm.

Vertical Rhythm

A lot of articles were written about that. One I found useful was Baseline Rhythm Deciphered by Matthew Magain. A handy resource to help calculate Vertical Rhythm is https://vertical-rhythm.crasman.fi.

A newer take on this can be found at https://zellwk.com/blog/why-vertical-rhythms/ where Zell does a great job introducing the concept of varying repetitions so to group related content together.

Fonts

For my blog I like a distinction between heading and body fonts.

I chose Calistoga this for headings. Originally it was being called from Google Fonts. Now it's available to download from GitHub. Using a web font generator to turn the .TTF to a web font package and self host.

The body font is Atkinson Hyperlegible Font, a free download from Braille Institute. This too is self-hosted.

Both of these have a web-safe fallback in the CSS.

Color

I've made some color choices to things like code blocks, pull quotes, etc. All trying to adhere to WCAG contrast levels. That's another way to enhance the typography.

For your site

I don't think you'd have to change much on your site. Don't feel the need to get a custom font if the web-safe one you have works for you.

I would suggest looking at getting rid of the border that surrounds your main copy. I find it disconnects from the main title. Also use sub-headings to break up the content, where applicable.

Hope you find this of use.