
Web Typography Resources - matejlatin
https://betterwebtype.com/web-typography-resources
======
waivek
I'd recommend Matthew Butterick's "Practical Typography" to anyone looking to
learn about type.

[https://practicaltypography.com/](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...](https://practicaltypography.com/typography-in-ten-minutes.html)

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](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...](https://practicaltypography.com/straight-and-curly-quotes.html)

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...](https://practicaltypography.com/the-scorpion-
express.html#the-file-size-myth)

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.

~~~
amelius
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?

~~~
reacweb
like hackernews?

~~~
amelius
Good point, but hackernews does both.

~~~
dspillett
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...

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

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

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

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

------
JunaidBhai
Great resources. Would love to share it with my
[http://draftss.com](http://draftss.com) team.

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

------
al_ramich
Great site, thanks for sharing.

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

