Tufte CSS | Dave Liepmann

I know very little about Edward Tufte, but they clearly have quite the following in the design/typography space. Tufte CSS is a project aiming to emulate various tenets that Tufte used to design their books and articles, but with a focus on how they might work on the web. The result is a very pleasing library of CSS classes and defaults that looks pretty decent, in a slightly old-fashioned, Victorian way (which I'm obviously all for).

On a more personal level, I find the use of "sidenotes" (their term), figures, epitaphs, and simple layout rules most interesting; there are definitely a few ideas here that I find inspirational.

[PS thanks to Jeremy on the IndieWeb chat for linking me to this project, and Edward Tufte in general, following a discussion on whitespace and typography.]

On sidenotes, which (on smaller screens) collapse and become togglable text that expands between paragraphs; neat UI/UX:

Sidenotes are like footnotes, except they don’t force the reader to jump their eye to the bottom of the page, but instead display off to the side in the margin.
Sidenotes are a great example of the web not being like print. On sufficiently large viewports, Tufte CSS uses the margin for sidenotes, margin notes, and small figures. On smaller viewports, elements that would go in the margin are hidden until the user toggles them into view.

On the project (I just liked the sentiment 😂):

Tufte CSS is merely a sketch of one way to implement this particular set of ideas.

Explore Other Notes

Newer

Cyber realists

A really succinct quote from Seth on glass-is-unoptimised thinking (as opposed to cyber-optimism or cyber-pessimism, which I agree are both untenable […]
  • I know very little about Edward Tufte, but they clearly have quite the following in the design/typography space. <em>Tufte CSS</em> is a project aiming to emulate various tenets that Tufte used to [&#8230;]
  • Murray Adcock.
Journal permalink

Made By Me, But Made Possible By:

CMS:

Build: Gatsby

Deployment: GitHub

Hosting: Netlify

Connect With Me:

Twitter Twitter

Instagram Instragram

500px 500px

GitHub GitHub

Keep Up To Date:

All Posts RSS feed.

Articles RSS feed.

Journal RSS feed.

Notes RSS feed.