8 ms·

Tufte CSS

377 points by dpeck 9y ago

dang 9y ago
From 2015: https://news.ycombinator.com/item?id=10012360 https://news.ycombinator.com/item?id=10012360, https://news.ycombinator.com/item?id=10555319 https://news.ycombinator.com/item?id=10555319. And there was https://news.ycombinator.com/item?id=10552626 https://news.ycombinator.com/item?id=10552626 as well.
justin--sane 9y ago
This is extremely nice. "The Visual Display of Quantitative Information" and "Envisioning Information" are, IMHO, masterworks.
shabbyrobe 9y 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 https://github.com/edwardtufte/tufte-css/issues/119
- SaturateDK 9y 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 9y 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 https://en.wikipedia.org/wiki/Flash_of_unstyled_content
Numberwang 9y ago
I don't find the font all that good looking. In general, I'd say Material Desing beats this.
- ssijak 9y ago
  I hate material design on the web, it feels overanimated and bloated. On android it looks fine.
ggm 9y 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.
- joelanman 9y 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 9y ago
    Are the results of that research written up somewhere, or is this purely internal?
    - mycelium 9y ago
      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 https://www.gov.uk/guidance/government-design-principles
    - joelanman 9y ago
      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://designnotes.blog.gov.uk/ https://insidegovuk.blog.gov.uk/ https://insidegovuk.blog.gov.uk/ https://www.gov.uk/service-manual https://www.gov.uk/service-manual
      - nextos 9y ago
        I find all gov.uk web stuff really top notch compared to other EU govts. Keep up the good work.
  - Angostura 9y ago
qrv3w 9y 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 https://github.com/schollz/markdown2tufte [2]: https://github.com/jez/tufte-pandoc-css https://github.com/jez/tufte-pandoc-css
- AndrewStephens 9y 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 9y ago
    Do you have any plans to open source it?
    - AndrewStephens 9y ago
      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 https://github.com/andrewstephens75/gensite
iridium 9y 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.
- mikecsh 9y ago
  MLA?
  - zbentley 9y 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 https://en.wikipedia.org/wiki/MLA_Style_Manual
    - mikecsh 9y ago
      Aha, thank you.
decafbad 9y ago
That's an awful font.
- Angostura 9y ago
  Because?
  - decafbad 9y ago
    Are we seeing the same page? https://i.imgur.com/LOOHFFz.png https://i.imgur.com/LOOHFFz.png What's the point of making 'e's look very close to 'o's?
    - talideon 9y ago
      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.
chmaynard 9y 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 9y 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"/>
  - SaturateDK 9y 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.
neves 9y ago
It is really nice. Can I use it in a Python Jupyter Notebook?
- levesque 9y 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 9y ago
    Emacs org-mode HTML export + ob-ipython could do it for you, with some configuration...
ChrisSD 9y 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 9y ago
  Also, what a great thing to include in such a release. A humble and encouraging starting point for others to start building with.
AndrewStephens 9y 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_-_boston_bridge_proj.html https://sheep.horse/2017/9/crossfading_photos_with_webgl_-_b... https://sheep.horse/2017/10/how_you_are_reading_this_page.html https://sheep.horse/2017/10/how_you_are_reading_this_page.ht...
- cujo 9y 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 9y 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 9y 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.
  - AndrewStephens 9y 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 9y ago
zellyn 9y ago
This is lovely. Anyone know of a Hugo theme that implements it?
suleiro 9y ago
We've created Wordpress theme based on that: https://github.com/Naturaily/tufte-wp-theme https://github.com/Naturaily/tufte-wp-theme
ocrcustomserver 9y ago
Any recommendations for similar looking stylesheets?
user5994461 9y 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 9y ago
  > These fonts are only available on Apple OS. Eh? The article uses https://github.com/edwardtufte/et-book 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 9y ago
  I'm reading from Windows, and the fonts used look good to me?
- TheAceOfHearts 9y 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 https://en.wikipedia.org/wiki/Gill_Sans [1] https://www.edwardtufte.com/tufte/ https://www.edwardtufte.com/tufte/ [2] https://en.wikipedia.org/wiki/Gill_Sans#Gill_Sans_Nova_.282015.29 https://en.wikipedia.org/wiki/Gill_Sans#Gill_Sans_Nova_.2820... [3] https://medium.design/project-tnt-4b9b4ea97cda https://medium.design/project-tnt-4b9b4ea97cda [4] https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/ https://www.smashingmagazine.com/2015/11/using-system-ui-fon...
mplewis 9y ago
I like the look of Tufte CSS. I used it for my personal website, with some changes – http://mplewis.com http://mplewis.com
slmyers 9y 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 9y 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 9y 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 9y ago
  Agree, appreciate the idea but find the font (ornate, "bookish" & large) and spacing of that website (overkill) very unfriendly on the eye.
