←back to thread

Tufte CSS

(edwardtufte.github.io)
203 points avinassh | 1 comments | 03 Sep 25 18:41 UTC | HN request time: 0.305s | source
Show context
lucideer ◴[03 Sep 25 19:48 UTC] No.45119738[source]▶
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.

replies(1): >>45120002 #
____tom____ ◴[03 Sep 25 20:23 UTC] No.45120002[source]▶
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?

replies(2): >>45121980 #>>45128238 #
1. Karawebnetwork ◴[04 Sep 25 15:16 UTC] No.45128238[source]▶
> 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-...