Hacker News new | past | comments | ask | show | jobs | submit login
Web Typography Resources (betterwebtype.com)
111 points by matejlatin on July 31, 2018 | hide | past | favorite | 15 comments



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 con­sider mak­ing body text on screen dark gray rather than black. Screens have more se­vere con­trast than pa­per, and thus are more tir­ing to read at full con­trast. This is be­cause screens pro­duce color by emit­ting light di­rectly, whereas pa­per pro­duces color by ab­sorb­ing and re­flect­ing am­bi­ent light.

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


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


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


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.


Thanks, I'm glad you think it's well designed :)


Great resources. Would love to share it with my http://draftss.com team.


Thanks. Go ahead, you can share it with anyone you want :)


Great site, thanks for sharing.


No problem, I'm glad you found value in it.




Consider applying for YC's Spring batch! Applications are open till Feb 11.

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: