Web Typography Resources | Hacker News Reader

Web Typography Resources

betterwebtype.com

111 pointsmatejlatin15 comments

Open articleView on HN

I'd recommend Matthew Butterick's "Practical Typography" to anyone looking to learn about type.

https://practicaltypography.com/

I don't agree with everything on this website, however it has helped me tremendously in developing an eye for type.

My favorite links:

https://practicaltypography.com/typography-in-ten-minutes.ht...

After applying the advice on this page on dozens of site and experimenting and tweaking for hours, I understood the thought process behind these deceptively simple rules.

https://practicaltypography.com/color.html

This drives home the concept of "less is more" and leads by example.

https://practicaltypography.com/straight-and-curly-quotes.ht...

I just love the layout of this page. The design of the table, the elegant asides and a hundred smaller details.

There are areas I don't agree with the author, especially when it comes to the engineering side of web design.

https://practicaltypography.com/the-scorpion-express.html#th...

And yes, there are some controversial choices in the design of the website, notably how links are displayed.

However the pros far outweigh the cons.

Thanks for the links. One comment:

> But consider making body text on screen dark gray rather than black. Screens have more severe contrast than paper, and thus are more tiring to read at full contrast. This is because screens produce color by emitting light directly, whereas paper produces color by absorbing and reflecting ambient light.

To mimic the effect of paper, shouldn't the background be made gray instead of the text?

like hackernews?

Good point, but hackernews does both.

Does it? I'm seeing RGB(0,0,0) for body text in my browsers inspector. Lighter shades are used for other elements though.

Be careful when using both (or going too far with either). I see many sites where the contrast between the text and its background make them uncomfortable for me to read, and my eyes are fairly OK so people with vision problems probably find such sites impossible.

If you want a commercial incentive to not do this: I just hit the "read mode" button or similar, and that strips your adverts as well as recolouring and enlarging the text, and if that doesn't improve things enough the same content is often available on another site a quick google away...

You are right! Interesting, because the body text visually appears to be dark-gray (at least that's what I think).

I think that is a combination of the light background reducing the contrast (as you are concentrating on the text not the background it appears that the text is closer to white rather than the background being further from it), and a fair number of the pixels not actually being true black anyway due to font-smoothing trickery (more so if you are using a non-high-DPI display and an OS that is using a font renderer which prioritises strict shape accuracy over snapping to the pixel grid to reduce blur).

Both is helpful, in my experience. Actually HN is a good example of getting body font/background coloration basically right.

That's a great resource, thanks for mentioning it. I might add it to the page :)

A good thing about this site is that it's legible and nicely designed which, ironically , is not often the case on typographic ressources.