Hacker News new | ask | show | jobs
by ksubedi 1930 days ago
Hey "This guy" here, any suggestions on how to style them better? My blog is still a work in progress, but I am always looking for ways to improve things.
5 comments

If you're rolling CSS, etc. yourself work through this free resource: https://practicaltypography.com/ You will learn a ton in a short time.

Alternatively grab a design system built by someone who already took care of all the typography decisions.

The typography looks nice, but it is not optimized for reading.

If you want something that will work well, copy the font and color styles from medium or substack. They've done all the research for you.

Here's a full list of the issues

- There's not enough contrast. The text color needs to be darker.

- The font is too large.

- The paragraph width is too wide

- The font weight is too light

Shrink the 1.7em font-size, it's way too big for reading

I think that's honestly a bigger issue than paragraph width

The advice to read Practical Typography is good, but ironically not super practical. It would be a lot of time invested for a small practical benefit in this narrow situation.

Personally, I think you could increase the contrast between text and whitespace more (i.e. use a darker font color, maybe #222), shrink the font-size a little as the other comment said, and most importantly, set a max-width so that the text doesn't expand arbitrarily when viewed on larger screens. 700 or 900px feels nice to me.

I saw the thin grey on white hard to read font and immediate thought "must be a web designer using Mac OS" and wasn't surprised to learn I was right.

A good start is using an Accessibility Contrast Checker. https://webaim.org/resources/contrastchecker/