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.
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.
> 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.
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.
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".
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.
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:
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.
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
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.
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
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.
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.
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.
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.
[1]: https://github.com/schollz/markdown2tufte
[2]: https://github.com/jez/tufte-pandoc-css