Unfortunately this blog is hardly a shining example of web typography. 16px Cormorant used throughout has a very small x-height and very thin strokes, making for terrible legibility. I looked at this on both macOS and Windows on a high DPI screen as well as an iPad, the experience is universally poor; I suppose it would only be worse on a low DPI screen. Any user agent stylesheet is way more legible than this design. And this complaint is coming from a young person with good eyesight who routinely trade font size for more content on screen.
I am happy to see somebody else taken aback by The Elements of Typographic Style similarly, but I would hope that instead of blindly applying some principles (eg. line height restriction makes sense on printed pages which are next to each other, and when you can sometimes see through the paper), they are of limited use on the web (maybe in multi-column layouts for line height restriction).<p>Instead of just translating suggested style into CSS/HTML/JS, I'd appreciate an exploration of <i>why</i> something is useful in print, and how that translates to digital screens.
I really don't like commenting on style over substance. But the font choice for the blog makes it hard to read on a normal DPI screen. Some characters, like the uppercase titles, render extremely poorly.<p>I can only assume this looks better on designers' computer?
Do you find those light-on-black code blocks in dark-on-white context OK?<p>I know nowadays it's almost a "standard": dark colour scheme for coding environment is truly widespread (mostly I stick to it myself) but on /bright/ page about typography it feels weird: I thought typography relies on visual balance and 'airiness', and seeing super heavy black rectangles on page promoting good typography is … strange.<p>(I generally consider alternating bright and dark blocks in same page really bad design choice, because it produces aggressive contrast switches putting unnecessary strain on my eyes, but is seems it's just my deficiency.)
Lots of comments saying the font is hard to read, but I don’t find it to be so. Perhaps a difference in browser rendering? Overall, I think it’s a job well done, and I’m much in favour of old-style serifs and justification on the web instead of yet another boring sans-serif left-aligned page.<p>Elements of Typographic Style is one of my favourites too. However, I’d suggest that for web publishing, Butterick’s Practical Typography might be a better guide than Bringhurst, who was primarily focused on print.
Kudos to the author for challenging themselves to apply best practices, especially on the web where everything looks slightly different for everyone! As other comments show, this is not an easy task to take on.<p>I also read Bringhurst's book and found it eye-opening. Even though the author (crepererum) notes that you'll see bad typography everywhere after reading it, which is true, in my case it also had a converse effect: physical books became much more magical. Since learning about the techniques and best practices when typesetting for print, every book now feels more like a work of art to me.<p>And like the author, I was inspired to apply the practices from the book to a concrete project. In my case, I created a LaTeX template since I was typesetting a lot of math homework in college at the time.<p>The book is well worth reading for any lover of physical books, especially for those without prior background in design. It was also well-written and overall a joy to read.
The general look of the page is nice. Two critics:<p>1. The font is too thin (Firefox on a Samsung A40)<p>2. I tried to pinch to zoom to compensate but the page doesn't zoom.<p>Luckily reader mode works. It doesn't look as nice but it's easier to read.<p>2.5 I'm not sure the left and right margins are needed. If I could zoom I'd have zoomed the text to fill the page.
Web is still missing a few important things like baselining (…:baseline doesn’t work through a hierarchy of containers or between a label and an input) or sub/superscripts (²) that do not change the base line height.<p>Edit: ² here is a regular height unicode char, I was talking about <sup>…<sup/>
I still have to see a website that looks better than the default browser styles. Just leave your CSS empty (unless required for some functionality) and enjoy the pure, raw, unadulterated look of the internet.