The Elements of Typographic Style Applied to the Web

I didn't get very far in this because the body type is set too small to read on a smartphone screen.

Are there any web sites that have beautiful typography?

https://practicaltypography.com/ is pretty great.

I cringe a bit when I hear “beautiful typography”. Usually, this means style over substance. It is way easier to shave yaks about the way something looks (and feel productive doing it), than it is being concerned over the last 10% that takes content from good enough to great.

I teach user interface design, with a bit about typography but I'm not a typographer myself. But I feel like a lot of the advice there is taken from graphic design (based on the original EoTS book), and not that practical for web designers where text is slightly more fluid.

Namely, much of the book is about making choices that depend on the exact placement of individual characters on the screen. Like the entire section about hyphenation. This doesn't make sense if the glyphs show up slightly different on different screens. Like Mac/PC/Android might render the same glyph for a font just a pixel different (maybe even just due to the way it rounds a number), bumping a glyph on to the next line. It's really hard to control the exact placement of each glyph, and not worth fretting about for the web. So I think the principles in the book that are focused on exact placement of individual glyphs (characters) is incompatible with the more general principles of responsive layouts or using a native font stack.

Some of the advice is automatically taken care of by defaults on the browser/OS, like kerning or letterspacing are often not that relevant to the web designer. It might be relevant to the people working on rendering at the browser level. And the other advice is stylistic and depends on the content (like indentation and casing).

I think the most practical advice from this book is fairly straightforward: choose some appropriate sizings for various headers and body text, check that you have about 70 characters per line, and choose a comfortable line-height for the body text.