Tufte CSS

https://edwardtufte.github.io/tufte-css/

by dpeck • 9 years ago

377 59 9 years ago

edwardtufte.github.io

dang• 9 years ago

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.

justin--sane• 9 years ago

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

shabbyrobe• 9 years ago

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

SaturateDK2• 9 years ago

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 :-)

unwind• 9 years ago

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

Numberwang• 9 years ago

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

ssijak• 9 years ago

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

ggm• 9 years ago

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.

joelanman3• 9 years ago

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.

nathell• 9 years ago

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

Angostura2• 9 years ago

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.

couchand• 9 years ago

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.

iridium• 9 years ago

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

mikecsh2• 9 years ago

MLA?

zbentley• 9 years ago

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

decafbad2• 9 years ago

That's an awful font.

Angostura2• 9 years ago

Because?

decafbad2• 9 years ago

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?

chmaynard• 9 years ago

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?

grzm• 9 years ago

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"/>

SaturateDK2• 9 years ago

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.

qrv3w• 9 years ago

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

AndrewStephens4• 9 years ago

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.

ryanmarsh• 9 years ago

Do you have any plans to open source it?

neves• 9 years ago

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

levesque• 9 years ago

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

kadal• 9 years ago

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

ChrisSD• 9 years ago

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.

michaelbuckbee• 9 years ago

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

AndrewStephens4• 9 years ago

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...

cujo• 9 years ago

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

brightrhino• 9 years ago

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.

chapium• 9 years ago

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.

AndrewStephens4• 9 years ago

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.

Rotten194• 9 years ago

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

zellyn• 9 years ago

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

suleiro• 9 years ago

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

ocrcustomserver• 9 years ago

Any recommendations for similar looking stylesheets?

user5994461• 9 years ago

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.

kps• 9 years ago

  > 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.

yoklov• 9 years ago

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

TheAceOfHearts• 9 years ago

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...

theoh• 9 years ago

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.

mplewis• 9 years ago

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

slmyers• 9 years ago

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

RickHull• 9 years ago

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.

zwieback• 9 years ago

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.

dingdingdang• 9 years ago

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

_jal• 9 years ago

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.

chevas• 9 years ago

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.

jonahx• 9 years ago

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

adamrezich• 9 years ago

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.

Tufte CSS

Related Stories