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:
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.
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 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.
[+] [-] qrv3w|8 years ago|reply
[1]: https://github.com/schollz/markdown2tufte
[2]: https://github.com/jez/tufte-pandoc-css
[+] [-] AndrewStephens|8 years ago|reply
[+] [-] ChrisSD|8 years ago|reply
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.
[+] [-] michaelbuckbee|8 years ago|reply
[+] [-] dang|8 years ago|reply
And there was https://news.ycombinator.com/item?id=10552626 as well.
[+] [-] user5994461|8 years ago|reply
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.
[+] [-] kps|8 years ago|reply
[+] [-] theoh|8 years ago|reply
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.
[+] [-] TheAceOfHearts|8 years ago|reply
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...
[+] [-] yoklov|8 years ago|reply
[+] [-] AndrewStephens|8 years ago|reply
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...
[+] [-] Rotten194|8 years ago|reply
[+] [-] brightrhino|8 years ago|reply
[+] [-] cujo|8 years ago|reply
[+] [-] shabbyrobe|8 years ago|reply
[+] [-] SaturateDK|8 years ago|reply
I'll make a PR for the easy stuff :-)
[+] [-] unwind|8 years ago|reply
FOIT is "flash of invisible text".
[1]: https://en.wikipedia.org/wiki/Flash_of_unstyled_content
[+] [-] chevas|8 years ago|reply
[+] [-] iridium|8 years ago|reply
[+] [-] mikecsh|8 years ago|reply
[+] [-] justin--sane|8 years ago|reply
[+] [-] slmyers|8 years ago|reply
[+] [-] RickHull|8 years ago|reply
[+] [-] neves|8 years ago|reply
[+] [-] levesque|8 years ago|reply
[+] [-] ggm|8 years ago|reply
Relearning to focus on content is hard.
[+] [-] joelanman|8 years ago|reply
[+] [-] zwieback|8 years ago|reply
[+] [-] _jal|8 years ago|reply
[+] [-] dingdingdang|8 years ago|reply
[+] [-] mplewis|8 years ago|reply
[+] [-] suleiro|8 years ago|reply
[+] [-] zellyn|8 years ago|reply
[+] [-] chmaynard|8 years ago|reply
[+] [-] grzm|8 years ago|reply
> ”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:”
[+] [-] ocrcustomserver|8 years ago|reply
[+] [-] jonahx|8 years ago|reply
[+] [-] adamrezich|8 years ago|reply
They turn into click-toggleable inline links with a distinctive symbol to represent them.
[+] [-] Numberwang|8 years ago|reply
[+] [-] ssijak|8 years ago|reply