Tufte CSS

I recall quite liking the typography on this website the first time I saw it years ago. It's amazing how much it has dated for me since (I think primarily due to being liberally copied exactly in too many places around the web).

> a reminder about the goal of this project. The web is not print. Webpages are not books. Therefore, the goal of Tufte CSS is not to say “websites should look like this interpretation of Tufte’s books” but rather “here are some techniques Tufte developed that we’ve found useful in print; maybe you can find a way to make them useful on the web”.

Reading this I think an interesting alternative approach could to be apply Tufte's principles to a CMS rich text field editor or to a frontend templating library - something that generates HTML - rather than focusing purely on the CSS side. This & selecting some less print-oriented type.

Really? I took an immediate dislike to it. Same for the site linked in the comments below - https://resilientwebdesign.com

It reminds me of the printing found in 200 year old books. I can't quite put my finger on what I don't like about it, but it grates. Perhaps it's inconsistent letter shapes.

Can anyone more informed comment on the font?

It's using a custom font called "ET Book," which is (according to its GitHub) inspired by Bembo.

If I had to guess at what you find grating, it might not be the letter shapes, but rather the spacing. At least rendered on a Mac, the inter-letter spacing just looks off; it's a little too tight all around, and certain pairs look inconsistent. It lacks visual smoothness. (I know that sounds like somebody talking about wine or oxygen-free audio cables, but I can't think of a better phrase.) It's possible that this is a quirk of Apple's font rendering algorithms, but I'm not convinced -- and it's definitely the font. If you prevent external fonts from loading or use the web inspector to remove "et-book" from the CSS and let it fall back to Palatino, the typesetting improves.

> Can anyone more informed comment on the font?

Could it be that you unconsciously prefer serif fonts to sans serif fonts? Sans serif fonts are preferred by people with dyslexia, for example.

Another thing that comes to mind is high contrast in stroke thickness, thick vertical strokes and thin horizontal or curved strokes. This is reminiscent of engravings and calligraphy, but can be difficult to read on a screen, especially when the font size is small. Anti-aliasing options can also affect this and lead to even greater differences between letters than expected.

Articles like this one may provide you with the right words to describe what you don't like about certain fonts: https://medium.com/design-bootcamp/a-beginners-guide-to-web-...