- _jal 9y 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 9y 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 9y ago
The side notes seem to vanish altogether on small screens, rather than merging into the text as I would have expected.
- adamrezich 9y 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.

377 points by dpeck 9y ago

dang 9y ago

From 2015: https://news.ycombinator.com/item?id=10012360 https://news.ycombinator.com/item?id=10012360, https://news.ycombinator.com/item?id=10555319 https://news.ycombinator.com/item?id=10555319. And there was https://news.ycombinator.com/item?id=10552626 https://news.ycombinator.com/item?id=10552626 as well.

justin--sane 9y ago

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

shabbyrobe 9y 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 https://github.com/edwardtufte/tufte-css/issues/119

SaturateDK 9y 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 9y 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 https://en.wikipedia.org/wiki/Flash_of_unstyled_content

Numberwang 9y ago

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

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

ggm 9y 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.

joelanman 9y 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 9y ago
  Are the results of that research written up somewhere, or is this purely internal?
  - mycelium 9y ago
    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 https://www.gov.uk/guidance/government-design-principles
  - joelanman 9y ago
    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://designnotes.blog.gov.uk/ https://insidegovuk.blog.gov.uk/ https://insidegovuk.blog.gov.uk/ https://www.gov.uk/service-manual https://www.gov.uk/service-manual
    - nextos 9y ago
      I find all gov.uk web stuff really top notch compared to other EU govts. Keep up the good work.
- Angostura 9y ago

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

AndrewStephens 9y 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 9y ago
  Do you have any plans to open source it?
  - AndrewStephens 9y ago
    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 https://github.com/andrewstephens75/gensite

iridium 9y 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.

mikecsh 9y ago
MLA?
- zbentley 9y 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 https://en.wikipedia.org/wiki/MLA_Style_Manual
  - mikecsh 9y ago
    Aha, thank you.

decafbad 9y ago

That's an awful font.

Angostura 9y ago
Because?
- decafbad 9y ago
  Are we seeing the same page? https://i.imgur.com/LOOHFFz.png https://i.imgur.com/LOOHFFz.png What's the point of making 'e's look very close to 'o's?
  - talideon 9y ago
    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.

chmaynard 9y 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 9y 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"/>
- SaturateDK 9y 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.

neves 9y ago

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

levesque 9y 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 9y ago
  Emacs org-mode HTML export + ob-ipython could do it for you, with some configuration...

ChrisSD 9y 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 9y ago
Also, what a great thing to include in such a release. A humble and encouraging starting point for others to start building with.

AndrewStephens 9y 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_-_boston_bridge_proj.html https://sheep.horse/2017/9/crossfading_photos_with_webgl_-_b... https://sheep.horse/2017/10/how_you_are_reading_this_page.html https://sheep.horse/2017/10/how_you_are_reading_this_page.ht...

cujo 9y 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 9y 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 9y 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.
- AndrewStephens 9y 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 9y ago

zellyn 9y ago

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

suleiro 9y ago

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

ocrcustomserver 9y ago

Any recommendations for similar looking stylesheets?

user5994461 9y 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 9y ago
> These fonts are only available on Apple OS. Eh? The article uses https://github.com/edwardtufte/et-book 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 9y ago
I'm reading from Windows, and the fonts used look good to me?
TheAceOfHearts 9y 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 https://en.wikipedia.org/wiki/Gill_Sans [1] https://www.edwardtufte.com/tufte/ https://www.edwardtufte.com/tufte/ [2] https://en.wikipedia.org/wiki/Gill_Sans#Gill_Sans_Nova_.282015.29 https://en.wikipedia.org/wiki/Gill_Sans#Gill_Sans_Nova_.2820... [3] https://medium.design/project-tnt-4b9b4ea97cda https://medium.design/project-tnt-4b9b4ea97cda [4] https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/ https://www.smashingmagazine.com/2015/11/using-system-ui-fon...

mplewis 9y ago

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

slmyers 9y 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 9y 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 9y 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 9y ago
Agree, appreciate the idea but find the font (ornate, "bookish" & large) and spacing of that website (overkill) very unfriendly on the eye.
_jal 9y 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 9y 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 9y ago

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

adamrezich 9y 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.