Hacker News new | ask | show | jobs
by robertlf 1917 days ago
This guy seriously needs to learn how to style paragraphs. No one wants to read edge-to-edge.
3 comments

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

I don't understand what you mean?
You can indicate how wide you prefer your paragraphs to be by sizing your browser window appropriately.