Tufte CSS | Hacker News Reader

Tufte CSS

edwardtufte.github.io

377 pointsdpeck59 comments

To those interested, I made a Markdown-to-Tufte converter a few months ago. [1] Its still very rough around the edges but you can easily use the Docker image to convert a bunch of Markdown documents into a Tufte-style book. Its mostly based off jez/tufte-pandoc-css [2] which did the heavy lifting of converting the Tufte CSS to be used with pandoc.

[1]: https://github.com/schollz/markdown2tufte

[2]: https://github.com/jez/tufte-pandoc-css

Interesting project. The static generator I use for my site also converts markdown->tufte.css, although with a different set of custom tags for things like margin notes.

Do you have any plans to open source it?

Yes and no. The code is available[1] but it is a rather poor state, having no documentation and not being packaged properly.

Getting it into some sort of shape is on my list of things to do.

[1] https://github.com/andrewstephens75/gensite

> Finally, 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”. Tufte CSS is merely a sketch of one way to implement this particular set of ideas. It should be a starting point, not a design goal, because any project should present their information as best suits their particular circumstances.

The above paragraph is a critical caveat. This is only one possible implementation of a minimalist design. There's no research to suggest it's the best, most engaging, or any other adjective you wish to use.

Which is not to say it's bad (not at all) but it's not the One True Way™ either.

Also, what a great thing to include in such a release. A humble and encouraging starting point for others to start building with.

From 2015: https://news.ycombinator.com/item?id=10012360, https://news.ycombinator.com/item?id=10555319.

And there was https://news.ycombinator.com/item?id=10552626 as well.

Please STOP using tufte fonts for everything that's displayed on a web site. No exception ever.

These fonts are only available on Apple OS. They will render poorly on everything else, making the text hard to read and killing your readership.

You don't need to believe me, just ask any web designer recommending tufte fonts what operating system he's using? You'll quickly realize that they're all on apple.

Tufte (1942 - present) did a lot of work on typesetting for printing books, sadly his work was never adapted or ported to computers.

  > These fonts are only available on Apple OS.

Eh? The article uses https://github.com/edwardtufte/et-book with fallback to various names of Palatino, which as one of the base 35 Postscript fonts has been available everywhere for approximately forever.

Tufte is not a typographer. He knows when to employ a designer (as he did on his first major book, The Visual Display...) but he wouldn't make the claim that he has done "a lot of work on typesetting".

In fact, he says "The lessons to be learned from my book-making process are boringly autobiographical and have little broader relevance." https://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=...

Tufte is a smart perfectionist with a compelling message about graphic organization, but it's wrong to cast him as a master book designer or typographer. His books and display strategies are best understood as personal expressions, not professional masterclasses or templates to be imitated. So maybe we agree, in the sense that blind imitation of minor details of Tufte's style is foolish.

It sounds like you're referring specifically to Gill Sans [0], which is shipped with macOS and appears to be the font used on Edward Tufte's website [1]. However, it looks like Windows 10 now bundles Gill Sans Nova [2], although I'm uncertain how well it renders.

Maybe instead of avoiding it completely, you'd consider suggesting a bundled alternative to use as fallback for other platforms? I wasn't aware of the font's existence before now, but I'm on macOS and I agree it looks nice on this platform.

Personally, I'll typically disable remote fonts on my browser, since it just makes sites load slower. On desktop it's not as significant, but on mobile it's rather drastic.

Sites don't have to render exactly the same on every platform and browser, it's fine, really! The Medium redesign [3] a few years back convinced me to try system fonts, and I've been really happy with the result. In case any reader is interested, Using UI System Fonts In Web Design [4] has all the info needed.

[0] https://en.wikipedia.org/wiki/Gill_Sans

[1] https://www.edwardtufte.com/tufte/

[2] https://en.wikipedia.org/wiki/Gill_Sans#Gill_Sans_Nova_.2820...

[3] https://medium.design/project-tnt-4b9b4ea97cda

[4] https://www.smashingmagazine.com/2015/11/using-system-ui-fon...

I'm reading from Windows, and the fonts used look good to me?

I use Tufte CSS stylesheet (very slightly modified) on my blog/static generator. I like it for its focus on plain text and clarity over flashy presentation. Some people have complained about the font - serif fonts are out of style on the web but I find it easy on the eye.

The biggest problem I have found is that it really doesn't have a great answer for vertical mobile screens. It works, but I find the layout sub-optimal. I decided it was acceptable though.

These two posts demonstrate what I was going for the best:

https://sheep.horse/2017/9/crossfading_photos_with_webgl_-_b...

https://sheep.horse/2017/10/how_you_are_reading_this_page.ht...

On my phone the body only takes up about 50% of my screen width. Probably a bug?

As I shrank the safari window on Mac on your site, there is a point when the font size jumps up to be huge, that seems like a bug.

Yes, it is a bug (in my modifications, not in tufte.css itself), or at least an unintended side effect. It is on my list of things to revisit but I am prioritizing writing posts instead of futzing around with the styles.

The general layout of Tufte.css really wants to be larger in the horizontal direction to fit in the side notes. This causes problems for people who read the page in a narrow window or on cell phones.

I have the opposite issue. In Safari iOS the right margin is consuming 1/4 of my screen, causing the text to shift to a narrow column.

I don't find the font style a problem, but the size is so large that I find myself retreating from the screen.

This is a really nice looking stylesheet. I'd almost certainly use it the next time I needed to share some content, but unfortunately it has some pretty janky FOUT and FOIT issues for me here in Australia. I'm no CSS guru, so the best I can really do is to report: https://github.com/edwardtufte/tufte-css/issues/119

It's not minimized or served over HTTP/2, and then there's the images, they could be much smaller. Like 5.3MiB smaller.

I'll make a PR for the easy stuff :-)

For us poor non-web developers, "FOUT" is "flash of unstyled text" [1] and since I'm a Firefox user I got it, too.

FOIT is "flash of invisible text".

[1]: https://en.wikipedia.org/wiki/Flash_of_unstyled_content

I have grown to appreciate Tufte a lot and I think he's spot on with some things, but when it comes right down to conveying information from one brain to another, I think Matthew Butterick's principles are better, though I am sure there is lots of crossover.

I think Tufte is great, and his ideas of reductionism should never go away. But, this is giving me MLA flashbacks all over again.

MLA?

They are likely referring to the MLA style manual, which is heavily used in some academic areas, and is often the subject of complaints regarding its highly specific and easy-to-mistake rules regarding citations: https://en.wikipedia.org/wiki/MLA_Style_Manual

Aha, thank you.

This is extremely nice. "The Visual Display of Quantitative Information" and "Envisioning Information" are, IMHO, masterworks.

They should follow the more familiar pattern of CSS libraries with a series of simple examples. I feel this reads more like a paper.

I disagree. It's made for writing papers and paper-likes. It sets the tone and expectation with itself as a fluid set of examples.

It is really nice. Can I use it in a Python Jupyter Notebook?

It would be nice to wrap a Jupyter notebook in this format. I'd be able to produce beautiful webpages quickly from research material!

Emacs org-mode HTML export + ob-ipython could do it for you, with some configuration...

I suspect that many, myself included will struggle with reductionist proscriptive limits. Not because they are wrong, but because we have become seduced by apparently beneficial things like bullet lists and two column output.

Relearning to focus on content is hard.

At GOV.UK we do a lot of user research, and find bullet points to be very successful in drawing affection to and clearly conveying lists of things. For example requirements.

I'm assuming from context that you're referring to lists of very specific, well-known things, such as documents someone might need to bring to an office (form 232, id card, etc.). That's a very specific use case where a checklist is actually the most appropriate device.

Tufte's work is about conveying complex information. The proscription against bullet points is rooted in the fact that most information cannot be effectively written in that manner - only if there is already an unambiguous name for everything in the list will the bullet points be sufficient.

The writing style that favors frequent use of bulleted lists instead of full-sentence descriptions to represent complex ideas leads to small thinking.

Can I just say thank you, for the splendid work you do over there. I steal from your ideas liberally, whenever I want something clearly designed and written.

On behalf of everyone, thanks, always good to know :)

Are the results of that research written up somewhere, or is this purely internal?

Can't think of where that particular finding is written up, but you can find a lot of our research and guidance on our blogs and site:

https://designnotes.blog.gov.uk/

https://insidegovuk.blog.gov.uk/

https://www.gov.uk/service-manual

I find all gov.uk web stuff really top notch compared to other EU govts. Keep up the good work.

All of the gov.uk guidance (not sure about the research) is excellently written up. This is a great start: https://www.gov.uk/guidance/government-design-principles

I appreciate simplicity and restraint but I just don't get Tufte. The Napoleon chart is cool but beyond that it just makes my eyes hurt, for me personally it's really hard to digest information presented in his style.

I take Tufte as doing something slightly different than what his stated goal is. I see him more as playing with design principles to build visual grammars very different than we're used to, that sometimes run to extremes - like the Napoleon chart. The information density, compared to a normal chart, is huge and the conventions, well, unconventional. Also, it took a ton of labor, and there aren't really tools for normal humans to create such charts in the time people typically have for Powerpoint. So I see that chart, in particular, as a demonstration model, or maybe an art piece.

Agree, appreciate the idea but find the font (ornate, "bookish" & large) and spacing of that website (overkill) very unfriendly on the eye.

I like the look of Tufte CSS. I used it for my personal website, with some changes – http://mplewis.com

We've created Wordpress theme based on that: https://github.com/Naturaily/tufte-wp-theme

This is lovely. Anyone know of a Hugo theme that implements it?

I'm authoring my personal blog using Markdown and a Jekyll theme. How would I go about using Tufte CSS in this context? Does that even make sense?

From the article:

> ”To use Tufte CSS, just copy tufte.css and the et-book font directory to your project and add the following to your HTML doc's head block:”

    <link rel="stylesheet" href="tufte.css"/>

And to elaborate a bit, yes it would make sense to include it. What engine are you using? I might just create a theme for it.

EDIT: You mentioned the Jekyll, I was a bit slow.

Any recommendations for similar looking stylesheets?

The side notes seem to vanish altogether on small screens, rather than merging into the text as I would have expected.

>This document currently uses the symbol ⊕ (⊕), but it’s up to you.

They turn into click-toggleable inline links with a distinctive symbol to represent them.

I don't find the font all that good looking. In general, I'd say Material Desing beats this.

I hate material design on the web, it feels overanimated and bloated. On android it looks fine.

That's an awful font.

Because?

Are we seeing the same page? https://i.imgur.com/LOOHFFz.png

What's the point of making 'e's look very close to 'o's?

I suspect the issue may be down to however your computer, which I'm guessing is running Windows, is rasterising the font. On Mac OS, it renders perfectly, whether on a Retina display or a normal monitor. Ditto for Ubuntu.

It looks like ClearType is making certain elements of the typeface finer and lighter. You might want to tune your ClearType settings.

Reply on news.ycombinator.com